feat: refactor scratchpad to floating overlay with global thin scrollbars

Refactor scratchpad from a flex-layout sidebar that pushes content left
to a floating overlay panel (position: fixed) that doesn't affect layout.
Panel slides in from the right with Ctrl+/ toggle. Main content adjusts
padding responsively when panel is open.

Also apply thin scrollbar styling globally across all scrollable elements
for a consistent, minimal look.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/pages/TreeNavigationPage.tsx

@@ -56,6 +56,11 @@ export function TreeNavigationPage() {
   // Fork flow
   const [showForkModal, setShowForkModal] = useState(false)
 
+  // Scratchpad state
+  const [scratchpadOpen, setScratchpadOpen] = useState(() => {
+    return localStorage.getItem('scratchpad-collapsed') === 'false'
+  })
+
   // Scratchpad save handler
   const handleScratchpadSave = async (content: string) => {
     if (!session) return
@@ -636,9 +641,9 @@ export function TreeNavigationPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-4rem)]">
+    <div className="h-[calc(100vh-4rem)]">
       {/* Main Content */}
-      <div className="flex-1 min-w-0 overflow-y-auto px-4 py-8">
+      <div className={cn('h-full overflow-y-auto px-4 py-8 transition-[padding] duration-200', scratchpadOpen && 'pr-[440px]')}>
       <div className="mx-auto max-w-4xl">
       {/* Header */}
       <div className="mb-6 flex items-center justify-between">
@@ -1024,6 +1029,7 @@ export function TreeNavigationPage() {
           sessionId={session.id}
           initialContent={session.scratchpad ?? ''}
           onSave={handleScratchpadSave}
+          onOpenChange={setScratchpadOpen}
         />
       )}
     </div>