# 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).