Fit cascade lab

The Quotes lens as the window narrows, with both sidebars open: the tab bar condenses, then its icons move into the header, then the minimap goes, then Contents, then Tags; only then do the tabs wrap, and finally the quotes squeeze. The browser and the Mac app take different paths, because the browser has the tab bar and rails and the Mac has the projects column. Drag the window width. The thresholds in the table are measured from the tab bar this page draws, in the chosen language.

artefact: shipped CSS and shipped strings (panels' contents are stand-ins)commentary: not the product
window width1440px
surface
language
open
scheme
Commentary

The order. Things the reader did not choose go first, things they opened go last: the tab bar's spacing, then where its icons sit, then the minimap (drawn automatically, no switch of its own), then Contents, then Tags. The panel the reader has just opened stays exempt, as now (fitPanels's exempt). Today's order is Contents, Tags, minimap (SidebarStore.ts, decided 20 Sep 2026); this lab proposes moving the minimap to the front.

What the panels protect, by surface.

The two surfaces diverge only in their floor and in the native column. The cascade itself (which panel goes when) is one function, fitPanels, on both; the browser passes a wider floor. That keeps the logic the Mac relies on (the exemption, the auto-collapse handshake, the 700pt window minimum) intact.

One way only. The steps are one ordered list, and the page takes the shortest run of them that fits. A step therefore stays taken while any later one is in effect: closing Contents does not bring the icons back down into the tab bar, and folding the projects column does not bring the minimap back. A first version computed each step on its own, and the icons went up, down and up again as the window narrowed. fitPanels already works this way for the panels; the tab bar's two steps would join its list.

What breaks, and where

Not settled here

Strings

All shipped: nav.*, header.researchReport, quotes.sections, quotes.themes, quotes.groupBy.*, tags.tags. Project names, counts and tags are fixtures.