From 43d4989f1ed73e369a9aa79d25603cf3a190fbf1 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Wed, 19 Aug 2026 11:21:31 +0700
Subject: [PATCH] fix(workspace): allow collapsing lane detail in single-pane
 layout, fix invisible scrollbar track
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Detail toggle was hidden and info forced-visible whenever layout was
single-pane; user needed the ability to hide it too. Scrollbar track
color matched the page background (surface-0), making it invisible —
moved it to surface-2 so the track reads against any surface.
---
 client/src/index.css           |  4 ++--
 client/src/pages/Workspace.tsx | 30 ++++++++++++++----------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/client/src/index.css b/client/src/index.css
index c3dbba1..f9baf14 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -75,7 +75,7 @@
 @layer base {
   * {
     scrollbar-width: thin;
-    scrollbar-color: rgb(var(--border)) rgb(var(--surface-0));
+    scrollbar-color: rgb(var(--border)) rgb(var(--surface-2));
   }
 
   *::-webkit-scrollbar {
@@ -84,7 +84,7 @@
   }
 
   *::-webkit-scrollbar-track {
-    background: rgb(var(--surface-0));
+    background: rgb(var(--surface-2));
   }
 
   *::-webkit-scrollbar-thumb {
diff --git a/client/src/pages/Workspace.tsx b/client/src/pages/Workspace.tsx
index 0cb083f..c36c1f5 100644
--- a/client/src/pages/Workspace.tsx
+++ b/client/src/pages/Workspace.tsx
@@ -199,11 +199,11 @@ export function Workspace() {
 
   // Split view state
   const [splitView, setSplitView] = useState<SplitViewState>(() => readSplitViewState());
-  // Info block (pickers, LaneCard, PipelineMap, proof gallery) is always shown
-  // in single-pane view; in split view it starts collapsed so tall content
-  // never crowds the pane grid, and the user expands it on demand.
-  const [infoExpanded, setInfoExpanded] = useState(false);
-  const showInfo = splitView.layout === 1 || infoExpanded;
+  // Info block (pickers, LaneCard, PipelineMap, proof gallery) starts shown in
+  // single-pane view and collapsed in split view, but the toggle below can
+  // override that in either mode — the user decides, not the layout.
+  const [infoExpanded, setInfoExpanded] = useState(() => splitView.layout === 1);
+  const showInfo = infoExpanded;
 
   const setLayout = useCallback((layout: SplitLayout) => {
     setSplitView((prev) => {
@@ -557,17 +557,15 @@ export function Workspace() {
                 })}
               </span>
               <div className="flex items-center gap-2">
-                {splitView.layout !== 1 && (
-                  <button
-                    type="button"
-                    data-testid="lane-detail-toggle"
-                    aria-expanded={infoExpanded}
-                    onClick={() => setInfoExpanded((v) => !v)}
-                    className="rounded border border-border-light px-2 py-1 text-xs text-fg-secondary transition-colors hover:text-fg-primary"
-                  >
-                    {infoExpanded ? tLanes("laneDetail.hide") : tLanes("laneDetail.show")}
-                  </button>
-                )}
+                <button
+                  type="button"
+                  data-testid="lane-detail-toggle"
+                  aria-expanded={infoExpanded}
+                  onClick={() => setInfoExpanded((v) => !v)}
+                  className="rounded border border-border-light px-2 py-1 text-xs text-fg-secondary transition-colors hover:text-fg-primary"
+                >
+                  {infoExpanded ? tLanes("laneDetail.hide") : tLanes("laneDetail.show")}
+                </button>
                 <SplitLayoutToggle splitView={splitView} setLayout={setLayout} />
               </div>
             </div>