fix(#389): hide the sidebar unconditionally below 820px

Cordy commented

2026-09-13 19:37:28 +00:00

Owner

First real-phone screenshot (files-bao, iPhone) showed the sidebar back as an icon rail eating half the viewport, with the main column squeezed: stacked toolbar, single-column tiles. The tab bar, collapsed search and top bar all behaved correctly.

Root cause (from the one-shot's diagnostics): the 820px hide at rd-style line 676 (@media(max-width:820px){… #app > aside{display:none}}) is immediately followed at line 677 by a top-level #app > aside{position:sticky; …} rule of equal specificity that re-establishes the aside's display later in the cascade — so the sidebar was never actually hidden on phones; the old @media (max-width: 700px){ aside{width:52px} aside .navlbl{display:none} } rule then shrank it into the icon rail. The #389 recon read the 820 rule and concluded the sidebar was gone below 820px; real phones disagreed.

Fix: inside the existing ≤819px fence, #app > aside{display:none !important} and #app{grid-template-columns:1fr !important} — the tab bar is the sidebar's replacement there, unconditionally. Desktop ≥820px untouched (fence gate re-verified).

First real-phone screenshot (files-bao, iPhone) showed the sidebar back as an icon rail eating half the viewport, with the main column squeezed: stacked toolbar, single-column tiles. The tab bar, collapsed search and top bar all behaved correctly. **Root cause (from the one-shot's diagnostics):** the 820px hide at rd-style line 676 (`@media(max-width:820px){… #app > aside{display:none}}`) is immediately followed at line 677 by a top-level `#app > aside{position:sticky; …}` rule of equal specificity that re-establishes the aside's display later in the cascade — so the sidebar was never actually hidden on phones; the old `@media (max-width: 700px){ aside{width:52px} aside .navlbl{display:none} }` rule then shrank it into the icon rail. The #389 recon read the 820 rule and concluded the sidebar was gone below 820px; real phones disagreed. **Fix:** inside the existing ≤819px fence, `#app > aside{display:none !important}` and `#app{grid-template-columns:1fr !important}` — the tab bar is the sidebar's replacement there, unconditionally. Desktop ≥820px untouched (fence gate re-verified).

Cordy added 2 commits

2026-09-13 19:37:29 +00:00

one-shot: #389 fix - old icons-rail rule re-shows the sidebar on phones aba3f21597

fix(#389 ): hide the sidebar unconditionally below 820px

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

Details

37a1aea53c

First real-phone screenshot showed the sidebar back as an icon rail
eating half the viewport, with the main column squeezed (stacked
toolbar, single-column tiles). Root cause: an old <=700px icons-rail
rule re-shows the aside underneath the 820px display:none the mobile
pass was built on - so 701-819px behaved as designed while actual
phones did not. The tab bar is the sidebar's replacement below
820px, so the aside is now hidden there unconditionally and the app
grid pinned to one column, both inside the existing media fence.

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

2026-09-13 19:37:35 +00:00

Cordy merged commit c20597954e into main

2026-09-13 19:38:30 +00:00

Cordy deleted branch fix-389e

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

Cordy referenced this pull request from a commit

2026-09-13 19:38:33 +00:00

Merge pull request 'fix(#389): hide the sidebar unconditionally below 820px' (#524) from fix-389e into main

Rows
Columns

fix(#389): hide the sidebar unconditionally below 820px #524