#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout
app: web-ui
stale
Cluster:
Web UI Enhancements and Fixes
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
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
79.9%
#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive ...
by vishaltandale00 · 2026-02-04
79.4%
#9411: Fix: Web UI long message overflow causing unreadable text
by vishaltandale00 · 2026-02-05
78.9%
#9122: fix(webchat): constrain .chat-new-messages to button size
by ridermw · 2026-02-04
78.8%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
78.1%
#11167: style(chat): UI: add mobile layout for chat compose actions
by junyiz · 2026-02-07
77.5%
#8342: Fix debug interface CSS layout issues
by Klopib · 2026-02-03
77.0%
#21940: style(layout): change content display to flex
by homfarnam · 2026-02-20
77.0%
#22333: Fix webchat inline image rendering and size handling
by AIflow-Labs · 2026-02-21
76.3%
#3721: fix(ui): webchat not displaying chat responses
by maxmaxrouge-rgb · 2026-01-29
75.6%