marty/instantadpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile overflow fixes: qual-bar marker, grid shrink guard, wrap guards

Browse Source 
Level-3 progress marker right-aligns inside the card (was centered past the
edge). Grid/flank/story children get min-width:0 so the calculator's
tablewrap scrolls internally instead of widening the page 7px. Invite link
and pitch preview wrap anywhere; ticker gets layout+paint containment;
img max-width guard. Verified at 390px across all four pages with sticky
nav intact. Assets v=20260904p.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-09-04 16:11:35 -05:00
parent 8ef50b183e
commit 537b11cfde
5 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/site.css
+5 -1
View File
@@ -158,7 +158,7 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
.split .s10{flex:1;background:rgba(67,232,195,.05)}
.split .sa{flex:2;background:rgba(139,166,156,.08);color:var(--muted)}
/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
.ticker{overflow:hidden;contain:layout paint;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@@ -171,6 +171,7 @@ h3{font-size:16.5px;margin:0 0 8px;font-weight:700}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 16px}
.card:hover{border-color:var(--line-strong)}
.grid{display:grid;gap:16px}
.grid>*,.flank>*,.story>*{min-width:0} /* let grid children shrink so inner tablewraps scroll instead of widening the page */
@media(min-width:760px){.grid.c3{grid-template-columns:1fr 1fr 1fr}.grid.c2{grid-template-columns:1fr 1fr}}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
@@ -227,6 +228,9 @@ input:focus,select:focus{border-color:var(--mint)}
.qualbar #qualFill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--mint-hi));
box-shadow:0 0 18px rgba(67,232,195,.4);width:0;transition:width .6s ease}
.qb-mark{position:absolute;top:16px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.qb-mark.end{left:auto!important;right:0;transform:none} /* keeps the last label inside the card on mobile */
#inviteLine,#pitchPreview{overflow-wrap:anywhere}
img{max-width:100%}
.roster{width:100%;border-collapse:collapse;font-size:13.5px}
.roster td{padding:8px 10px;border-bottom:1px solid var(--line)}
.roster td:first-child{font-family:var(--mono)}