From 60d3bffaf7cbf208a01b839cfb03a73d15e14aad Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Mon, 24 Nov 2025 15:46:13 +0100
Subject: [PATCH 1/3] Fix white playground border

---
 src/Playground.res | 12 +++++++-----
 styles/main.css    | 25 +++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/Playground.res b/src/Playground.res
index aaab4cb96..c02d9057f 100644
--- a/src/Playground.res
+++ b/src/Playground.res
@@ -364,7 +364,7 @@ module ResultPane = {
     ~focusedRowCol: option<(int, int)>=?,
     ~result: FinalResult.t,
   ) =>
-    <div className="pt-4 bg-0 overflow-y-auto">
+    <div className="pt-4 bg-0 overflow-y-auto playground-scrollbar">
       <div className="flex items-center text-16 font-medium px-4">
         <div className="pr-4"> {renderTitle(result)} </div>
       </div>
@@ -765,7 +765,7 @@ module WarningFlagsWidget = {
       Option.map(suggestions, elements =>
         <div
           ref={ReactDOM.Ref.domRef((Obj.magic(listboxRef): React.ref<Nullable.t<Dom.element>>))}
-          className="p-2 absolute overflow-auto z-50 border-b rounded border-l border-r block w-full bg-gray-100 max-h-60"
+          className="p-2 absolute overflow-auto playground-scrollbar z-50 border-b rounded border-l border-r block w-full bg-gray-100 max-h-60"
         >
           elements
         </div>
@@ -1932,7 +1932,9 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     <button key={Int.toString(i)} onClick className disabled> {title} </button>
   })
 
-  <main className={"flex flex-col bg-gray-100  text-gray-40 text-14 overflow-scroll mt-16"}>
+  <main className={
+    "flex flex-col bg-gray-100 text-gray-40 text-14 overflow-scroll playground-scrollbar mt-16"
+  }>
     <ControlPanel
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState
@@ -1947,7 +1949,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
       // Left Panel
       <div
         ref={ReactDOM.Ref.domRef((Obj.magic(leftPanelRef): React.ref<Nullable.t<Dom.element>>))}
-        className={`overflow-scroll ${layout == Column ? "h-2/4" : "h-full!"} ${layout == Column
+        className={`overflow-scroll playground-scrollbar ${layout == Column ? "h-2/4" : "h-full!"} ${layout == Column
             ? "w-full"
             : "w-[50%]"}`}
       >
@@ -2003,7 +2005,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
         </div>
         <div
           ref={ReactDOM.Ref.domRef((Obj.magic(subPanelRef): React.ref<Nullable.t<Dom.element>>))}
-          className="overflow-auto"
+          className="overflow-auto playground-scrollbar"
         >
           <OutputPanel
             currentTab compilerDispatch compilerState editorCode keyMapState={(keyMap, setKeyMap)}
diff --git a/styles/main.css b/styles/main.css
index a037dfb19..b4568e6c9 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -294,6 +294,31 @@
     /* Chrome/Safari/Webkit */
   }
 
+  .playground-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-gray-70) var(--color-gray-100);
+    scrollbar-gutter: stable; /* Reserve only at the scrollbar edge to avoid padding shifts */
+  }
+
+  .playground-scrollbar::-webkit-scrollbar {
+    width: 0.65rem;
+    height: 0.65rem;
+  }
+
+  .playground-scrollbar::-webkit-scrollbar-track {
+    background: var(--color-gray-100);
+  }
+
+  .playground-scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-70);
+    border-radius: 9999px;
+    border: 2px solid var(--color-gray-100);
+  }
+
+  .playground-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-gray-60);
+  }
+
   a > code {
     @apply text-fire;
   }

From 42fc719f9bbaa5bdf07a89c4717599ce149a693d Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Mon, 24 Nov 2025 16:37:19 +0100
Subject: [PATCH 2/3] Remove unnecessary outer scrollbar

---
 src/Playground.res | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/Playground.res b/src/Playground.res
index 1c0bb1726..4f58d0419 100644
--- a/src/Playground.res
+++ b/src/Playground.res
@@ -1523,6 +1523,12 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
   let (searchParams, _) = ReactRouter.useSearchParams()
   let containerRef = React.useRef(Nullable.null)
   let editorRef: React.ref<option<CodeMirror.editorInstance>> = React.useRef(None)
+  let (_, setScrollLock) = ScrollLockContext.useScrollLock()
+
+  React.useEffect(() => {
+    setScrollLock(_ => true)
+    None
+  }, [])
 
   let versions =
     versions
@@ -1990,9 +1996,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     <button key={Int.toString(i)} onClick className disabled> {title} </button>
   })
 
-  <main className={
-    "flex flex-col bg-gray-100 text-gray-40 text-14 overflow-scroll playground-scrollbar mt-16"
-  }>
+  <main className={"flex flex-col bg-gray-100 text-gray-40 text-14 overflow-hidden mt-16"}>
     <ControlPanel
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState
@@ -2007,9 +2011,9 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
       // Left Panel
       <div
         ref={ReactDOM.Ref.domRef((Obj.magic(leftPanelRef): React.ref<Nullable.t<Dom.element>>))}
-        className={`overflow-scroll playground-scrollbar ${layout == Column ? "h-2/4" : "h-full!"} ${layout == Column
-            ? "w-full"
-            : "w-[50%]"}`}
+        className={`overflow-scroll playground-scrollbar ${layout == Column
+            ? "h-2/4"
+            : "h-full!"} ${layout == Column ? "w-full" : "w-[50%]"}`}
       >
         <div
           className="bg-gray-100 h-full"

From 76673b5db8004f886dc5d0009b4c3d47b66fbb6b Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <florianh89@gmail.com>
Date: Mon, 24 Nov 2025 17:47:06 +0100
Subject: [PATCH 3/3] No overflow rules needed on main

---
 src/Playground.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Playground.res b/src/Playground.res
index 4f58d0419..36ff328c4 100644
--- a/src/Playground.res
+++ b/src/Playground.res
@@ -1996,7 +1996,7 @@ let make = (~bundleBaseUrl: string, ~versions: array<string>) => {
     <button key={Int.toString(i)} onClick className disabled> {title} </button>
   })
 
-  <main className={"flex flex-col bg-gray-100 text-gray-40 text-14 overflow-hidden mt-16"}>
+  <main className={"flex flex-col bg-gray-100 text-gray-40 text-14 mt-16"}>
     <ControlPanel
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState