eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix lobby overflow on phones: global box-sizing and wrapping rows

Browse Source 
The box lid combined width:100% with 2.6rem side padding and no
box-sizing reset, so the card ran off the right edge of real phones
(Join, Play Here, and Claim all clipped). A global border-box reset
fixes the class of bug; the hotseat and claim rows now wrap, their
inputs go full-width on narrow screens, and the lid tightens its
padding and title below 900px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-16 01:07:32 -04:00
co-authored by Claude Fable 5
parent 30aa1e778d
commit ac82c28750
1 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/App.svelte
+11 -2
View File
@@ -810,6 +810,9 @@
margin: 0; margin: 0;
background: #171a20; background: #171a20;
} }
:global(*, *::before, *::after) {
box-sizing: border-box;
}
.table { .table {
min-height: 100vh; min-height: 100vh;
background: background:
@@ -863,7 +866,7 @@
.mast-leave:hover { color: #d8d2c0; } .mast-leave:hover { color: #d8d2c0; }
.mast-help-solo { margin-left: auto; } .mast-help-solo { margin-left: auto; }
.claim-input.wide { width: 17rem; } .claim-input.wide { width: 17rem; }
.hotseat-row { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 1.3rem; } .hotseat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 1.3rem; }
.hotseat-exp { margin-top: 0.4rem; margin-bottom: 0; font-size: 0.85rem; } .hotseat-exp { margin-top: 0.4rem; margin-bottom: 0; font-size: 0.85rem; }
.scrim-handoff { .scrim-handoff {
@@ -920,7 +923,7 @@
border: 1px solid #b3a687; border: 1px solid #b3a687;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
padding: 2.2rem 2.6rem 2rem; padding: 2.2rem 2.6rem 2rem;
max-width: 26rem; max-width: min(26rem, 100%);
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
@@ -986,6 +989,7 @@
} }
.claim-row { .claim-row {
display: flex; display: flex;
flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -1270,6 +1274,11 @@
} }
.chronicle { max-height: 30dvh; flex: initial; } .chronicle { max-height: 30dvh; flex: initial; }
.masthead { gap: 0.45rem; padding-top: 0.5rem; } .masthead { gap: 0.45rem; padding-top: 0.5rem; }
.boxlid { padding: 1rem 0; }
.boxlid-inner { padding: 1.5rem 1.2rem 1.4rem; }
.boxlid-title { font-size: 2.3rem; }
.claim-input.wide, .claim-input { width: 100%; flex: 1 1 100%; }
.hotseat-row .stamp, .claim-row .stamp { flex: 0 0 auto; }
.mast-title { font-size: 1.05rem; white-space: nowrap; } .mast-title { font-size: 1.05rem; white-space: nowrap; }
.mast-sub { display: none; } .mast-sub { display: none; }
.mast-leave { font-size: 0.72rem; } .mast-leave { font-size: 0.72rem; }