# 035 — Collapsible primary UI sections ## Summary `App.tsx` stacks the Log viewer (`LogTimeline` + `LogPreview`), Params ([034](034-params-declaration-ui.md)), `Metrics`, and `Dashboards` vertically with no way to collapse any of them. On a small screen — or just when only one section is being worked on — the others take up space and force scrolling. Make each section collapsible. ## Scope - Each of the four sections (Log viewer, Params, Metrics, Dashboards) gets a collapse/expand toggle in its header, next to its existing "?" help icon. - Collapsed state persists across reloads per-section, via `localStorage` (same pattern as `LogPreview`'s `VISIBLE_PARAM_COLUMNS_STORAGE_KEY` at `webapp/src/components/LogPreview.tsx:13`). - A collapsed section still shows its header (title + toggle), just not its body/content. - Collapsing a section must not tear down state that would be lost/reset on re-expand (e.g. `Dashboards`' in-progress panel edits, `Metrics`' declare form) — hide with CSS/conditional render at the container level, not by unmounting stateful subtrees. ## Acceptance criteria - Each section can be independently collapsed and re-expanded. - Reloading the page preserves each section's collapsed/expanded state. - Collapsing a section with unsaved in-progress input (e.g. a half-filled Metrics declare form) and re-expanding it preserves that input. ## Depends on - [034 — Params declaration UI](034-params-declaration-ui.md)