feat(ScrollArea): add shadcn scroll area to layout

src/app/ui/Layout.svelte

@@ -3,17 +3,15 @@
  * Layout Component
  *
  * Root layout wrapper that provides the application shell structure. Handles favicon,
- * sidebar provider initialization, and renders child routes with consistent structure.
+ * toolbar provider initialization, and renders child routes with consistent structure.
  *
  * Layout structure:
  * - Header area (currently empty, reserved for future use)
- * - Collapsible sidebar with main content area
- * - Footer area (currently empty, reserved for future use)
  *
- * Uses Sidebar.Provider to enable mobile-responsive collapsible sidebar behavior
- * throughout the application.
+ * - Footer area (currently empty, reserved for future use)
  */
 import favicon from '$shared/assets/favicon.svg';
+import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
 import { TypographyMenu } from '$widgets/TypographySettings';
 import type { Snippet } from 'svelte';
@@ -42,11 +40,13 @@ let { children }: Props = $props();
 <div id="app-root" class="min-h-screen flex flex-col bg-background">
     <header></header>
 
-    <main class="flex-1 w-full max-w-5xl mx-auto px-4 py-6 md:px-8 lg:py-10">
-        <TooltipProvider>
-            <TypographyMenu />
-            {@render children?.()}
-        </TooltipProvider>
-    </main>
+    <ScrollArea class="h-screen w-screen">
+        <main class="flex-1 w-full max-w-5xl mx-auto px-4 py-6 md:px-8 lg:py-10 relative">
+            <TooltipProvider>
+                <TypographyMenu />
+                {@render children?.()}
+            </TooltipProvider>
+        </main>
+    </ScrollArea>
     <footer></footer>
 </div>