VS Code extension: right-side progress/details panel causes horizontal scrolling and clips chat content

Open 💬 1 comment Opened May 12, 2026 by victorlitvinenko

What version of the IDE extension are you using?

26.506.31421

What subscription do you have?

Pro

Which IDE are you using?

VS Code

What platform is your computer?

Microsoft Windows NT 10.0.26200.0 x64 WSL2

What issue are you seeing?

There is a layout issue in the VS Code Codex extension chat UI.

Environment:

  • Windows 11
  • WSL2 environment
  • VS Code Codex extension

The right-side progress/details card currently expands the total message width, which causes horizontal scrolling inside the chat panel. As a result, when scrolling horizontally to see the progress card, the left side of the chat content becomes clipped.

The expected behavior would be:

  • The chat content and the right-side progress/details card should be placed inside a shared container with width: 100%.
  • The progress/details card should keep its natural/fixed width on the right.
  • The main chat/message area should automatically occupy the remaining available width on the left (flex: 1, min-width: 0).
  • The overall container itself should never exceed the viewport width of the chat panel.
  • On narrow layouts/small panel widths, the right-side progress/details card should be hidden entirely instead of forcing horizontal scrolling.

This would make it possible to comfortably view both the chat conversation and the task progress/details panel simultaneously without horizontal scrolling.

The current behavior feels like the right-side card is increasing the intrinsic width of the entire message container instead of participating in a responsive flex/grid layout.

<img width="1621" height="1320" alt="Image" src="https://github.com/user-attachments/assets/8b664e1d-3940-4116-97aa-63e310511c2c" />

What steps can reproduce the bug?

  1. Open VS Code on Windows 11 with WSL2 enabled.
  2. Open the Codex extension chat panel.
  3. Start a task that produces a right-side progress/details card (for example a multi-step coding or planning task).
  4. Observe that the right-side progress/details card is not visible by default because it is rendered outside the visible chat area width.
  5. Notice that the chat panel becomes horizontally scrollable.
  6. Scroll horizontally to the right to reveal the progress/details card.
  7. Notice that the left side of the chat content becomes clipped/off-screen instead of the layout adapting to the available width.

What is the expected behavior?

The chat content and the right-side progress/details card should share a responsive container with a maximum width of 100% of the chat panel.

The right-side card should keep its fixed/natural width, while the main chat area should automatically occupy the remaining available space (flex: 1, min-width: 0) without causing horizontal scrolling.

The overall layout should never exceed the viewport width of the chat panel.

On smaller panel widths, the right-side progress/details card should be hidden instead of forcing horizontal scrolling or clipping the chat content.

Additional information

_No response_

View original on GitHub ↗

This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗