[BUG] Preview panel embedded browser viewport doesn't resize correctly — stuck at narrow width until dropdown menu triggers reflow

Resolved 💬 2 comments Opened Feb 24, 2026 by wasintoh Closed Mar 24, 2026

Preflight Checklist

  • [x] I have searched existing issues and this hasn't been reported yet
  • [x] This is a single bug report (please file separate reports for different bugs)
  • [x] I am using the latest version of Claude Code

What's Wrong?

The Preview panel's embedded browser renders the webapp at an incorrect (too narrow) viewport width. The right portion of the page content is clipped/cut off.

However, when I open the Preview dropdown menu (the "⋮" menu showing "Persist sessions", "Edit config in VS Code", "Stop all sessions"), the viewport suddenly snaps to the correct width and the page renders properly. As soon as I close the dropdown, the viewport reverts to the narrow/broken state.

This makes it impossible to visually verify webapp layouts in the Preview panel without keeping the dropdown open.

What Should Happen?

The Preview panel's embedded browser should render the webapp at the full available width of the panel, and maintain the correct viewport size at all times — not only when a dropdown menu is open.

Error Messages/Logs

No console errors. The webapp itself (Next.js) returns HTTP 200 on all routes. 
This appears to be a layout/reflow issue in the Desktop app's Preview panel, not in the webapp.

Steps to Reproduce

  1. Open Claude Desktop → Code tab
  2. Start a session with a Next.js project that has a sidebar layout (e.g., a dashboard with sidebar navigation)
  3. Let Claude start the dev server (or start it manually via Preview dropdown)
  4. Observe: the Preview panel renders the webapp at an incorrect narrow viewport — right side of the content is clipped
  5. Click the "⋮" menu button at the top of the Preview panel
  6. Observe: while the dropdown is open, the webapp viewport snaps to the correct full width
  7. Close the dropdown menu
  8. Observe: the viewport immediately reverts to the narrow/broken width

This is 100% reproducible on every page load.

Claude Model

Opus

Is this a regression?

I don't know

Last Working Version

_No response_

Claude Code Version

Claude 1.1.4010 (da63f3) 2026-02-22T18:53:52.000Z

Platform

Anthropic API

Operating System

macOS

Terminal/Shell

Terminal.app (macOS)

Additional Information

Screenshots attached showing the issue:

  1. Normal state — viewport is too narrow, right side of dashboard cards are clipped
  2. Dropdown menu open — viewport correctly shows full-width content
  3. Dropdown menu closed — reverts to narrow broken state

Environment:

  • macOS (latest)
  • Claude Desktop with Code tab
  • Next.js webapp running on port 3000
  • The webapp has a sidebar layout with dashboard cards

The embedded browser seems to not calculate its available width correctly on initial render and after layout changes. Opening the dropdown menu appears to trigger a reflow/resize event that temporarily fixes the issue.

<img width="1840" height="1145" alt="Image" src="https://github.com/user-attachments/assets/8e2e36a0-e8c0-4d9d-983c-40bba243adcd" />

<img width="1840" height="1145" alt="Image" src="https://github.com/user-attachments/assets/212c50ae-9fc6-4276-bef6-c4fed5185c5e" />

View original on GitHub ↗

This issue has 2 comments on GitHub. Read the full discussion on GitHub ↗