fix(#389): phone polish — tile fit, tab bar height, one view button, top bar alignment #525

Merged

Cordy merged 3 commits from fix-389f into main

2026-09-13 19:58:44 +00:00

Cordy commented

2026-09-13 19:58:22 +00:00

Owner

Four items from the real-phone pass (second screenshot):

Tiles overflowed the viewport — 1fr tracks respect the items' auto minimum, so a long space name pushed the second column off-screen. Now repeat(2, minmax(0,1fr)) + .tile{min-width:0} (fenced ≤480).
Tab bar taller than the mockup — buttons were 56px min-height plus vertical padding. Now fixed 54px with centred content (mockup: 62px incl. its 8px stand-in safe area); #app clearance and the More-sheet offset follow.
Search/bell/avatar packed left at phone width — the collapsed search removed the only flex:1 spacer in the top bar. The magnifier now carries margin-left:auto, restoring the mockup's right-aligned cluster (fenced ≤480).
List/grid switch is one button — the pressed (current) side of the segmented control hides, so the single visible button shows the view a press switches to, exactly as the mockup draws it (grid icon while in list view). Wiring untouched (aria-pressed + body[data-view] were already maintained). Applies to desktop too — requested explicitly, so a deliberate, minimal exception to the mobile-pass desktop invariant.

Fence gate green across all six style blocks; node --check green.

Four items from the real-phone pass (second screenshot): 1. **Tiles overflowed the viewport** — `1fr` tracks respect the items' auto minimum, so a long space name pushed the second column off-screen. Now `repeat(2, minmax(0,1fr))` + `.tile{min-width:0}` (fenced ≤480). 2. **Tab bar taller than the mockup** — buttons were 56px min-height plus vertical padding. Now fixed 54px with centred content (mockup: 62px incl. its 8px stand-in safe area); `#app` clearance and the More-sheet offset follow. 3. **Search/bell/avatar packed left** at phone width — the collapsed search removed the only `flex:1` spacer in the top bar. The magnifier now carries `margin-left:auto`, restoring the mockup's right-aligned cluster (fenced ≤480). 4. **List/grid switch is one button** — the pressed (current) side of the segmented control hides, so the single visible button shows the view a press switches to, exactly as the mockup draws it (grid icon while in list view). Wiring untouched (`aria-pressed` + `body[data-view]` were already maintained). **Applies to desktop too** — requested explicitly, so a deliberate, minimal exception to the mobile-pass desktop invariant. Fence gate green across all six style blocks; `node --check` green.

Cordy added 3 commits

2026-09-13 19:58:24 +00:00

scout: view-toggle wiring + viewtog css + search/top css 0d565ff75f

one-shot: #389 polish - tile fit, tab bar height, single view toggle, top bar alignment 7836ff0b0a

fix(#389 ): phone polish round - tile fit, tab bar height, one view button, top bar alignment

ci / test-and-build (pull_request) Successful in 50s

Details

96e0946501

From the first real-phone pass:

- Tiles overflowed the viewport: 1fr grid tracks respect the items'
  auto minimum, so a long space name pushed the second column
  off-screen. Columns are now repeat(2, minmax(0,1fr)) and .tile gets
  min-width:0, so the grid can never exceed the container.
- The tab bar was taller than the mockup (56px buttons plus vertical
  padding). Buttons are now a fixed 54px with centred content, and
  the content clearance and More-sheet offset follow.
- Search, bell and avatar packed left once the search field collapsed
  to an icon, because the flex:1 search row was the only spacer. The
  magnifier now carries margin-left:auto, restoring the mockup's
  right-aligned cluster.
- The list/grid switch is one button: the pressed (current) side of
  the segmented control hides, so the single visible button shows
  the view a press switches to, exactly as the mockup draws it.
  Applies to desktop too - requested explicitly, so this is a
  deliberate exception to the mobile-pass desktop invariant. The
  wiring (aria-pressed + body[data-view]) is untouched.

Cordy scheduled this pull request to auto merge when all checks succeed

2026-09-13 19:58:32 +00:00