From ecaf983dbbaf7f86599cc993a2d55c51f7c7e7b0 Mon Sep 17 00:00:00 2001 From: bitcoinafterlife Date: Tue, 21 Jul 2026 22:43:06 +0000 Subject: [PATCH] Update index.html View optimised for mobile devices --- index.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 84 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9a01217..1ad4f70 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,10 @@ body{ font-family:var(--body); line-height:1.5; -webkit-font-smoothing:antialiased; + /* WHY: iOS Safari inflates font sizes when a phone is rotated to landscape, + which breaks the header and the server cards. Locking the adjustment to + 100% keeps the layout identical in both orientations. No effect on desktop. */ + -webkit-text-size-adjust:100%; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} @@ -207,7 +211,11 @@ footer a{color:var(--accent);text-decoration:none} .mobile-list{display:none} @media (max-width:860px){ .table-card{display:none} - .mobile-list{display:grid;gap:12px;max-height:350px;overflow:auto;padding-right:2px} + /* WHY: the previous "max-height:350px;overflow:auto" turned the server list + into a small scrollable window nested inside the page. On a touch screen + that inner scroll competes with the normal page scroll and makes the list + hard to read. On mobile the list now flows naturally with the page. */ + .mobile-list{display:grid;gap:12px} .add-grid{grid-template-columns:1fr} .info-grid{grid-template-columns:1fr} .hero-stats{gap:20px} @@ -215,9 +223,82 @@ footer a{color:var(--accent);text-decoration:none} .srv{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)} .srv .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px} .srv .rk{font-family:var(--display);font-weight:600;color:var(--rank);font-size:18px} - .srv .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px} + /* WHY: server URLs have no spaces, so a long URL cannot break by itself and + would overflow the card. "anywhere" lets it wrap at any character. + "min-width:0" is required because a flex child defaults to min-width:auto, + which prevents it from shrinking below its content width. */ + .srv .top>div{min-width:0} + .srv .top a{display:inline-block;max-width:100%;overflow-wrap:anywhere} + /* WHY: with two fixed columns the fifth field (Height) was left alone on a + half-empty row. auto-fit fills the available width with as many columns as + fit, so the five fields always line up tidily. */ + .srv .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;font-size:13px} .srv .grid div span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px} - .srv .grid div b{font-family:var(--mono);font-weight:600} + .srv .grid div b{font-family:var(--mono);font-weight:600;overflow-wrap:anywhere} +} + +/* --------------------------------------------------------------------------- + Phone layout (<=600px). + Scope: header, filter bar and server list only. The "Add your Will Executor" + panel, the invoice and the QR code are intentionally left untouched, because + payments are expected to be made from a desktop browser. + --------------------------------------------------------------------------- */ +@media (max-width:600px){ + .controls{gap:10px} + + /* WHY: the four chain buttons form a single non-wrapping row about 340px wide. + Inside a 360-390px phone screen (minus page padding) it overflowed the + viewport and produced horizontal scrolling. A 2x2 grid across the full + width removes the overflow. min-height:44px matches the recommended + minimum touch target size. */ + .seg{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:8px} + .seg button{font-size:14px;min-height:44px;padding:8px 10px;border-bottom:1px solid var(--line)} + .seg button:nth-child(2n){border-right:0} /* right column: no inner divider */ + .seg button:nth-child(n+3){border-bottom:0} /* last row: no bottom divider */ + + /* Give the toggle and the JSON link a full-size touch area. */ + .field{min-height:44px} + .btn-ghost{min-height:44px} + + /* WHY: the search field takes the full width so it is comfortable to type in, + and the font is raised to 16px. Below 16px, iOS Safari automatically zooms + the whole page when the field receives focus, and the user then has to + pinch back out. 16px disables that behaviour. */ + .search{flex:1 1 100%} + .search input{font-size:16px} +} + +/* --------------------------------------------------------------------------- + Narrow phone layout (<=480px): tighter spacing to recover horizontal space. + --------------------------------------------------------------------------- */ +@media (max-width:480px){ + /* Recovers 12px of usable width on every row of the page. */ + .wrap{padding:0 14px} + + header.hero{padding:28px 0 20px} + .hero .wrap{gap:16px} + .brand{gap:12px} + .brand .mark{width:40px;height:40px;border-radius:10px} + .brand .mark .brand-logo{width:28px;height:28px} + .brand h1{font-size:20px} + .brand .sub{font-size:13px} + .stat .n{font-size:22px} + + .controls{padding:16px 0 12px} + + .srv{padding:14px} + + .intro-card{padding:20px 18px;margin:22px 0 8px} + .intro-card h2{font-size:20px} + .intro-card p{font-size:14px} + + .info-section{margin:32px 0} + .info-block{padding:18px 16px} + + /* WHY: the four footer items were spread with space-between and wrapped into + an uneven, hard-to-read block. A single column reads cleanly on a phone. */ + footer{margin-top:32px;padding:22px 0} + footer .wrap{flex-direction:column;gap:8px} } @media (prefers-reduced-motion:reduce){*{transition:none!important}}