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 .s10{flex:1;background:rgba(67,232,195,.05)}
.split .sa{flex:2;background:rgba(139,166,156,.08);color:var(--muted)} .split .sa{flex:2;background:rgba(139,166,156,.08);color:var(--muted)}
/* ticker */ /* 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; background:rgba(67,232,195,.04);white-space:nowrap;padding:10px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
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{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)} .card:hover{border-color:var(--line-strong)}
.grid{display:grid;gap:16px} .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}} @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} 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} 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)); .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} 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{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{width:100%;border-collapse:collapse;font-size:13.5px}
.roster td{padding:8px 10px;border-bottom:1px solid var(--line)} .roster td{padding:8px 10px;border-bottom:1px solid var(--line)}
.roster td:first-child{font-family:var(--mono)} .roster td:first-child{font-family:var(--mono)}
public/contract.html
+4 -4
View File
@@ -5,7 +5,7 @@
<title>The contract | InstantAdPay</title> <title>The contract | InstantAdPay</title>
<meta name="description" content="Plain-language review of the InstantAdPay settlement contract: what it does, what nobody can change, what the operator can and cannot touch, and how to verify all of it yourself."> <meta name="description" content="Plain-language review of the InstantAdPay settlement contract: what it does, what nobody can change, what the operator can and cannot touch, and how to verify all of it yourself.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260904l"> <link rel="stylesheet" href="/assets/site.css?v=20260904p">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -129,8 +129,8 @@
<div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div> <div class="small">Advertising services with a performance referral program. Not an investment product; no income guarantees. Crypto transactions are irreversible. Never spend what you cannot afford.</div>
</footer> </footer>
</div> </div>
<script src="/assets/common.js?v=20260904l"></script> <script src="/assets/common.js?v=20260904p"></script>
<script src="/assets/contract.js?v=20260904l"></script> <script src="/assets/contract.js?v=20260904p"></script>
<script src="/assets/chat.js?v=20260904l"></script> <script src="/assets/chat.js?v=20260904p"></script>
</body> </body>
</html> </html>
public/index.html
+5 -5
View File
@@ -5,7 +5,7 @@
<title>InstantAdPay: advertise and earn, locked in code</title> <title>InstantAdPay: advertise and earn, locked in code</title>
<meta name="description" content="Real ad packages with instant on-chain settlement. Every purchase pays the sponsor line in the same transaction, verifiable by anyone on the live ledger."> <meta name="description" content="Real ad packages with instant on-chain settlement. Every purchase pays the sponsor line in the same transaction, verifiable by anyone on the live ledger.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260904l"> <link rel="stylesheet" href="/assets/site.css?v=20260904p">
</head> </head>
<body> <body>
@@ -398,9 +398,9 @@
</div> </div>
</section> </section>
<script src="/assets/common.js?v=20260904l"></script> <script src="/assets/common.js?v=20260904p"></script>
<script src="/assets/wallet.js?v=20260904l"></script> <script src="/assets/wallet.js?v=20260904p"></script>
<script src="/assets/home.js?v=20260904l"></script> <script src="/assets/home.js?v=20260904p"></script>
<script src="/assets/chat.js?v=20260904l"></script> <script src="/assets/chat.js?v=20260904p"></script>
</body> </body>
</html> </html>
public/ledger.html
+4 -4
View File
@@ -5,7 +5,7 @@
<title>Live ledger | InstantAdPay</title> <title>Live ledger | InstantAdPay</title>
<meta name="description" content="Every purchase, payout, and pass-up on InstantAdPay, streamed straight from the blockchain with a verify link on every line."> <meta name="description" content="Every purchase, payout, and pass-up on InstantAdPay, streamed straight from the blockchain with a verify link on every line.">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260904l"> <link rel="stylesheet" href="/assets/site.css?v=20260904p">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -25,8 +25,8 @@
<div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div> <div>InstantAdPay · <a href="/">how it works</a> · <a id="contractLink" href="#" target="_blank" rel="noopener">contract source ↗</a></div>
</footer> </footer>
</div> </div>
<script src="/assets/common.js?v=20260904l"></script> <script src="/assets/common.js?v=20260904p"></script>
<script src="/assets/ledger.js?v=20260904l"></script> <script src="/assets/ledger.js?v=20260904p"></script>
<script src="/assets/chat.js?v=20260904l"></script> <script src="/assets/chat.js?v=20260904p"></script>
</body> </body>
</html> </html>
public/my.html
+6 -6
View File
@@ -4,7 +4,7 @@
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>My account | InstantAdPay</title> <title>My account | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="stylesheet" href="/assets/site.css?v=20260904l"> <link rel="stylesheet" href="/assets/site.css?v=20260904p">
</head> </head>
<body> <body>
<div class="wrap"> <div class="wrap">
@@ -59,7 +59,7 @@
<div id="qualBarWrap"> <div id="qualBarWrap">
<div class="qualbar"><div id="qualFill"></div> <div class="qualbar"><div id="qualFill"></div>
<span class="qb-mark" style="left:40%">2 · level 2</span> <span class="qb-mark" style="left:40%">2 · level 2</span>
<span class="qb-mark" style="left:100%">5 · level 3</span> <span class="qb-mark end">5 · level 3</span>
</div> </div>
</div> </div>
</div> </div>
@@ -160,9 +160,9 @@
<footer><div>InstantAdPay · <a href="/ledger">live ledger</a></div></footer> <footer><div>InstantAdPay · <a href="/ledger">live ledger</a></div></footer>
</div> </div>
<script src="/assets/common.js?v=20260904l"></script> <script src="/assets/common.js?v=20260904p"></script>
<script src="/assets/wallet.js?v=20260904l"></script> <script src="/assets/wallet.js?v=20260904p"></script>
<script src="/assets/my.js?v=20260904l"></script> <script src="/assets/my.js?v=20260904p"></script>
<script src="/assets/chat.js?v=20260904l"></script> <script src="/assets/chat.js?v=20260904p"></script>
</body> </body>
</html> </html>