#6812: fix(ui): make topbar height flexible to avoid header/title overlap

### Summary Fixes an issue where the Channels page title/header could be partially hidden/overlapped under the topbar, especially on smaller-height viewports. ### Root cause The shell layout used a fixed topbar row height + fixed topbar height, which could force the content area to compress and visually overlap/clamp the content header. ### Changes - Make the shell’s topbar row height flexible (grid-template-rows: auto 1fr). - Use min-height for .topbar instead of a hard height so it can grow when needed. - Prevent .content-header from shrinking (flex-shrink: 0). - Add small-height viewport adjustments (@media (max-height: 720px)) to keep header spacing and typography readable. ### Screenshots (Before / After) | Before (issue) | After (fix) | |---|---| |  |  | **Repro environment:** macOS, Chrome 144, viewport ~1480×950 (or smaller-height windows). ### Testing - npm run ui:dev - Verify /channels header/title is fully visible (incl. small-height window). - Quick sanity on /instances and other tabs (no regressions for all flows). <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts the UI shell layout to prevent page headers/titles from being overlapped by the topbar on short viewports. It makes the shell’s topbar grid row flexible (`grid-template-rows: auto 1fr`), allows the topbar to grow via `min-height` instead of a fixed height, prevents the `.content-header` flex item from shrinking, and adds a `@media (max-height: 720px)` block to reduce content padding and title/subtitle sizing on short screens. These changes live in `ui/src/styles/layout.css` and affect the shared shell/topbar/content layout used across pages (e.g., Channels, Instances), so they should improve overall layout robustness on small-height windows without requiring component-level changes. <h3>Confidence Score: 5/5</h3> - This PR is safe to merge with minimal risk. - The change is limited to CSS layout adjustments in a single stylesheet, uses standard grid/flex properties, and is targeted at fixing header overlap on short viewports. No functional logic changes or risky side effects were found in the diff. - No files require special attention <!-- greptile_other_comments_section --> _{(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!} <!-- /greptile_comment -->