100 lines
3.7 KiB
Markdown
100 lines
3.7 KiB
Markdown
# Mobile readability fixes — `index.html`
|
||
|
||
Base: commit `3dcd822` (`bitcoinafterlife/bal-welist-website`, `main`).
|
||
|
||
**Scope:** header, filter bar and server list only. CSS-only — the JavaScript is
|
||
byte-for-byte unchanged. Desktop rendering is unaffected: every change sits
|
||
inside a `@media (max-width: ...)` block, except one line on `body` (item 7).
|
||
|
||
The "Add your Will Executor" panel, the invoice and the QR code were left
|
||
untouched on purpose, since payments are expected to be made from a desktop
|
||
browser.
|
||
|
||
---
|
||
|
||
## 1. Chain selector overflowed the viewport
|
||
|
||
**Before:** `.seg` was an `inline-flex` row of four buttons (Bitcoin, Testnet,
|
||
Testnet4, Regtest) with no wrapping — roughly 340px wide. On a 360–390px phone,
|
||
minus page padding, it pushed past the right edge and made the whole page scroll
|
||
horizontally.
|
||
|
||
**After:** below 600px the selector becomes a full-width 2×2 grid. Inner
|
||
dividers are recalculated with `:nth-child` so the borders stay correct in the
|
||
new arrangement.
|
||
|
||
## 2. Touch targets too small
|
||
|
||
Chain buttons were ~33px tall. Raised to `min-height: 44px` (the standard
|
||
minimum for a finger), applied to the chain buttons, the Tor toggle row and the
|
||
JSON link.
|
||
|
||
## 3. Nested scrolling in the server list
|
||
|
||
**Before:** `.mobile-list` carried `max-height: 350px; overflow: auto`, so on a
|
||
phone the list was a small window scrolling inside a page that also scrolls —
|
||
the two gestures fight each other.
|
||
|
||
**After:** the height cap is removed below 860px; the list flows with the page.
|
||
The desktop table (`.table-card`) keeps its 350px cap unchanged.
|
||
|
||
## 4. Long URLs broke out of the cards
|
||
|
||
Server URLs contain no spaces, so the browser cannot break them and they
|
||
overflowed the card. Added `overflow-wrap: anywhere`, plus `min-width: 0` on the
|
||
flex parent — without it a flex child defaults to `min-width: auto` and refuses
|
||
to shrink below its content width.
|
||
|
||
The JS truncation at 40 characters is unchanged.
|
||
|
||
## 5. Uneven card grid
|
||
|
||
The five fields (Score, Wins, Fee, Version, Height) sat in two fixed columns,
|
||
leaving Height alone on a half-empty row. Switched to
|
||
`repeat(auto-fit, minmax(84px, 1fr))`, which fits as many columns as the width
|
||
allows.
|
||
|
||
## 6. iOS auto-zoom on the search field
|
||
|
||
iOS Safari zooms the entire page when a focused input has a font size below
|
||
16px, and the user then has to pinch back out. The filter field is raised to
|
||
16px below 600px and made full width.
|
||
|
||
## 7. Text inflation in landscape
|
||
|
||
Added `-webkit-text-size-adjust: 100%` to `body`. iOS enlarges font sizes when a
|
||
phone is rotated to landscape, which distorted the header and the cards. This is
|
||
the only change outside a media query; it has no effect on desktop browsers.
|
||
|
||
## 8. Tighter spacing below 480px
|
||
|
||
New breakpoint reducing padding and type size where space is scarce:
|
||
|
||
| Element | Before | After |
|
||
| --- | --- | --- |
|
||
| `.wrap` side padding | 20px | 14px (+12px usable width per row) |
|
||
| `header.hero` padding | 48px 0 28px | 28px 0 20px |
|
||
| `.brand h1` | 24px | 20px |
|
||
| Logo mark | 46px | 40px |
|
||
| `.stat .n` | 26px | 22px |
|
||
| `.intro-card` padding | 28px 32px | 20px 18px |
|
||
| `.info-block` padding | 22px 24px | 18px 16px |
|
||
| `.srv` padding | 16px | 14px |
|
||
| Footer | space-between, wrapping | single column |
|
||
|
||
---
|
||
|
||
## Verification performed
|
||
|
||
- CSS braces balanced (148 open / 148 close).
|
||
- All 32 element IDs referenced by the JavaScript still present in the markup.
|
||
- Tag balance checked for `div`, `section`, `header`, `footer`, `main`, `table`,
|
||
`style`, `script`.
|
||
- Media queries present in order: 860px, 600px, 480px, `prefers-reduced-motion`.
|
||
|
||
## Not yet verified
|
||
|
||
Rendering was not tested on a physical device. Worth a quick check on one iPhone
|
||
and one Android phone before merging, in particular the 2×2 chain selector at
|
||
320px width (iPhone SE, the narrowest screen still in common use).
|