Reader chrome — three arrangements

Baseline

Current: one row, five controls, one clipped word

RationaleEverything is one tap away and the chrome is a single 52px band.

What it costsRefresh and the hamburger are 30px targets, and SHELVE has to lose its word to fit, and the icon alone does not read.

MobileiPhone 390 · shipped today

Desktop1024px

Read the arithmetic. Measured off this page at desktop width, where nothing is clipped: refresh 30 + hamburger 30 + TO READER 92 + SHELVE 94 + MARK READ 117 + four 8px gaps + 32px of chrome padding = 427px. Usable width on a 390 phone is 358px. Flexbox absorbs the 69px difference by squeezing padding and clipping the SHELVE label down to a 33px stub: the number in the strip above the note.

There is already a second MARK READ floating at the foot of the page (bottom right), so the chrome copy is a duplicate. That is what Option C exploits.

Option A

Two-row chrome: identity above, actions below

RationaleStop fighting for width: give the actions their own full-width row, where three 44px pills fit with room to spare and the mini-masthead comes back.

What it costsThe chrome goes from 53px to 113px, a permanent 60px bite out of an 844px screen on every page, and the actions still sit at the top, the furthest point from your thumb.

Mobiletwo rows · masthead restored

Desktop1024px

Desktop collapses back to one row. Above 720px there is width for everything at 44px, so the second row is a phone-only behaviour, not a new layout to maintain in two places.

Action pills are flex: 1, so they divide the row evenly rather than sizing to their words. That is a deliberate break from the pill idiom's shrink-to-fit habit, and it is what makes the row read as a set of three equal choices.

Option B

Thumb-zone action bar: chrome navigates, the foot acts

RationaleSplit by kind: the chrome keeps identity and navigation (refresh, masthead, hamburger), and the three lifecycle actions drop to the bottom where a thumb actually reaches without a grip change.

What it costsThe bottom reserve goes from 33px to 97px and there is one more fixed layer to reason about. It also retires the floating foot MARK READ, so that pill's habit has to be relearned.

Mobileaction bar + sync strip, one stack

Desktop1024px

The sync-strip collision, solved. The two stop competing for bottom: 0 and become one fixed stack. The action bar sits on top and supplies the hairline; the sync strip keeps the floor and keeps owning env(safe-area-inset-bottom), so the home indicator never lands on a button. Measure the whole stack once and publish it as --foot-h; --sync-h stays as an alias so nothing that already consumes it breaks. Use the three buttons above to watch the reserve change as the sync line changes height.

Desktop drops the bar entirely. The thumb-zone argument is a phone argument; with a mouse, a bottom bar is further from the pointer than the chrome. Above 720px the three actions fold back into the chrome at full 44px size.

Option C

Demote MARK READ: it already lives at the foot

RationaleThe chrome's MARK READ is a duplicate of the foot pill. Remove the copy on phones and the 117px it was holding is exactly what the other three controls need to go generous. One row, 319px used of 390, 71px still spare, no clipped word, no new furniture.

What it costsOn a plated (cover) page the foot MARK READ sits in the flow, so marking a long page read means scrolling to the end of it. That is the one place the chrome copy earned its keep.

Mobileone row · 319 of 390px, 71px slack

Desktop1024px

The cheapest change of the three. No second row, no new fixed layer, no change to --sync-h. The only structural edit is display: none on #markReadBtn below 560px, plus promoting the existing floating foot pill from 30px to 44px so the demoted action is not also a fiddly one.

Desktop keeps all four in one row at full size; nothing is demoted where there is width for it. So the phone and the desktop really do differ in what they offer, which is the honest cost line above.