refactor(ui): extract ScrollArea styles and unify scrollports

HMarzban · HMarzban · commit b14394b0e019 · 2026-04-03T15:12:15.000+03:30
Move scrollbar styling into a dedicated partial and align ScrollArea
usage with flex min-h-0 patterns so nested panels scroll instead of
collapsing or clipping content.

Made-with: Cursor
diff --git a/packages/webapp/src/components/bookmarkPanel/desktop/BookmarkPanel.tsx b/packages/webapp/src/components/bookmarkPanel/desktop/BookmarkPanel.tsx
@@ -22,7 +22,7 @@ export const BookmarkPanel = ({ onClose }: BookmarkPanelProps) => {
   const { bookmarks, isLoading, isLoadingMore, hasMore, sentinelRef } = useInfiniteBookmarks()
 
   return (
-    <div className="bg-base-100 flex w-full flex-col">
+    <div className="bg-base-100 flex min-h-0 w-full flex-col overflow-hidden">
       {/* Header */}
       <div className="border-base-300 border-b px-4 py-3">
         <BookmarkHeader onClose={onClose} />
diff --git a/packages/webapp/src/components/notificationPanel/desktop/NotificationPanel.tsx b/packages/webapp/src/components/notificationPanel/desktop/NotificationPanel.tsx
@@ -24,7 +24,7 @@ export const NotificationPanel = ({ onClose }: NotificationPanelProps) => {
     useInfiniteNotifications()
 
   return (
-    <div className="bg-base-100 flex w-full flex-col">
+    <div className="bg-base-100 flex min-h-0 w-full flex-col overflow-hidden">
       {/* Header */}
       <div className="border-base-300 border-b px-4 py-3">
         <NotificationHeader onClose={onClose} />
diff --git a/packages/webapp/src/components/pages/design-system-docs/DesignSystemDocsPage.tsx b/packages/webapp/src/components/pages/design-system-docs/DesignSystemDocsPage.tsx
@@ -32,7 +32,7 @@ import { DesignSystemDocsProvider } from './context/DesignSystemDocsContext'
  */
 const MainContent = () => {
   return (
-    <ScrollArea className="flex-1" scrollbarSize="thin">
+    <ScrollArea className="min-h-0 flex-1" scrollbarSize="thin">
       <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
         {/* Getting Started */}
         <GettingStartedSection />
@@ -110,7 +110,7 @@ const PageContent = () => {
         <Sidebar />
 
         {/* Main area */}
-        <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
           {/* Mobile header */}
           <Header />
 
diff --git a/packages/webapp/src/components/pages/design-system-docs/components/navigation/Sidebar.tsx b/packages/webapp/src/components/pages/design-system-docs/components/navigation/Sidebar.tsx
@@ -70,7 +70,7 @@ export const Sidebar = () => {
 
       {/* Sidebar */}
       <aside
-        className={`fixed inset-y-0 left-0 z-50 flex w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-300 lg:static lg:translate-x-0 ${
+        className={`fixed inset-y-0 left-0 z-50 flex min-h-0 w-72 flex-col border-r border-slate-200 bg-white transition-transform duration-300 lg:static lg:translate-x-0 ${
           sidebarOpen ? 'translate-x-0' : '-translate-x-full'
         }`}>
         {/* Header */}
@@ -123,7 +123,7 @@ export const Sidebar = () => {
         </div>
 
         {/* Navigation */}
-        <ScrollArea className="flex-1" scrollbarSize="thin">
+        <ScrollArea className="min-h-0 flex-1" scrollbarSize="thin">
           <nav className="p-4 pt-0">
             {NAV_SECTIONS.map((section) => (
               <div key={section.id} className="mb-4">
diff --git a/packages/webapp/src/components/pages/design-system-docs/components/sections/PatternsSection.tsx b/packages/webapp/src/components/pages/design-system-docs/components/sections/PatternsSection.tsx
@@ -43,15 +43,15 @@ export const PatternsSection = () => {
             title="Sidebar + Content Panel"
             code={`<div className="flex h-[100dvh] flex-col md:flex-row md:overflow-hidden">
   {/* Sidebar */}
-  <aside className="w-full shrink-0 border-slate-200 md:w-72 md:border-r lg:w-80">
-    <ScrollArea className="flex-1 p-4">
+  <aside className="flex min-h-0 w-full shrink-0 flex-col border-slate-200 md:w-72 md:border-r lg:w-80">
+    <ScrollArea className="min-h-0 flex-1 p-4" scrollbarSize="thin">
       {/* Navigation */}
     </ScrollArea>
   </aside>
 
   {/* Content */}
-  <main className="min-h-0 flex-1">
-    <ScrollArea className="h-full p-4 sm:p-6">
+  <main className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+    <ScrollArea className="min-h-0 flex-1 p-4 sm:p-6" scrollbarSize="thin">
       {/* Content */}
     </ScrollArea>
   </main>
diff --git a/packages/webapp/src/components/pages/document/components/DesktopEditor.tsx b/packages/webapp/src/components/pages/document/components/DesktopEditor.tsx
@@ -170,6 +170,7 @@ const DesktopEditor = () => {
             orientation="vertical"
             onMouseDown={handleMouseDown}
             isResizing={isResizing}
+            className="z-[40]"
           />
           <TOC />
         </div>
diff --git a/packages/webapp/src/components/pages/history/desktop/EditorContent.tsx b/packages/webapp/src/components/pages/history/desktop/EditorContent.tsx
@@ -1,5 +1,6 @@
 import DocumentSimpleLoader from '@components/skeleton/DocumentSimpleLoader'
 import DocumentWithPictureLoader from '@components/skeleton/DocumentWithPictureLoader'
+import { ScrollArea } from '@components/ui/ScrollArea'
 import { useStore } from '@stores'
 import { EditorContent as TiptapEditorContent } from '@tiptap/react'
 import React from 'react'
@@ -10,23 +11,27 @@ const EditorContent = () => {
 
   if (loadingHistory || !editor) {
     return (
-      <div className="editorWrapper scrollbar-custom scrollbar-thin bg-base-200 flex h-full grow items-start justify-center overflow-y-auto scroll-smooth border-t-0 px-3 py-4 sm:px-6 sm:py-6">
+      <ScrollArea
+        className="editorWrapper bg-base-200 flex min-h-0 min-w-0 flex-1 items-start justify-center border-t-0 px-3 py-4 sm:px-6 sm:py-6"
+        scrollbarSize="thin">
         <div className="ProseMirror tiptap__editor">
           <DocumentSimpleLoader className="heading !h-auto" level="1" />
           <DocumentWithPictureLoader className="heading !h-auto" level="1" />
           <DocumentSimpleLoader className="heading !h-auto" level="1" />
         </div>
-      </div>
+      </ScrollArea>
     )
   }
 
   return (
-    <div className="editorWrapper scrollbar-custom scrollbar-thin bg-base-200 flex h-full grow items-start justify-center overflow-y-auto scroll-smooth border-t-0 px-3 py-4 sm:px-6 sm:py-6">
+    <ScrollArea
+      className="editorWrapper bg-base-200 flex min-h-0 min-w-0 flex-1 items-start justify-center border-t-0 px-3 py-4 sm:px-6 sm:py-6"
+      scrollbarSize="thin">
       <TiptapEditorContent
         editor={editor}
         className="tiptap__editor docy_editor mb-12 border-t-0 px-6 pt-8 sm:mb-0 sm:p-8"
       />
-    </div>
+    </ScrollArea>
   )
 }
 
diff --git a/packages/webapp/src/components/pages/history/mobile/EditorContent.tsx b/packages/webapp/src/components/pages/history/mobile/EditorContent.tsx
@@ -1,30 +1,32 @@
 import DocumentSimpleLoader from '@components/skeleton/DocumentSimpleLoader'
 import DocumentWithPictureLoader from '@components/skeleton/DocumentWithPictureLoader'
+import { ScrollArea } from '@components/ui/ScrollArea'
 import { useStore } from '@stores'
 import { EditorContent as TiptapEditorContent } from '@tiptap/react'
 
+const scrollRootClass =
+  'editor editorWrapper history-mobile-editor flex h-full min-h-0 w-full min-w-0 flex-1 border-t-0'
+
 const EditorContent = () => {
   const loadingHistory = useStore((state) => state.loadingHistory)
   const editor = useStore((state) => state.editor)
 
   if (loadingHistory || !editor) {
     return (
-      <div className="editorWrapper scrollbar-custom scrollbar-thin flex h-full min-h-0 w-full flex-1 items-start justify-center overflow-y-auto scroll-smooth border-t-0">
-        <div className={'ProseMirror tiptap__editor w-full'}>
+      <ScrollArea className={scrollRootClass} scrollbarSize="thin">
+        <div className="ProseMirror tiptap__editor docy_editor relative w-full">
           <DocumentSimpleLoader className="heading !h-auto" level="1" />
           <DocumentWithPictureLoader className="heading !h-auto" level="1" />
           <DocumentSimpleLoader className="heading !h-auto" level="1" />
         </div>
-      </div>
+      </ScrollArea>
     )
   }
 
   return (
-    <div className="editor relative flex size-full min-h-0 w-full max-w-full flex-col justify-around align-top">
-      <div className="editorWrapper scrollbar-custom scrollbar-thin flex min-h-0 flex-1 items-start justify-center overflow-y-auto scroll-smooth border-t-0 p-0">
-        <TiptapEditorContent editor={editor} className="tiptap__editor relative" />
-      </div>
-    </div>
+    <ScrollArea className={scrollRootClass} scrollbarSize="thin">
+      <TiptapEditorContent editor={editor} className="tiptap__editor docy_editor relative w-full" />
+    </ScrollArea>
   )
 }
 
diff --git a/packages/webapp/src/components/settings/SettingsPanel.tsx b/packages/webapp/src/components/settings/SettingsPanel.tsx
@@ -229,7 +229,7 @@ const SettingsPanel = ({ defaultTab = 'profile', onClose }: SettingsPanelProps)
         </div>
 
         {/* Scrollable content area */}
-        <ScrollArea className="flex-1 p-4 sm:p-6" scrollbarSize="thin">
+        <ScrollArea className="min-h-0 flex-1 p-4 sm:p-6" scrollbarSize="thin">
           {/* User info header */}
           <div className="bg-base-200 rounded-box mb-4 flex items-center gap-2.5 p-2.5">
             <Avatar
@@ -360,7 +360,7 @@ const SettingsPanel = ({ defaultTab = 'profile', onClose }: SettingsPanelProps)
         </div>
 
         {/* Scrollable content */}
-        <ScrollArea orientation="vertical" className="bg-base-200 flex-1">
+        <ScrollArea className="bg-base-200 min-h-0 flex-1" scrollbarSize="thin">
           <div className="mx-auto max-w-2xl p-4 sm:p-6">{renderContent()}</div>
         </ScrollArea>
       </div>
diff --git a/packages/webapp/src/components/skeleton/SidebarLoader.tsx b/packages/webapp/src/components/skeleton/SidebarLoader.tsx
@@ -2,15 +2,15 @@ import { ScrollArea } from '@components/ui/ScrollArea'
 
 const SidebarLoader = () => {
   return (
-    <div className="bg-base-100 border-base-300 flex h-full w-64 flex-col border-l">
+    <div className="bg-base-100 border-base-300 flex h-full min-h-0 w-64 flex-col overflow-hidden border-l">
       {/* Header */}
       <div className="border-base-300 border-b p-4">
         <div className="skeleton h-5 w-36 rounded" />
         <div className="skeleton mt-2 h-3 w-24 rounded" />
       </div>
 
       {/* Version list */}
-      <ScrollArea className="flex-1" orientation="vertical" scrollbarSize="thin" hideScrollbar>
+      <ScrollArea className="min-h-0 flex-1" scrollbarSize="thin" hideScrollbar>
         {[1, 2, 3].map((day) => (
           <div key={day} className="border-base-200 border-b">
             {/* Day header */}
diff --git a/packages/webapp/src/components/skeleton/SlugPageLoader.tsx b/packages/webapp/src/components/skeleton/SlugPageLoader.tsx
@@ -199,7 +199,7 @@ export const SlugPageLoader = ({
       {!isMobile && <ToolbarSkeleton />}
 
       {/* Main content area */}
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex min-h-0 flex-1 overflow-hidden">
         {/* Table of Contents - desktop only */}
         {!isMobile && (
           <aside className="border-base-300 bg-base-100 hidden w-64 shrink-0 border-r md:block">
@@ -208,7 +208,7 @@ export const SlugPageLoader = ({
         )}
 
         {/* Document content */}
-        <ScrollArea className="bg-base-100 flex-1" orientation="vertical">
+        <ScrollArea className="bg-base-100 min-h-0 flex-1">
           <DocumentSkeleton />
         </ScrollArea>
       </div>
diff --git a/packages/webapp/src/components/ui/ScrollArea.tsx b/packages/webapp/src/components/ui/ScrollArea.tsx
@@ -1,104 +1,81 @@
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { type CSSProperties, forwardRef, type HTMLAttributes, type ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
-  /** Content to render inside the scroll area */
+type ScrollOrientation = 'vertical' | 'horizontal' | 'both'
+type ScrollbarSize = 'thin' | 'default'
+
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode
-  /** Orientation of the scroll area */
-  orientation?: 'vertical' | 'horizontal' | 'both'
-  /** Size of the scrollbar */
-  scrollbarSize?: 'thin' | 'default'
-  /** Whether to hide scrollbar until hover */
+  orientation?: ScrollOrientation
+  scrollbarSize?: ScrollbarSize
   hideScrollbar?: boolean
   /**
-   * Preserve content width by reserving space for scrollbar.
-   * Prevents layout shift when scrollbar appears/disappears.
-   * Uses CSS `scrollbar-gutter: stable`.
+   * Reserve space for the scrollbar (`scrollbar-gutter: stable`) to avoid layout shift.
    * @default true
    */
   preserveWidth?: boolean
-  /** Additional class name for the viewport */
-  viewportClassName?: string
 }
 
-/**
- * A custom scroll area component with smooth scrolling and styled scrollbars.
- * Provides a consistent, minimal scrollbar across all browsers.
- *
- * Features:
- * - Prevents layout shift with `preserveWidth` (scrollbar-gutter: stable)
- * - Smooth scrolling
- * - Custom styled scrollbars (thin or default)
- * - Hide scrollbar until hover option
- *
- * @example
- * ```tsx
- * // Basic usage - preserves width by default
- * <ScrollArea className="h-64">
- *   <div>Scrollable content here...</div>
- * </ScrollArea>
- *
- * // With hidden scrollbar that shows on hover
- * <ScrollArea hideScrollbar preserveWidth>
- *   <div>Content...</div>
- * </ScrollArea>
- * ```
- */
-const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
-  (
-    {
-      children,
-      className,
-      orientation = 'vertical',
-      scrollbarSize = 'default',
-      hideScrollbar = false,
-      preserveWidth = true,
-      viewportClassName,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    const orientationClasses = {
-      vertical: 'overflow-y-auto overflow-x-hidden',
-      horizontal: 'overflow-x-auto overflow-y-hidden',
-      both: 'overflow-auto'
-    }
+/** Single scrollable root + theme scrollbar classes — no inner wrapper. */
+const SCROLL_ROOT = 'relative min-h-0 min-w-0 scroll-smooth scrollbar-custom' as const
+
+const ORIENTATION_CLASS: Record<ScrollOrientation, string> = {
+  vertical: 'overflow-y-auto overflow-x-hidden',
+  horizontal: 'overflow-x-auto overflow-y-hidden',
+  both: 'overflow-auto'
+}
 
-    const scrollbarSizeClasses = {
-      thin: 'scrollbar-thin',
-      default: 'scrollbar-default'
-    }
+const SCROLLBAR_SIZE_CLASS: Record<ScrollbarSize, string> = {
+  thin: 'scrollbar-thin',
+  default: 'scrollbar-default'
+}
 
-    // Scrollbar gutter for stable width - prevents layout shift
-    const gutterStyle = preserveWidth ? { scrollbarGutter: 'stable' as const, ...style } : style
+function mergeScrollStyle(
+  preserveWidth: boolean,
+  style: CSSProperties | undefined
+): CSSProperties | undefined {
+  if (!preserveWidth) return style
+  return style ? { scrollbarGutter: 'stable', ...style } : { scrollbarGutter: 'stable' }
+}
+
+function scrollAreaClassName(
+  orientation: ScrollOrientation,
+  scrollbarSize: ScrollbarSize,
+  hideScrollbar: boolean,
+  className: string | undefined
+): string {
+  return twMerge(
+    SCROLL_ROOT,
+    ORIENTATION_CLASS[orientation],
+    hideScrollbar ? 'scrollbar-hide' : SCROLLBAR_SIZE_CLASS[scrollbarSize],
+    className
+  )
+}
 
-    return (
-      <div
-        ref={ref}
-        className={twMerge(
-          // Base styles
-          'relative scroll-smooth',
-          // Orientation
-          orientationClasses[orientation],
-          // Custom scrollbar styling
-          'scrollbar-custom',
-          // Scrollbar size (only when not hiding)
-          !hideScrollbar && scrollbarSizeClasses[scrollbarSize],
-          // Hide scrollbar option - CSS handles hover state via .scrollbar-hide:hover
-          hideScrollbar && 'scrollbar-hide',
-          // User classes
-          className
-        )}
-        style={gutterStyle}
-        {...props}>
-        <div className={twMerge('min-h-0 min-w-0', viewportClassName)}>{children}</div>
-      </div>
-    )
-  }
-)
+const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(function ScrollArea(
+  {
+    children,
+    className,
+    orientation = 'vertical',
+    scrollbarSize = 'default',
+    hideScrollbar = false,
+    preserveWidth = true,
+    style,
+    ...props
+  },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={scrollAreaClassName(orientation, scrollbarSize, hideScrollbar, className)}
+      style={mergeScrollStyle(preserveWidth, style)}
+      {...props}>
+      {children}
+    </div>
+  )
+})
 
 ScrollArea.displayName = 'ScrollArea'
 
 export { ScrollArea }
-export type { ScrollAreaProps }
diff --git a/packages/webapp/src/components/ui/SearchableSelect.tsx b/packages/webapp/src/components/ui/SearchableSelect.tsx
diff --git a/packages/webapp/src/components/ui/Select.tsx b/packages/webapp/src/components/ui/Select.tsx
diff --git a/packages/webapp/src/styles/components/_index.scss b/packages/webapp/src/styles/components/_index.scss
diff --git a/packages/webapp/src/styles/components/_scrollArea.scss b/packages/webapp/src/styles/components/_scrollArea.scss
diff --git a/packages/webapp/src/styles/globals.scss b/packages/webapp/src/styles/globals.scss
