From 1f6b7a3c350a9efe693208d65d6b2ff877dd5a48 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:08:40 +0800
Subject: [PATCH] docs(dify-ui): document scroll area content width (#37376)

---
 .../dify-ui/src/scroll-area/index.stories.tsx | 48 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/packages/dify-ui/src/scroll-area/index.stories.tsx b/packages/dify-ui/src/scroll-area/index.stories.tsx
index bd3a1cef162..28c00bea2a7 100644
--- a/packages/dify-ui/src/scroll-area/index.stories.tsx
+++ b/packages/dify-ui/src/scroll-area/index.stories.tsx
@@ -17,7 +17,7 @@ const meta = {
     layout: 'padded',
     docs: {
       description: {
-        component: 'Compound scroll container built on Base UI Scroll Area. The examples mirror the upstream anatomy and focus patterns while applying Dify UI tokens, panel surfaces, and scrollbar spacing.',
+        component: 'Compound scroll container built on Base UI Scroll Area. The examples mirror the upstream anatomy and focus patterns while applying Dify UI tokens, panel surfaces, and scrollbar spacing. Base UI ScrollArea.Content defaults to min-width: fit-content, so vertical-only regions that should truncate long content must set min-width: 0 on the content slot.',
       },
     },
   },
@@ -70,6 +70,19 @@ const articleParagraphs = [
   'A scroll area follows the same principle in an interface. The viewport owns scrolling, the content stays inside its measured width, and the scrollbar remains a visual affordance rather than a second layout system.',
 ] as const
 
+const fileRows = [
+  'agent-roster-skill-detail-dialog-preview-image.png',
+  'workflow-agent-binding-source-of-truth-summary.md',
+  'very-long-file-name-that-should-truncate-inside-a-vertical-scroll-area-without-creating-horizontal-scroll.json',
+  'runtime-output-schema.ts',
+  'knowledge-retrieval-notes.md',
+  'composer-draft-original-state-diffing-notes.md',
+  'generated-contract-console-query-options.ts',
+  'agent-v2-workflow-node-config-schema.json',
+  'selected-file-highlight-behavior.spec.tsx',
+  'scroll-area-content-min-width-regression.md',
+] as const
+
 const gridCells = Array.from({ length: 100 }, (_, index) => index + 1)
 
 function StorySection({
@@ -176,6 +189,39 @@ export const Vertical: Story = {
   ),
 }
 
+export const VerticalTruncation: Story = {
+  render: () => (
+    <StorySection
+      eyebrow="Vertical"
+      title="Constrained content width"
+      description="Use width constraints plus minWidth: 0 on ScrollArea.Content when a vertical-only list should keep vertical scrolling while truncating long labels instead of creating horizontal scroll."
+    >
+      <div className={cn(panelClassName, 'h-48 w-full max-w-80')}>
+        <ScrollAreaRoot className={cn(rootClassName, 'h-full p-1')}>
+          <ScrollAreaViewport aria-label="Vertical file list" role="region" className={viewportClassName}>
+            <VerticalContent className="flex flex-col gap-0.5 p-2">
+              {fileRows.map(file => (
+                <div
+                  key={file}
+                  className="flex h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-text-secondary hover:bg-state-base-hover"
+                >
+                  <span aria-hidden className="i-ri-file-text-line size-4 shrink-0" />
+                  <span className="min-w-0 truncate system-sm-regular" title={file}>
+                    {file}
+                  </span>
+                </div>
+              ))}
+            </VerticalContent>
+          </ScrollAreaViewport>
+          <ScrollAreaScrollbar className={scrollbarClassName}>
+            <ScrollAreaThumb />
+          </ScrollAreaScrollbar>
+        </ScrollAreaRoot>
+      </div>
+    </StorySection>
+  ),
+}
+
 export const ScrollFade: Story = {
   render: () => (
     <StorySection