fix(frontend): let the configuration header reach the panel edge

Reserving a scrollbar gutter kept the sticky headers short by the
scrollbar's width, and the earlier attempt to stretch them across it did
not work: the browser clips painting at the content box, so the notch
stayed. The config panel now reserves nothing and shows no scrollbar, so
its headers span the panel edge to edge and the layout never shifts. The
panel still scrolls with the wheel and its section headers still pin.

Author: mmabrouk

web/oss/src/components/Playground/Components/MainLayout/index.tsx

@@ -22,7 +22,6 @@ import {chatPanelMaximizedAtom} from "@/oss/components/AgentChatSlice/state/pane
 // Direct file import — the SessionInspector barrel would statically pull the (dynamic,
 // open-on-demand) inspector drawer back into this chunk.
 import PanelSessionInspectorButton from "@/oss/components/SessionInspector/PanelSessionInspectorButton"
-import {useScrollbarGutterVar} from "@/oss/hooks/useScrollbarGutterVar"
 import {routerAppIdAtom} from "@/oss/state/app/selectors/app"
 import {playgroundEarlyAgentStateAtom} from "@/oss/state/workflow"
 
@@ -269,10 +268,9 @@ const PlaygroundMainView = ({
     const animateSplit = justToggled || holdAnimate
 
     const variantRefs = useRef<(HTMLDivElement | null)[]>([])
-    const {configPanelRef, setConfigPanelRef, setGenerationPanelRef} = usePlaygroundScrollSync({
+    const {setConfigPanelRef, setGenerationPanelRef} = usePlaygroundScrollSync({
         enabled: isComparisonView,
     })
-    useScrollbarGutterVar(configPanelRef)
 
     const handleAddRunnable = useCallback(async () => {
         const selection = await openEntitySelector({
@@ -386,7 +384,7 @@ const PlaygroundMainView = ({
                                 ref={setConfigPanelRef}
                                 className={clsx([
                                     {
-                                        "ag-scroll-quiet ag-scroll-bleed grow w-full min-h-0 overflow-y-auto":
+                                        "ag-scroll-no-bar grow w-full min-h-0 overflow-y-auto":
                                             !isComparisonView,
                                         "grow w-full min-h-0 overflow-x-auto flex [&::-webkit-scrollbar]:w-0":
                                             isComparisonView,

web/oss/src/hooks/useScrollbarGutterVar.ts

@@ -937,16 +937,15 @@ body {
     background-color: var(--ag-scroll-thumb-hover);
 }
 
-/* Full-bleed rows inside a quiet scroller. Sticky headers must span the panel edge to edge,
-   but the reserved gutter cuts them short, so let the scroller's children stretch across it
-   and have the thumb overlay them. The gutter width is measured (it is platform-dependent,
-   and zero on overlay-scrollbar systems) and published as --ag-scroll-gutter by
-   useScrollbarGutterVar. */
-.ag-scroll-bleed {
-    overflow-x: hidden;
-}
-
-.ag-scroll-bleed > * {
-    width: calc(100% + var(--ag-scroll-gutter, 0px));
-    margin-inline-end: calc(-1 * var(--ag-scroll-gutter, 0px));
+/* Scrollers whose sticky headers have to reach the panel edge. A reserved gutter would cut
+   every header short by the scrollbar's width, and the content box is the only place the
+   browser will paint, so this panel keeps no scrollbar at all: full-width rows, and no shift
+   when the content grows past the viewport. */
+.ag-scroll-no-bar {
+    scrollbar-width: none;
+}
+
+.ag-scroll-no-bar::-webkit-scrollbar {
+    width: 0;
+    height: 0;
 }