diff --git a/packages/dify-ui/src/scroll-area/index.stories.tsx b/packages/dify-ui/src/scroll-area/index.stories.tsx
index fa32ae048ca..84a0b6f4307 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. 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.',
+        component: 'Compound scroll container built on Base UI Scroll Area. The examples mirror the upstream anatomy and focus patterns while applying Dify UI tokens and surface treatments. 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.',
       },
     },
   },
@@ -27,27 +27,7 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const scrollFadeRootClassName = cn(
-  'has-[>_:first-child:focus-visible]:outline-2',
-  'has-[>_:first-child:focus-visible]:outline-offset-0',
-  'has-[>_:first-child:focus-visible]:outline-state-accent-solid',
-)
-const rootClassName = 'relative min-h-0 min-w-0'
-const viewportClassName = 'h-full max-h-full max-w-full rounded-xl border border-divider-subtle bg-components-panel-bg'
-const fadeViewportClassName = cn(
-  'h-full max-h-full max-w-full rounded-xl bg-components-panel-bg outline-none focus-visible:outline-none',
-  'mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
-)
-const scrollbarClassName = cn(
-  'data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1',
-  'data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1',
-)
-const verticalContentClassName = 'w-full max-w-full min-w-0'
 const verticalContentStyle = { minWidth: 0 } satisfies React.CSSProperties
-const panelClassName = 'min-w-0 rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'
-const pageClassName = 'min-w-0 rounded-[28px] border border-divider-subtle bg-background-body p-5'
-const labelClassName = 'system-xs-medium-uppercase text-text-tertiary'
-const headingClassName = 'system-md-semibold text-text-primary'
 
 const appRows = [
   { name: 'Invoice Copilot', meta: 'Pinned', icon: 'i-ri-file-list-3-line', selected: true, pinned: true },
@@ -99,10 +79,10 @@ function StorySection({
   className?: string
 }) {
   return (
-    <section className={cn(pageClassName, className)}>
+    <section className={cn('min-w-0 rounded-[28px] border border-divider-subtle bg-background-body p-5', className)}>
       <div className="space-y-1">
-        <div className={labelClassName}>{eyebrow}</div>
-        <h3 className={headingClassName}>{title}</h3>
+        <div className="system-xs-medium-uppercase text-text-tertiary">{eyebrow}</div>
+        <h3 className="system-md-semibold text-text-primary">{title}</h3>
         <p className="max-w-[72ch] text-pretty system-sm-regular text-text-secondary">{description}</p>
       </div>
       <div className="mt-5 flex justify-center">
@@ -122,7 +102,7 @@ function VerticalContent({
   return (
     <ScrollAreaContent
       style={verticalContentStyle}
-      className={cn(verticalContentClassName, className)}
+      className={cn('w-full max-w-full min-w-0', className)}
     >
       {children}
     </ScrollAreaContent>
@@ -136,22 +116,20 @@ export const Anatomy: Story = {
       title="Base UI compound parts"
       description="The baseline story mirrors the official Scroll Area anatomy: Root, Viewport, Content, Scrollbar, and Thumb, with keyboard focus drawn by the viewport."
     >
-      <div className={cn(panelClassName, 'h-75 w-full max-w-105')}>
-        <ScrollAreaRoot className={cn(rootClassName, 'h-full p-1')}>
-          <ScrollAreaViewport aria-label="Scrollable anatomy example" role="region" className={viewportClassName}>
-            <VerticalContent className="flex flex-col gap-4 py-2 pl-3 pr-5 text-text-secondary system-sm-regular leading-6">
-              {articleParagraphs.map(paragraph => (
-                <p key={paragraph}>
-                  {paragraph}
-                </p>
-              ))}
-            </VerticalContent>
-          </ScrollAreaViewport>
-          <ScrollAreaScrollbar className={scrollbarClassName}>
-            <ScrollAreaThumb />
-          </ScrollAreaScrollbar>
-        </ScrollAreaRoot>
-      </div>
+      <ScrollAreaRoot className="relative h-75 w-full max-w-105 min-w-0">
+        <ScrollAreaViewport aria-label="Scrollable anatomy example" role="region" className="h-full max-h-full max-w-full rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg">
+          <VerticalContent className="flex flex-col gap-4 py-2 pl-3 pr-5 text-text-secondary system-sm-regular leading-6">
+            {articleParagraphs.map(paragraph => (
+              <p key={paragraph}>
+                {paragraph}
+              </p>
+            ))}
+          </VerticalContent>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar>
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      </ScrollAreaRoot>
     </StorySection>
   ),
 }
@@ -163,28 +141,26 @@ export const Vertical: Story = {
       title="Long form content"
       description="Vertical overflow keeps the official viewport focus pattern while constraining content width so text never leaks outside the frame."
     >
-      <div className={cn(panelClassName, 'h-90 w-full max-w-130')}>
-        <ScrollAreaRoot className={cn(rootClassName, 'h-full p-1')}>
-          <ScrollAreaViewport aria-label="Long form content" role="region" className={viewportClassName}>
-            <VerticalContent className="flex flex-col gap-4 p-4 pr-6 text-text-secondary system-sm-regular leading-6">
-              <div className="space-y-1">
-                <div className={labelClassName}>Article</div>
-                <div className={headingClassName}>Scrollable text region</div>
-              </div>
-              {Array.from({ length: 4 }, (_, groupIndex) => (
-                articleParagraphs.map(paragraph => (
-                  <p key={`${groupIndex}-${paragraph}`}>
-                    {paragraph}
-                  </p>
-                ))
-              ))}
-            </VerticalContent>
-          </ScrollAreaViewport>
-          <ScrollAreaScrollbar className={scrollbarClassName}>
-            <ScrollAreaThumb />
-          </ScrollAreaScrollbar>
-        </ScrollAreaRoot>
-      </div>
+      <ScrollAreaRoot className="relative h-90 w-full max-w-130 min-w-0">
+        <ScrollAreaViewport aria-label="Long form content" role="region" className="h-full max-h-full max-w-full rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg">
+          <VerticalContent className="flex flex-col gap-4 p-4 pr-6 text-text-secondary system-sm-regular leading-6">
+            <div className="space-y-1">
+              <div className="system-xs-medium-uppercase text-text-tertiary">Article</div>
+              <div className="system-md-semibold text-text-primary">Scrollable text region</div>
+            </div>
+            {Array.from({ length: 4 }, (_, groupIndex) => (
+              articleParagraphs.map(paragraph => (
+                <p key={`${groupIndex}-${paragraph}`}>
+                  {paragraph}
+                </p>
+              ))
+            ))}
+          </VerticalContent>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar>
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      </ScrollAreaRoot>
     </StorySection>
   ),
 }
@@ -196,28 +172,26 @@ export const VerticalTruncation: Story = {
       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>
+      <ScrollAreaRoot className="relative h-48 w-full max-w-80 min-w-0">
+        <ScrollAreaViewport aria-label="Vertical file list" role="region" className="h-full max-h-full max-w-full rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg">
+          <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>
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      </ScrollAreaRoot>
     </StorySection>
   ),
 }
@@ -229,24 +203,33 @@ export const ScrollFade: Story = {
       title="Viewport mask with root focus"
       description="This mirrors the Base UI scroll-fade example: the viewport owns the mask and the root owns the focus outline so the indicator is never clipped."
     >
-      <div className={cn(panelClassName, 'h-90 w-full max-w-130')}>
-        <ScrollAreaRoot className={cn(rootClassName, scrollFadeRootClassName, 'h-full p-1')}>
-          <ScrollAreaViewport aria-label="Scroll fade article" role="region" className={fadeViewportClassName}>
-            <VerticalContent className="flex flex-col gap-4 px-4 py-3 pr-6 text-text-secondary system-sm-regular leading-6">
-              {Array.from({ length: 5 }, (_, groupIndex) => (
-                articleParagraphs.map(paragraph => (
-                  <p key={`${groupIndex}-${paragraph}`}>
-                    {paragraph}
-                  </p>
-                ))
-              ))}
-            </VerticalContent>
-          </ScrollAreaViewport>
-          <ScrollAreaScrollbar className={scrollbarClassName}>
-            <ScrollAreaThumb />
-          </ScrollAreaScrollbar>
-        </ScrollAreaRoot>
-      </div>
+      <ScrollAreaRoot className={cn(
+        'relative h-90 w-full max-w-130 min-w-0',
+        'has-[>_:first-child:focus-visible]:outline-2 has-[>_:first-child:focus-visible]:outline-offset-0 has-[>_:first-child:focus-visible]:outline-state-accent-solid',
+      )}
+      >
+        <ScrollAreaViewport
+          aria-label="Scroll fade article"
+          role="region"
+          className={cn(
+            'h-full max-h-full max-w-full rounded-xl bg-components-panel-bg outline-none focus-visible:outline-none',
+            'mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
+          )}
+        >
+          <VerticalContent className="flex flex-col gap-4 px-4 py-3 pr-6 text-text-secondary system-sm-regular leading-6">
+            {Array.from({ length: 5 }, (_, groupIndex) => (
+              articleParagraphs.map(paragraph => (
+                <p key={`${groupIndex}-${paragraph}`}>
+                  {paragraph}
+                </p>
+              ))
+            ))}
+          </VerticalContent>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar className="opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100 data-scrolling:duration-0">
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      </ScrollAreaRoot>
     </StorySection>
   ),
 }
@@ -259,24 +242,22 @@ export const Horizontal: Story = {
       description="Horizontal overflow keeps Base UI's content sizing behavior and uses the same viewport focus treatment on the scrollable element."
       className="mx-auto max-w-190"
     >
-      <div className={cn(panelClassName, 'h-46 w-full max-w-130')}>
-        <ScrollAreaRoot className={cn(rootClassName, 'h-full p-1')}>
-          <ScrollAreaViewport aria-label="Horizontal numbered row" role="region" className={viewportClassName}>
-            <ScrollAreaContent className="min-h-full min-w-max p-4 pb-6">
-              <div className="grid grid-cols-[repeat(18,6.25rem)] gap-3">
-                {gridCells.slice(0, 18).map(cell => (
-                  <div key={cell} className="flex h-24 items-center justify-center rounded-xl border border-divider-subtle bg-components-panel-bg-alt tabular-nums system-md-semibold text-text-secondary">
-                    {cell}
-                  </div>
-                ))}
-              </div>
-            </ScrollAreaContent>
-          </ScrollAreaViewport>
-          <ScrollAreaScrollbar orientation="horizontal" className={scrollbarClassName}>
-            <ScrollAreaThumb />
-          </ScrollAreaScrollbar>
-        </ScrollAreaRoot>
-      </div>
+      <ScrollAreaRoot className="relative h-46 w-full max-w-130 min-w-0">
+        <ScrollAreaViewport aria-label="Horizontal numbered row" role="region" className="h-full max-h-full max-w-full rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg">
+          <ScrollAreaContent className="min-h-full min-w-max p-4 pb-6">
+            <div className="grid grid-cols-[repeat(18,6.25rem)] gap-3">
+              {gridCells.slice(0, 18).map(cell => (
+                <div key={cell} className="flex h-24 items-center justify-center rounded-xl border border-divider-subtle bg-components-panel-bg-alt tabular-nums system-md-semibold text-text-secondary">
+                  {cell}
+                </div>
+              ))}
+            </div>
+          </ScrollAreaContent>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar orientation="horizontal">
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      </ScrollAreaRoot>
     </StorySection>
   ),
 }
@@ -288,28 +269,26 @@ export const BothAxes: Story = {
       title="Numbered grid"
       description="This follows the official two-axis example: both scrollbars are rendered and Corner reserves the intersection."
     >
-      <div className={cn(panelClassName, 'h-85 w-full max-w-140')}>
-        <ScrollAreaRoot className={cn(rootClassName, 'h-full p-1')}>
-          <ScrollAreaViewport aria-label="Numbered grid" role="region" className={viewportClassName}>
-            <ScrollAreaContent className="pt-3 pr-6 pb-6 pl-3">
-              <div className="grid grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3">
-                {gridCells.map(cell => (
-                  <div key={cell} className="flex items-center justify-center rounded-lg border border-divider-subtle bg-components-panel-bg-alt tabular-nums system-md-semibold text-text-secondary">
-                    {cell}
-                  </div>
-                ))}
-              </div>
-            </ScrollAreaContent>
-          </ScrollAreaViewport>
-          <ScrollAreaScrollbar className={scrollbarClassName}>
-            <ScrollAreaThumb />
-          </ScrollAreaScrollbar>
-          <ScrollAreaScrollbar orientation="horizontal" className={scrollbarClassName}>
-            <ScrollAreaThumb />
-          </ScrollAreaScrollbar>
-          <ScrollAreaCorner />
-        </ScrollAreaRoot>
-      </div>
+      <ScrollAreaRoot className="relative h-85 w-full max-w-140 min-w-0">
+        <ScrollAreaViewport aria-label="Numbered grid" role="region" className="h-full max-h-full max-w-full rounded-xl border-[0.5px] border-divider-subtle bg-components-panel-bg">
+          <ScrollAreaContent className="pt-3 pr-6 pb-6 pl-3">
+            <div className="grid grid-cols-[repeat(10,6.25rem)] grid-rows-[repeat(10,6.25rem)] gap-3">
+              {gridCells.map(cell => (
+                <div key={cell} className="flex items-center justify-center rounded-lg border border-divider-subtle bg-components-panel-bg-alt tabular-nums system-md-semibold text-text-secondary">
+                  {cell}
+                </div>
+              ))}
+            </div>
+          </ScrollAreaContent>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar>
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+        <ScrollAreaScrollbar orientation="horizontal">
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+        <ScrollAreaCorner />
+      </ScrollAreaRoot>
     </StorySection>
   ),
 }
@@ -324,54 +303,50 @@ export const AppSidebar: Story = {
         title="Main navigation list"
         description="A Dify-like sidebar keeps business UI outside the primitive while preserving the same Root, Viewport, Content, Scrollbar anatomy."
       >
-        <div className="w-full max-w-70 rounded-2xl border border-divider-subtle bg-background-body p-3 shadow-lg shadow-shadow-shadow-5">
-          <div className="rounded-xl bg-background-default-subtle p-3">
-            <div className="mb-4 flex h-8 items-center gap-2 rounded-lg bg-state-base-active px-2 text-text-accent">
-              <span className="i-ri-apps-fill size-4 shrink-0" aria-hidden />
-              <span className="min-w-0 truncate system-sm-semibold">Explore</span>
-            </div>
-            <div className="mb-1.5 flex items-center justify-between px-2">
-              <span className={labelClassName}>Web apps</span>
-              <span className="system-xs-medium text-text-quaternary">{appRows.length}</span>
-            </div>
-            <div className="h-76 min-h-0">
-              <ScrollAreaRoot className={cn(rootClassName, 'h-full')}>
-                <ScrollAreaViewport aria-label="Web apps" role="region" className="h-full max-h-full max-w-full rounded-lg bg-transparent">
-                  <VerticalContent className="space-y-0.5">
-                    {appRows.map((row, index) => (
-                      <div key={row.name} className="space-y-0.5">
-                        <button
-                          type="button"
-                          className={cn(
-                            'flex h-8 w-full min-w-0 items-center justify-between gap-2 rounded-lg px-2 text-left transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-solid focus-visible:outline-state-accent-solid',
-                            row.selected
-                              ? 'bg-state-base-active text-components-menu-item-text-active'
-                              : 'text-components-menu-item-text hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
-                          )}
-                        >
-                          <span className="flex min-w-0 items-center gap-2">
-                            <span className="flex size-5 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-components-avatar-shape-fill-stop-100">
-                              <span aria-hidden className={cn(row.icon, 'size-3.5')} />
-                            </span>
-                            <span className="min-w-0 truncate system-sm-regular">{row.name}</span>
-                          </span>
-                          <span className="shrink-0 rounded-md border border-divider-subtle bg-components-panel-bg-alt px-1.5 py-0.5 system-2xs-medium-uppercase text-text-quaternary">
-                            {row.meta}
-                          </span>
-                        </button>
-                        {index === pinnedCount - 1 && index !== appRows.length - 1 && (
-                          <div className="my-1 h-px bg-divider-subtle" />
-                        )}
-                      </div>
-                    ))}
-                  </VerticalContent>
-                </ScrollAreaViewport>
-                <ScrollAreaScrollbar>
-                  <ScrollAreaThumb />
-                </ScrollAreaScrollbar>
-              </ScrollAreaRoot>
-            </div>
+        <div className="w-full max-w-70 rounded-xl bg-background-default-subtle p-3">
+          <div className="mb-4 flex h-8 items-center gap-2 rounded-lg bg-state-base-active px-2 text-text-accent">
+            <span className="i-ri-apps-fill size-4 shrink-0" aria-hidden />
+            <span className="min-w-0 truncate system-sm-semibold">Explore</span>
           </div>
+          <div className="mb-1.5 flex items-center justify-between px-2">
+            <span className="system-xs-medium-uppercase text-text-tertiary">Web apps</span>
+            <span className="system-xs-medium text-text-quaternary">{appRows.length}</span>
+          </div>
+          <ScrollAreaRoot className="relative h-76 min-w-0">
+            <ScrollAreaViewport aria-label="Web apps" role="region" className="h-full max-h-full max-w-full rounded-lg bg-transparent">
+              <VerticalContent className="space-y-0.5 pr-3">
+                {appRows.map((row, index) => (
+                  <div key={row.name} className="space-y-0.5">
+                    <button
+                      type="button"
+                      className={cn(
+                        'flex h-8 w-full min-w-0 items-center justify-between gap-2 rounded-lg px-2 text-left transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-solid focus-visible:outline-state-accent-solid',
+                        row.selected
+                          ? 'bg-state-base-active text-components-menu-item-text-active'
+                          : 'text-components-menu-item-text hover:bg-state-base-hover hover:text-components-menu-item-text-hover',
+                      )}
+                    >
+                      <span className="flex min-w-0 items-center gap-2">
+                        <span className="flex size-5 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid text-components-avatar-shape-fill-stop-100">
+                          <span aria-hidden className={cn(row.icon, 'size-3.5')} />
+                        </span>
+                        <span className="min-w-0 truncate system-sm-regular">{row.name}</span>
+                      </span>
+                      <span className="shrink-0 rounded-md border border-divider-subtle bg-components-panel-bg-alt px-1.5 py-0.5 system-2xs-medium-uppercase text-text-quaternary">
+                        {row.meta}
+                      </span>
+                    </button>
+                    {index === pinnedCount - 1 && index !== appRows.length - 1 && (
+                      <div className="my-1 h-px bg-divider-subtle" />
+                    )}
+                  </div>
+                ))}
+              </VerticalContent>
+            </ScrollAreaViewport>
+            <ScrollAreaScrollbar>
+              <ScrollAreaThumb />
+            </ScrollAreaScrollbar>
+          </ScrollAreaRoot>
         </div>
       </StorySection>
     )
diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 5f8d4cc0974..07dddc408bc 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -28,15 +28,6 @@ type PricingProps = {
   onCancel: () => void
 }
 
-const pricingScrollAreaClassNames = {
-  root: 'relative h-full w-full overflow-hidden',
-  viewport: 'overscroll-contain',
-  content: 'min-h-full min-w-[1200px]',
-  verticalScrollbar: 'data-[orientation=vertical]:my-2 data-[orientation=vertical]:me-1',
-  horizontalScrollbar: 'data-[orientation=horizontal]:mx-2 data-[orientation=horizontal]:mb-0.5',
-  corner: 'bg-saas-background',
-} as const
-
 const Pricing: FC<PricingProps> = ({
   onCancel,
 }) => {
@@ -65,9 +56,9 @@ const Pricing: FC<PricingProps> = ({
       <DialogContent
         className="inset-0 size-full max-h-none max-w-none translate-0 overflow-hidden rounded-none border-none bg-saas-background p-0 shadow-none"
       >
-        <ScrollAreaRoot className={pricingScrollAreaClassNames.root}>
-          <ScrollAreaViewport className={pricingScrollAreaClassNames.viewport}>
-            <ScrollAreaContent className={pricingScrollAreaClassNames.content}>
+        <ScrollAreaRoot className="relative h-full w-full overflow-hidden">
+          <ScrollAreaViewport className="overscroll-contain">
+            <ScrollAreaContent className="min-h-full min-w-300">
               <div className="relative grid min-h-full grid-rows-[1fr_auto_auto_1fr] overflow-hidden">
                 <div className="absolute inset-x-0 -top-12 -z-10">
                   <NoiseTop />
@@ -92,16 +83,13 @@ const Pricing: FC<PricingProps> = ({
               </div>
             </ScrollAreaContent>
           </ScrollAreaViewport>
-          <ScrollAreaScrollbar className={pricingScrollAreaClassNames.verticalScrollbar}>
+          <ScrollAreaScrollbar>
             <ScrollAreaThumb className="rounded-full" />
           </ScrollAreaScrollbar>
-          <ScrollAreaScrollbar
-            orientation="horizontal"
-            className={pricingScrollAreaClassNames.horizontalScrollbar}
-          >
+          <ScrollAreaScrollbar orientation="horizontal">
             <ScrollAreaThumb className="rounded-full" />
           </ScrollAreaScrollbar>
-          <ScrollAreaCorner className={pricingScrollAreaClassNames.corner} />
+          <ScrollAreaCorner className="bg-saas-background" />
         </ScrollAreaRoot>
       </DialogContent>
     </Dialog>
diff --git a/web/app/components/explore/sidebar/index.tsx b/web/app/components/explore/sidebar/index.tsx
index bbb6c37870e..408644a4ea8 100644
--- a/web/app/components/explore/sidebar/index.tsx
+++ b/web/app/components/explore/sidebar/index.tsx
@@ -23,12 +23,6 @@ import { useGetInstalledApps, useUninstallApp, useUpdateAppPinStatus } from '@/s
 import Item from './app-nav-item'
 import NoApps from './no-apps'
 
-const expandedSidebarScrollAreaClassNames = {
-  content: 'space-y-0.5',
-  scrollbar: 'data-[orientation=vertical]:my-2 data-[orientation=vertical]:-me-3',
-  viewport: 'overscroll-contain',
-} as const
-
 const SideBar = () => {
   const { t } = useTranslation()
   const pathname = usePathname()
@@ -116,7 +110,10 @@ const SideBar = () => {
                 <div className="min-h-0 flex-1">
                   <ScrollArea
                     className="h-full"
-                    slotClassNames={expandedSidebarScrollAreaClassNames}
+                    slotClassNames={{
+                      viewport: 'overscroll-contain',
+                      content: 'space-y-0.5 pr-3',
+                    }}
                     labelledBy={webAppsLabelId}
                   >
                     {installedAppItems}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx
index b1beed2345a..a5412e11b74 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-layout.tsx
@@ -93,7 +93,7 @@ export function ModelSelectorScrollBody({
       >
         <ScrollAreaContent className="min-w-0 overflow-x-hidden">{children}</ScrollAreaContent>
       </ScrollAreaViewport>
-      <ScrollAreaScrollbar className="z-2 data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1">
+      <ScrollAreaScrollbar className="z-2">
         <ScrollAreaThumb />
       </ScrollAreaScrollbar>
     </ScrollAreaRoot>
diff --git a/web/app/components/integrations/page.tsx b/web/app/components/integrations/page.tsx
index 25ca6923004..d0d43539c8b 100644
--- a/web/app/components/integrations/page.tsx
+++ b/web/app/components/integrations/page.tsx
@@ -297,7 +297,6 @@ export default function IntegrationsPage({
                 slotClassNames={{
                   viewport: 'overscroll-contain',
                   content: 'min-h-full',
-                  scrollbar: 'data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1',
                 }}
               >
                 <IntegrationSectionRenderer
diff --git a/web/app/components/integrations/section-layout.tsx b/web/app/components/integrations/section-layout.tsx
index e83bba56fea..2713a8bab48 100644
--- a/web/app/components/integrations/section-layout.tsx
+++ b/web/app/components/integrations/section-layout.tsx
@@ -21,7 +21,6 @@ export function IntegrationSectionLayout({
       slotClassNames={{
         viewport: 'overscroll-contain',
         content: 'min-h-full',
-        scrollbar: 'data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1',
       }}
     >
       <div className={bodyClassName}>
diff --git a/web/app/components/integrations/tool-provider-list.tsx b/web/app/components/integrations/tool-provider-list.tsx
index 04a81c4d7cb..d660545c499 100644
--- a/web/app/components/integrations/tool-provider-list.tsx
+++ b/web/app/components/integrations/tool-provider-list.tsx
@@ -245,7 +245,7 @@ const ProviderList = ({
               )}
             </ScrollAreaContent>
           </ScrollAreaViewport>
-          <ScrollAreaScrollbar className="data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1">
+          <ScrollAreaScrollbar>
             <ScrollAreaThumb />
           </ScrollAreaScrollbar>
         </ScrollAreaRoot>
diff --git a/web/app/components/main-nav/components/web-apps-section.tsx b/web/app/components/main-nav/components/web-apps-section.tsx
index 65ea3a3564e..37f326241a8 100644
--- a/web/app/components/main-nav/components/web-apps-section.tsx
+++ b/web/app/components/main-nav/components/web-apps-section.tsx
@@ -226,7 +226,7 @@ const WebAppsSectionContent = () => {
             className="overflow-x-hidden"
             role="region"
           >
-            <ScrollAreaContent className="w-full max-w-full min-w-0! px-2">
+            <ScrollAreaContent className="w-full max-w-full min-w-0! pr-5 pl-2">
               {isPending && (
                 <WebAppsSkeleton />
               )}
@@ -271,7 +271,7 @@ const WebAppsSectionContent = () => {
               )}
             </ScrollAreaContent>
           </ScrollAreaViewport>
-          <ScrollAreaScrollbar className="data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1">
+          <ScrollAreaScrollbar>
             <ScrollAreaThumb />
           </ScrollAreaScrollbar>
         </ScrollAreaRoot>
diff --git a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
index 76e7774c3ab..396a0351f73 100644
--- a/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/components/plugin-task-list.tsx
@@ -41,7 +41,7 @@ function PluginTaskList({
         label={t('task.installing', { ns: 'plugin' })}
         slotClassNames={{
           viewport: 'max-h-[420px] overscroll-contain',
-          content: 'w-full! max-w-full! min-w-0! overflow-x-hidden!',
+          content: 'w-full! max-w-full! min-w-0! overflow-x-hidden! pr-3',
         }}
       >
         {runningPlugins.length > 0 && (
diff --git a/web/app/components/plugins/plugin-page/plugins-panel-results.tsx b/web/app/components/plugins/plugin-page/plugins-panel-results.tsx
index b8a80ee2377..0b54ff40b4e 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel-results.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel-results.tsx
@@ -164,7 +164,7 @@ const PluginsPanelResults = ({
           )}
         </ScrollAreaContent>
       </ScrollAreaViewport>
-      <ScrollAreaScrollbar className="data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1">
+      <ScrollAreaScrollbar>
         <ScrollAreaThumb />
       </ScrollAreaScrollbar>
     </ScrollAreaRoot>
diff --git a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
index 75e747d4180..988fc091e5b 100644
--- a/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
+++ b/web/app/components/workflow/block-selector/trigger-plugin/item.tsx
@@ -180,7 +180,7 @@ const TriggerPluginItem: FC<Props> = ({
                 ))}
               </ScrollAreaContent>
             </ScrollAreaViewport>
-            <ScrollAreaScrollbar className="data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1">
+            <ScrollAreaScrollbar>
               <ScrollAreaThumb />
             </ScrollAreaScrollbar>
           </ScrollAreaRoot>
diff --git a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx
index 409adff5d79..9a9407b9e61 100644
--- a/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx
+++ b/web/features/agent-v2/agent-detail/configure/components/orchestrate/skills/detail-dialog.tsx
@@ -235,7 +235,6 @@ export function AgentSkillDetailDialog({
           slotClassNames={{
             viewport: 'overscroll-contain outline-none focus-visible:outline-none mask-linear-[to_bottom,transparent_0,black_min(40px,var(--scroll-area-overflow-y-start)),black_calc(100%_-_min(40px,var(--scroll-area-overflow-y-end,40px))),transparent_100%] mask-no-repeat',
             content: 'flex min-h-full w-full max-w-full min-w-0 flex-col gap-2 px-6 pt-4 pb-0',
-            scrollbar: 'data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1',
           }}
         >
           {detail.filePreview && (
diff --git a/web/features/agent-v2/agent-detail/logs/components/logs-table.tsx b/web/features/agent-v2/agent-detail/logs/components/logs-table.tsx
index ca5e6a6c03d..fd8140be430 100644
--- a/web/features/agent-v2/agent-detail/logs/components/logs-table.tsx
+++ b/web/features/agent-v2/agent-detail/logs/components/logs-table.tsx
@@ -41,7 +41,7 @@ export function AgentLogsTable({
 
   return (
     <div className="flex h-full min-w-0 flex-col overflow-hidden">
-      <div className="shrink-0">
+      <div className="shrink-0 pr-3">
         <table aria-hidden="true" className="w-full table-fixed border-collapse">
           <LogsTableColGroup />
           <LogsTableHeader labels={tableHeaderLabels} />
@@ -55,7 +55,7 @@ export function AgentLogsTable({
           tabIndex={-1}
           className="overscroll-contain"
         >
-          <ScrollAreaContent>
+          <ScrollAreaContent className="pr-3">
             <table className="w-full table-fixed border-collapse">
               <LogsTableColGroup />
               <LogsTableHeader labels={tableHeaderLabels} rowClassName="sr-only" />
@@ -69,7 +69,7 @@ export function AgentLogsTable({
             </table>
           </ScrollAreaContent>
         </ScrollAreaViewport>
-        <ScrollAreaScrollbar className="data-[orientation=vertical]:translate-x-1">
+        <ScrollAreaScrollbar>
           <ScrollAreaThumb />
         </ScrollAreaScrollbar>
       </ScrollAreaRoot>
diff --git a/web/features/agent-v2/roster/page.tsx b/web/features/agent-v2/roster/page.tsx
index 2527c0875b5..b207818ca6e 100644
--- a/web/features/agent-v2/roster/page.tsx
+++ b/web/features/agent-v2/roster/page.tsx
@@ -139,7 +139,7 @@ export default function RosterPage() {
                 />
               </ScrollAreaContent>
             </ScrollAreaViewport>
-            <ScrollAreaScrollbar className="data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1">
+            <ScrollAreaScrollbar>
               <ScrollAreaThumb />
             </ScrollAreaScrollbar>
           </ScrollAreaRoot>
diff --git a/web/features/deployments/create-guide/ui/layout.tsx b/web/features/deployments/create-guide/ui/layout.tsx
index 1e2fd448a81..dfecfba307f 100644
--- a/web/features/deployments/create-guide/ui/layout.tsx
+++ b/web/features/deployments/create-guide/ui/layout.tsx
@@ -167,7 +167,6 @@ export function GuideCard({ children, actions, contentScrollable = true }: {
               slotClassNames={{
                 viewport: 'overscroll-contain',
                 content: 'min-h-full pt-0.5 pb-6',
-                scrollbar: 'data-[orientation=vertical]:-me-5 data-[orientation=vertical]:my-1',
               }}
             >
               {children}