Show project scrollbars on hover

apps/senlinai-acro-react/scripts/visual-check.mjs

@@ -62,6 +62,7 @@ const collectMetrics = async () => page.evaluate(() => {
         scrollHeight: node.scrollHeight,
         overflowX: getComputedStyle(node).overflowX,
         overflowY: getComputedStyle(node).overflowY,
+        scrollbarWidth: getComputedStyle(node).scrollbarWidth,
       }
     : null
 
@@ -110,13 +111,20 @@ await page.waitForTimeout(500)
 await page.screenshot({ path: 'test-results/project-react-acro-light.png', fullPage: true })
 const projectMetrics = await collectMetrics()
 
+await page.locator('.channel-sidebar').hover()
+const channelSidebarHoverMetrics = await collectMetrics()
+await page.locator('.stage').hover()
+const stageHoverMetrics = await collectMetrics()
+await page.locator('.inspector').hover()
+const inspectorHoverMetrics = await collectMetrics()
+
 await page.locator('.topbar-actions .arco-btn').first().click()
 await page.screenshot({ path: 'test-results/project-react-acro-dark.png', fullPage: true })
 
 await browser.close()
 await server.close()
 
-console.log(JSON.stringify({ workspaceMetrics, projectMetrics, errors }, null, 2))
+console.log(JSON.stringify({ workspaceMetrics, projectMetrics, channelSidebarHoverMetrics, stageHoverMetrics, inspectorHoverMetrics, errors }, null, 2))
 
 const failures = []
 const metrics = workspaceMetrics
@@ -224,6 +232,18 @@ for (const [name, overflow] of [
   if (!overflow || overflow.overflowX !== 'hidden' || overflow.overflowY !== 'auto') {
     failures.push(`expected ${name} to hide horizontal scrollbars and show vertical scrollbars only when needed, got ${JSON.stringify(overflow)}`)
   }
+  if (overflow?.scrollbarWidth !== 'none') {
+    failures.push(`expected ${name} scrollbar to be hidden until hover, got ${JSON.stringify(overflow)}`)
+  }
+}
+for (const [name, overflow] of [
+  ['channel sidebar hover', channelSidebarHoverMetrics.channelSidebarOverflow],
+  ['stage hover', stageHoverMetrics.stageOverflow],
+  ['inspector hover', inspectorHoverMetrics.inspectorOverflow],
+]) {
+  if (overflow?.scrollbarWidth !== 'thin') {
+    failures.push(`expected ${name} scrollbar to appear on hover, got ${JSON.stringify(overflow)}`)
+  }
 }
 
 if (failures.length) {

apps/senlinai-acro-react/src/App.css

@@ -352,6 +352,8 @@
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-width: none;
+  scrollbar-color: color-mix(in srgb, var(--senlin-muted) 45%, transparent) transparent;
   padding: 16px;
   border-right: 1px solid var(--senlin-border);
   background: var(--senlin-panel);
@@ -435,6 +437,10 @@
 .stage {
   min-width: 0;
   overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: none;
+  scrollbar-color: color-mix(in srgb, var(--senlin-muted) 45%, transparent) transparent;
   padding: 16px;
   background: var(--senlin-bg);
 }
@@ -552,11 +558,46 @@
   min-height: 0;
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-width: none;
+  scrollbar-color: color-mix(in srgb, var(--senlin-muted) 45%, transparent) transparent;
   padding: 0 16px 16px;
   border-left: 1px solid var(--senlin-border);
   background: var(--senlin-panel);
 }
 
+.channel-sidebar:hover,
+.stage:hover,
+.inspector:hover {
+  scrollbar-width: thin;
+}
+
+.channel-sidebar::-webkit-scrollbar,
+.stage::-webkit-scrollbar,
+.inspector::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.channel-sidebar:hover::-webkit-scrollbar,
+.stage:hover::-webkit-scrollbar,
+.inspector:hover::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.channel-sidebar::-webkit-scrollbar-thumb,
+.stage::-webkit-scrollbar-thumb,
+.inspector::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--senlin-muted) 45%, transparent);
+}
+
+.channel-sidebar::-webkit-scrollbar-track,
+.stage::-webkit-scrollbar-track,
+.inspector::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .inspector .arco-tabs-header {
   margin-bottom: 12px;
 }