From cac6ade49ff272af3b3ff45527eae8483b069f9e Mon Sep 17 00:00:00 2001 From: Saatvik Arya Date: Tue, 23 Jun 2026 23:27:56 +0530 Subject: [PATCH] fix(react): bound ScrollArea content to the viewport width Radix's ScrollArea Viewport wraps children in a `display: table; min-width: 100%` div. A CSS table grows to its widest child's max-content, so a long, non-wrapping line escapes the viewport's `overflow-x: hidden` (horizontal scroll stays off unless a horizontal scrollbar is mounted) and gets clipped instead of wrapping or scrolling within. Force that wrapper back to a block so content is bounded by the viewport width and inner scrollers own their own horizontal overflow. Fixes the execution-history run-detail drawer, where a long code preview pushed the meta grid and code block off screen. --- packages/react/src/components/scroll-area.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/scroll-area.tsx b/packages/react/src/components/scroll-area.tsx index 0f5ad2b250..a41b7baa29 100644 --- a/packages/react/src/components/scroll-area.tsx +++ b/packages/react/src/components/scroll-area.tsx @@ -14,9 +14,17 @@ function ScrollArea({ className={cn("relative", className)} {...props} > + {/* Radix wraps the children in a `display: table; min-width: 100%` div. + A table grows to its widest child's max-content (e.g. a long, + non-wrapping code line), so it escapes the viewport's `overflow-x: + hidden` and clips content instead of letting it wrap or scroll within. + `[&>div]:!block` forces that wrapper back to a block bounded by the + viewport width, so the content fits and any inner scroller (CodeBlock) + owns its own horizontal overflow. Direct child (`>div`) only — a + descendant match would flatten the grid/flex layouts inside. */} {children}