From aa2bf9b88f36b37c635689fa4ab10e34ffb72ed3 Mon Sep 17 00:00:00 2001
From: yanweidong <david.yan@qq.com>
Date: Mon, 20 Jul 2026 10:13:05 +0800
Subject: [PATCH] Hide React prototype project rail scrollbars

---
 .../scripts/visual-check.mjs                  | 25 +++++++++++++++++++
 prototypes/senlinai-acro-react/src/App.css    |  8 ++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/prototypes/senlinai-acro-react/scripts/visual-check.mjs b/prototypes/senlinai-acro-react/scripts/visual-check.mjs
index e10c7e2..c42d844 100644
--- a/prototypes/senlinai-acro-react/scripts/visual-check.mjs
+++ b/prototypes/senlinai-acro-react/scripts/visual-check.mjs
@@ -34,6 +34,7 @@ const metrics = await page.evaluate(() => {
   const statusbar = document.querySelector('.statusbar')
   const search = document.querySelector('.global-search')
   const rail = document.querySelector('.project-rail')
+  const railChildren = rail?.querySelector('.arco-layout-sider-children')
   const dashboard = document.querySelector('.dashboard-button')
   const project = document.querySelector('.project-button')
   const create = document.querySelector('.create-project')
@@ -52,6 +53,16 @@ const metrics = await page.evaluate(() => {
       }
     : null
   const verticalGaps = itemRects.slice(1).map((item, index) => item.top - (itemRects[index].top + itemRects[index].height))
+  const overflowState = (node) => node
+    ? {
+        clientWidth: node.clientWidth,
+        scrollWidth: node.scrollWidth,
+        clientHeight: node.clientHeight,
+        scrollHeight: node.scrollHeight,
+        overflowX: getComputedStyle(node).overflowX,
+        overflowY: getComputedStyle(node).overflowY,
+      }
+    : null
 
   return {
     statusbarHeight: statusbar?.getBoundingClientRect().height,
@@ -63,6 +74,8 @@ const metrics = await page.evaluate(() => {
     firstProjectBadge: rect(firstBadge),
     horizontalInsets,
     verticalGaps,
+    projectRailOverflow: overflowState(rail),
+    projectRailChildrenOverflow: overflowState(railChildren),
     overflowX: document.documentElement.scrollWidth > document.documentElement.clientWidth,
   }
 })
@@ -87,6 +100,18 @@ if (!metrics.horizontalInsets || Math.abs(metrics.horizontalInsets.left - metric
 if (metrics.verticalGaps.some((gap) => gap !== 12)) {
   failures.push(`expected all project rail vertical gaps to be 12px, got ${JSON.stringify(metrics.verticalGaps)}`)
 }
+for (const [name, overflow] of [
+  ['project rail', metrics.projectRailOverflow],
+  ['project rail children', metrics.projectRailChildrenOverflow],
+]) {
+  if (
+    !overflow ||
+    overflow.overflowX !== 'hidden' ||
+    overflow.overflowY !== 'hidden'
+  ) {
+    failures.push(`expected ${name} scrollbars to be hidden with no overflow, got ${JSON.stringify(overflow)}`)
+  }
+}
 if (
   !metrics.firstProjectBadge ||
   metrics.firstProjectBadge.right > metrics.projectRailWidth ||
diff --git a/prototypes/senlinai-acro-react/src/App.css b/prototypes/senlinai-acro-react/src/App.css
index 6752b61..fd6640c 100644
--- a/prototypes/senlinai-acro-react/src/App.css
+++ b/prototypes/senlinai-acro-react/src/App.css
@@ -281,17 +281,21 @@
   flex-direction: column;
   align-items: center;
   gap: 12px;
-  padding: 14px 24px;
+  overflow: hidden;
   border-right: 1px solid var(--senlin-border);
   background: var(--senlin-panel);
 }
 
 .project-rail .arco-layout-sider-children {
-  width: 100%;
+  width: calc(100% - 1px);
+  height: 100%;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
+  overflow: hidden !important;
+  padding: 14px 24px;
 }
 
 .project-stack,