← Back to PRs

#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout

by dbottme open 2026-02-05 06:37 View on GitHub →
app: web-ui stale
Fixes #9359 ## Problem The chat window in the Control UI intermittently goes blank/disappears when using Firefox-based browsers (tested with Zen browser). The content can be recovered by navigating away and back to Chat. ## Root Cause Firefox/Gecko has different handling of flexbox layouts, particularly: 1. `flex: 1 1 0` without explicit `0%` unit can cause layout calculation issues 2. Nested flex containers may collapse to zero height during reflow 3. Missing explicit height constraints cause unstable layout ## Solution Added cross-browser compatible CSS rules: - Use `flex-basis: 0%` instead of `0` for better Gecko compatibility - Add explicit `max-height: 100%` constraints - Add `contain: layout style` to prevent reflow cascades - Add `will-change: contents` for smoother GPU rendering ## Files Changed - `ui/src/styles/chat/layout.css` - Main chat card and thread layout - `ui/src/styles/chat/sidebar.css` - Split container layout - `ui/src/styles/layout.css` - Content area layout ## Testing - Verified chat renders correctly on Firefox-based browsers - Verified no visual regressions on Chromium browsers - Verified layout remains stable during extended usage <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts the chat UI’s flexbox CSS to be more stable in Firefox/Gecko by switching `flex: 1 1 0` to `flex: 1 1 0%`, adding explicit `min-height`/`max-height` constraints on key flex containers, and adding `contain` rules to reduce reflow/layout cascades. Changes are confined to the CSS used by the chat card/thread, chat split view/sidebar, and the chat content area container. <h3>Confidence Score: 4/5</h3> - This PR is likely safe to merge once the invalid `will-change` value is corrected or removed. - The change is small and limited to CSS layout rules, but it introduces a `will-change` declaration that isn’t reliably valid, meaning the intended Gecko stabilization may not apply as expected. - ui/src/styles/chat/layout.css <!-- greptile_other_comments_section --> <!-- /greptile_comment -->

Most Similar PRs