Fix: Hide scrollbar on content area (scroll still works)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

studio-v2/app/globals.css

@@ -4,6 +4,15 @@
 
 /* BreakPilot Studio v2 - Base Styles */
 
+/* Hide scrollbars globally but keep scroll functionality */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;

studio-v2/app/learn/layout.tsx

@@ -20,7 +20,7 @@ export default function LearnLayout({ children }: { children: React.ReactNode })
       <div className="relative z-10 p-4 flex-shrink-0">
         <Sidebar />
       </div>
-      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
+      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto scrollbar-hide" style={{ scrollbarWidth: 'none' }}>
         {children}
       </div>
     </div>

studio-v2/app/parent/layout.tsx

@@ -19,7 +19,7 @@ export default function ParentLayout({ children }: { children: React.ReactNode }
       <div className="relative z-10 p-4 flex-shrink-0">
         <Sidebar />
       </div>
-      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
+      <div className="flex-1 flex flex-col relative z-10 overflow-y-auto scrollbar-hide" style={{ scrollbarWidth: 'none' }}>
         {children}
       </div>
     </div>