#21940: style(layout): change content display to flex

## Summary - Problem: The main content area was not consistently using a vertical flex flow, which caused spacing and height behavior to break across states/layouts. - Why it matters: Users could see uneven gaps, compressed content, or incorrect vertical distribution in the primary UI region. - What changed: Updated the content container to `display: flex` with `flex-direction: column`, and adjusted spacing/height rules so child sections stack predictably and fill available vertical space correctly. - What did NOT change (scope boundary): No routing, data, API, command execution, or backend behavior changes; this is layout-only styling work. ## Change Type (select all) - [x] Bug fix - [ ] Feature - [x] Refactor - [ ] Docs - [ ] Security hardening - [ ] Chore/infra ## Scope (select all touched areas) - [ ] Gateway / orchestration - [ ] Skills / tool execution - [ ] Auth / tokens - [ ] Memory / storage - [ ] Integrations - [ ] API / contracts - [x] UI / DX - [ ] CI/CD / infra ## Linked Issue/PR - Closes #N/A - Related #N/A ## User-visible / Behavior Changes - Content sections in the main area now stack in a stable vertical flow. - Vertical spacing between content blocks is consistent. - Content area height usage is more predictable (better fill/overflow behavior within viewport constraints). ## Security Impact (required) - New permissions/capabilities? (`No`) - Secrets/tokens handling changed? (`No`) - New/changed network calls? (`No`) - Command/tool execution surface changed? (`No`) - Data access scope changed? (`No`) - If any `Yes`, explain risk + mitigation: `N/A` ## Repro + Verification ### Environment - OS: macOS - Runtime/container: Local dev UI - Model/provider: N/A - Integration/channel (if any): Web UI - Relevant config (redacted): Default local config ### Steps 1. Open the UI screen containing the main content panel. 2. Trigger layouts that previously showed spacing/height inconsistency (normal/focus/onboarding/chat if applicable). 3. Compare content stacking, spacing, and vertical fill behavior. ### Expected - Content area uses vertical flex layout with consistent spacing and stable height distribution. ### Actual - Matches expected after the change; no collapsed or uneven spacing observed in tested states. ## Evidence Attach at least one: - [ ] Failing test/log before + passing after - [ ] Trace/log snippets - [x] Screenshot/recording - [ ] Perf numbers (if relevant) ## Human Verification (required) - Verified scenarios: Main content rendering in standard and alternate shell/content states; spacing between child blocks; vertical fill behavior. - Edge cases checked: Viewport resizing and sections with varying content lengths. - What you did **not** verify: No automated visual regression tests were added/run for this CSS-only change. ## Compatibility / Migration - Backward compatible? (`Yes`) - Config/env changes? (`No`) - Migration needed? (`No`) - If yes, exact upgrade steps: `N/A` ## Failure Recovery (if this breaks) - How to disable/revert this change quickly: Revert the content container flex/spacing rules in the layout stylesheet commit. - Files/config to restore: `ui/src/styles/layout.css` - Known bad symptoms reviewers should watch for: Content overlap, uneven vertical gaps, bottom sections not anchoring correctly, unexpected scroll behavior. ## Risks and Mitigations - Risk: Flex height/overflow interaction could regress in narrow/mobile viewports. - Mitigation: Manual responsive checks across breakpoints and shell modes; verify no clipping or double-scroll containers. <img width="1221" height="133" alt="Screenshot 2026-02-20 at 16 14 54" src="https://github.com/user-attachments/assets/1dc9a001-8c9f-4aa1-a8f6-ed784e5c94ff" /> <img width="1220" height="163" alt="Screenshot 2026-02-20 at 16 13 41" src="https://github.com/user-attachments/assets/0cdf10cb-16b1-4601-a455-32111dab1f13" /> <!-- greptile_comment --> <h3>Greptile Summary</h3> Changed `.content` from `display: block` to `display: flex` with `flex-direction: column`, `justify-content: space-between`, and `height: 100%` to create consistent vertical flex flow in the main content area. **Key changes:** - Converted content container from block to flex column layout - Added `justify-content: space-between` to distribute content vertically - Set explicit `height: 100%` for predictable height behavior - Maintains existing overflow and spacing rules **Consideration:** - The `justify-content: space-between` property will push the first and last child elements to opposite ends of the container. Verify this behavior is intentional for all content views (overview, agents, sessions, etc.), especially when there's only a single child element or varying content lengths. <h3>Confidence Score: 4/5</h3> - This PR is safe to merge with low risk - it's a focused CSS layout change - Score reflects a straightforward CSS-only change with good documentation and testing. The `justify-content: space-between` property may need verification across different content states, but the risk is minimal since it only affects layout styling without touching logic or data flow - No files require special attention - this is a single CSS file with focused layout changes _{Last reviewed commit: 24af8dd} <!-- greptile_other_comments_section --> _{(2/5) Greptile learns from your feedback when you react with thumbs up/down!} <!-- /greptile_comment -->