Documentation examples are clipped horizontally, even in wide browser windows

[suxiaoshao]

Description

Some interactive component examples on gpui-kit.com are clipped horizontally inside the documentation embed. In particular, StatusBar loses content at both ends even in a wide desktop browser window. Increasing the browser width from 1440 to 1920 CSS pixels does not increase the embedded example's width.

Environment

• Site: https://gpui-kit.com, observed September 7, 2026
• Platform: macOS, Chromium-based browser; reproduced in the Codex in-app browser with device scale factor 2
• Viewports checked: 1440 × 1000, 1920 × 1000, and 1024 × 1000 CSS pixels
• Source inspected: commit 7f39c074856e68ce770cac68eab89a4dd90ff1a9. The exact deployed WASM revision was not verified.

Steps to Reproduce

1. Open https://gpui-kit.com/docs/components/status-bar/ at a desktop viewport width of 1440px.
2. Inspect the Editor, Application, and Alignment examples. The first/last icons and labels are clipped; for example, the beginning of “Center only → start-aligned” and the right-side labels are missing.
3. Increase the browser viewport width to 1920px. The iframe remains 748px wide and the clipping persists.
4. Click the example window's green zoom button. The expanded example shows the complete StatusBar content.

Screenshots

StatusBar — 1440 × 1000 CSS px: both ends of the embedded examples are clipped.

DescriptionList — 1024 × 1000 CSS px: labels on the left and values on the right extend beyond the embed.

Other affected examples

Page	Reproduction condition	Observed result
StatusBar	1440px and 1920px viewport	Both ends of all three example groups are clipped.
Dialog	1440px viewport; click Table Dialog	The dialog extends beyond the embed; the beginning of its title and its outer edges are clipped.
Focus Trap	1440px viewport; click Table Dialog	Same result; this page embeds the Dialog story.
DescriptionList	1024px viewport	Labels on the left and values on the right are clipped.
Calendar	1024px viewport; inspect Multiple months	The three-month layout extends beyond the visible example area.
Menu	1024px viewport; inspect Context Menu	The left/right edges of the outlined context-menu regions are clipped.
Tag	1024px viewport; inspect Colors	Tags at both ends of the rows are clipped.

The initial embedded view of all 68 component pages listed in the documentation navigation was inspected, followed by targeted checks of wider content. This is a list of confirmed cases, not an exhaustive check of every scrolled section, popup, or viewport. Intentional horizontally scrollable content is excluded from this list.

Relevant source and measurements

• The documentation main column has max-width: 860px and 3.5rem padding on each side (CSS). The measured iframe width is 748px at both 1440px and 1920px browser widths, and 636px at 1024px.
• StatusBar's three story sections set an internal width of px(760.) (story).
• The shared StorySection centers its content and applies overflow_x_hidden() (implementation). Its width modifiers apply to the inner content rather than the outer GroupBox, which also has padding.
• The Table Dialog explicitly requests px(800.) (story). DescriptionList uses 720px, and the affected Menu/Tag content uses 640px.

These constraints appear to explain why wider browser windows do not resolve StatusBar's clipping, and why additional examples become clipped in a narrower desktop window.

Expected

The embedded examples should keep their demonstrated content accessible, including the beginning and end of labels and dialog controls.

Actual

Parts of the examples are hidden beyond the embed or an inner clipping container. Enlarging the browser window does not resolve the capped-width cases. The StatusBar example's own zoom control does reveal the complete content.