Fit public display to viewport and use Ladill Queue logo in footer.
Deploy Ladill Queue / deploy (push) Successful in 39s

Lock layout to 100dvh without scroll, scale ticket cards with clamp(), and replace powered-by text with the dark wordmark.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 23:05:40 +00:00
co-authored by Cursor
parent 98d14a213a
commit 3d79dfad10
4 changed files with 103 additions and 37 deletions
+50 -1
View File
@@ -269,14 +269,55 @@ html.qr-mobile-page body {
}
/* Public queue display — waiting-area TV screens (light theme) */
html:has(.qms-display),
html:has(.qms-display) body {
height: 100%;
overflow: hidden;
}
.qms-display {
min-height: 100vh;
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
background:
radial-gradient(ellipse 90% 60% at 50% -20%, rgb(238 242 255 / 0.9), transparent),
linear-gradient(180deg, rgb(248 250 252) 0%, rgb(255 255 255) 100%);
color: rgb(15 23 42);
}
.qms-display__shell {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
}
.qms-display__header {
flex-shrink: 0;
}
.qms-display__main {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
}
.qms-display__footer {
flex-shrink: 0;
}
.qms-display__tickets {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
gap: 0.75rem;
overflow: hidden;
}
.qms-display__grid-bg {
background-image:
linear-gradient(rgb(148 163 184 / 0.08) 1px, transparent 1px),
@@ -285,6 +326,12 @@ html.qr-mobile-page body {
}
.qms-display__ticket {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
justify-content: center;
overflow: hidden;
background: linear-gradient(180deg, #fff 0%, rgb(248 250 252) 100%);
border: 1px solid rgb(226 232 240);
box-shadow:
@@ -293,8 +340,10 @@ html.qr-mobile-page body {
}
.qms-display__ticket-number {
font-size: clamp(2.75rem, 11vh, 6rem);
font-variant-numeric: tabular-nums;
letter-spacing: -0.04em;
line-height: 1;
color: rgb(67 56 202);
}