From f2300219d704794b5f235d639695a38937c60c0d Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Sun, 26 Apr 2026 21:23:14 +0200
Subject: [PATCH] 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       | 9 +++++++++
 studio-v2/app/learn/layout.tsx  | 2 +-
 studio-v2/app/parent/layout.tsx | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/studio-v2/app/globals.css b/studio-v2/app/globals.css
index 99b639b..f62152b 100644
--- a/studio-v2/app/globals.css
+++ b/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;
diff --git a/studio-v2/app/learn/layout.tsx b/studio-v2/app/learn/layout.tsx
index 45c84fd..3e8b14f 100644
--- a/studio-v2/app/learn/layout.tsx
+++ b/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>
diff --git a/studio-v2/app/parent/layout.tsx b/studio-v2/app/parent/layout.tsx
index b25b5ba..d4a9eb5 100644
--- a/studio-v2/app/parent/layout.tsx
+++ b/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>