Fix white playground border (#1137)

* Fix white playground border

* Remove unnecessary outer scrollbar

* No overflow rules needed on main

Author: fhammerschmidt

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>
@@ -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,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-scroll mt-16"}>
+  <main className={"flex flex-col bg-gray-100 text-gray-40 text-14 mt-16"}>
     <ControlPanel
       actionIndicatorKey={Int.toString(actionCount)}
       state=compilerState
@@ -2005,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 ${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"
@@ -2042,7 +2048,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)}

styles/main.css

@@ -295,6 +295,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;
   }