mirror of
https://github.com/coder/coder.git
synced 2026-10-31 11:02:50 +08:00
Ben PotterandMichael Suchacz
bb7f2f2332
On small viewports, the agent chat page showed the wrong panel. The right panel filled the screen and hid the chat. before: https://github.com/user-attachments/assets/fa3986b8-949a-4aad-8e98-d64316ade3f5 after: https://github.com/user-attachments/assets/bc56359d-2ffe-4f95-b47b-638261379da8 ## Changes - Below the `lg` breakpoint, the page shows one panel at a time. A right panel left open on a wide window used to hide the chat when the window narrowed. The page now shows the chat. - The panel preference is not changed by a resize. When the window widens, the panel comes back. When the user taps a tab while narrow, the panel opens as before. ## Tests - Unit tests for the new `useRightPanelNarrowSuppression` hook cover mount, both breakpoint crossings, and the explicit override. - A new mobile-viewport story asserts the chat is visible when a panel was left open. <details> <summary>Decision log</summary> - The right panel's open state persists in localStorage across all viewport sizes. `max-lg:hidden` on the chat made that stale state hide the chat on narrow windows. - The narrow suppression is transient state, not a write to the persisted preference. A temporary resize keeps the user's desktop layout intact. - The hook adjusts state during render (the React "adjusting state when a prop changes" pattern) instead of an effect, per FE8. - Verified all resize sequences live against a dev deployment: narrow with a panel open, widen to restore, drill in while narrow, and explicit close while narrow. </details> 🤖 This PR was created by [Coder Agents](https://coder.com/docs/ai-coder/agents) on behalf of @bpmct. --------- Co-authored-by: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>