From c1113bc5a2b31e18eb0f2f28efa9b118f25e7c98 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Mon, 29 Jun 2026 23:16:00 +0000
Subject: [PATCH] Simplify now-serving card to a single centered column.

Remove counter arrow line and stack ticket number above desk name with clean alignment.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/css/app.css                        | 37 +++++---------------
 resources/views/qms/display/public.blade.php | 21 ++++-------
 2 files changed, 15 insertions(+), 43 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 27c2858..e68e217 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -345,31 +345,22 @@ html:has(.qms-display) body {
     background: linear-gradient(90deg, rgb(79 70 229), rgb(129 140 248));
 }
 
-.qms-display__ticket-split {
-    display: grid;
-    min-height: 0;
-    flex: 1;
-    grid-template-columns: 1fr 1fr;
-}
-
-.qms-display__ticket-panel {
+.qms-display__ticket-body {
     display: flex;
     min-height: 0;
+    flex: 1;
     flex-direction: column;
-    justify-content: center;
-    padding: clamp(1rem, 3vh, 2.5rem) clamp(1.25rem, 4vw, 3rem);
-}
-
-.qms-display__ticket-panel--number {
     align-items: center;
+    justify-content: center;
+    padding: clamp(1.25rem, 4vh, 3rem) clamp(1.5rem, 5vw, 3rem);
     text-align: center;
-    border-right: 1px solid rgb(241 245 249);
 }
 
-.qms-display__ticket-panel--counter {
-    align-items: flex-start;
-    justify-content: center;
-    background: linear-gradient(135deg, rgb(238 242 255) 0%, rgb(224 231 255 / 0.5) 100%);
+.qms-display__ticket-divider {
+    width: min(8rem, 40%);
+    height: 1px;
+    margin: clamp(1rem, 3vh, 2rem) 0;
+    background: linear-gradient(90deg, transparent, rgb(199 210 254), transparent);
 }
 
 .qms-display__label {
@@ -402,16 +393,6 @@ html:has(.qms-display) body {
     color: rgb(15 23 42);
 }
 
-.qms-display__counter-arrow {
-    display: flex;
-    margin-top: clamp(0.75rem, 2vh, 1.25rem);
-    align-items: center;
-    gap: 0.5rem;
-    font-size: clamp(0.7rem, 1.5vh, 0.875rem);
-    font-weight: 600;
-    color: rgb(79 70 229);
-}
-
 .qms-display__ticket--empty {
     justify-content: center;
     align-items: center;
diff --git a/resources/views/qms/display/public.blade.php b/resources/views/qms/display/public.blade.php
index 5378559..2633e0c 100644
--- a/resources/views/qms/display/public.blade.php
+++ b/resources/views/qms/display/public.blade.php
@@ -75,21 +75,12 @@
                     <template x-for="item in (payload?.now_serving ?? []).slice(0, 3)" :key="item.ticket_number + (item.counter ?? '')">
                         <article class="qms-display__ticket rounded-2xl lg:rounded-3xl">
                             <div class="qms-display__ticket-accent" aria-hidden="true"></div>
-                            <div class="qms-display__ticket-split">
-                                <div class="qms-display__ticket-panel qms-display__ticket-panel--number">
-                                    <span class="qms-display__label">Ticket</span>
-                                    <p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
-                                </div>
-                                <div class="qms-display__ticket-panel qms-display__ticket-panel--counter">
-                                    <span class="qms-display__label">Please proceed to</span>
-                                    <p class="qms-display__counter-name" x-text="item.counter ?? '—'"></p>
-                                    <div class="qms-display__counter-arrow">
-                                        <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                                            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
-                                        </svg>
-                                        <span>Your counter is ready</span>
-                                    </div>
-                                </div>
+                            <div class="qms-display__ticket-body">
+                                <span class="qms-display__label">Ticket</span>
+                                <p class="qms-display__ticket-number" x-text="item.ticket_number"></p>
+                                <div class="qms-display__ticket-divider" aria-hidden="true"></div>
+                                <span class="qms-display__label">Please proceed to</span>
+                                <p class="qms-display__counter-name" x-text="item.counter ?? '—'"></p>
                             </div>
                         </article>
                     </template>