Refine project column scrolling

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

@@ -89,6 +89,9 @@ const collectMetrics = async () => page.evaluate(() => {
     verticalGaps,
     projectRailOverflow: overflowState(rail),
     projectRailChildrenOverflow: overflowState(railChildren),
+    channelSidebarOverflow: overflowState(sidebar),
+    stageOverflow: overflowState(stage),
+    inspectorOverflow: overflowState(inspector),
     overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
     viewportWidth: window.innerWidth,
   }
@@ -213,6 +216,15 @@ if (!projectMetrics.projectRail || !projectMetrics.channelSidebar || !projectMet
     failures.push(`expected inspector to end at viewport right edge, got inspector.right=${projectMetrics.inspector.right}, viewport=${projectMetrics.viewportWidth}`)
   }
 }
+for (const [name, overflow] of [
+  ['channel sidebar', projectMetrics.channelSidebarOverflow],
+  ['stage', projectMetrics.stageOverflow],
+  ['inspector', projectMetrics.inspectorOverflow],
+]) {
+  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 (failures.length) {
   throw new Error(failures.join('\n'))

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

@@ -350,7 +350,8 @@
 
 .channel-sidebar {
   min-height: 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 16px;
   border-right: 1px solid var(--senlin-border);
   background: var(--senlin-panel);
@@ -549,7 +550,8 @@
 
 .inspector {
   min-height: 0;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 0 16px 16px;
   border-left: 1px solid var(--senlin-border);
   background: var(--senlin-panel);