diff --git a/apps/senlinai-acro-react/scripts/visual-check.mjs b/apps/senlinai-acro-react/scripts/visual-check.mjs index 45fd731..37b374d 100644 --- a/apps/senlinai-acro-react/scripts/visual-check.mjs +++ b/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')) diff --git a/apps/senlinai-acro-react/src/App.css b/apps/senlinai-acro-react/src/App.css index b69b3f8..3fb9d65 100644 --- a/apps/senlinai-acro-react/src/App.css +++ b/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);