diff --git a/frontend-web/src/components/workspace/workspace-container.tsx b/frontend-web/src/components/workspace/workspace-container.tsx index de73a9f5..d51c149f 100644 --- a/frontend-web/src/components/workspace/workspace-container.tsx +++ b/frontend-web/src/components/workspace/workspace-container.tsx @@ -20,8 +20,11 @@ export function WorkspaceContainer({ children, ...props }: React.ComponentProps<"div">) { + // h-full 而非 h-screen:本容器恒在 WorkspaceRoutes 的 SidebarInset(flex-1,确定高度)下, + // h-full 既跟随容器高度(无界等嵌套不再锁死整屏),又修掉原 h-screen=100vh 比可用区域 + // 高出一个页头高度的溢出。 return ( -
+
{children}
); diff --git a/frontend-web/src/pages/PageRoutes.tsx b/frontend-web/src/pages/PageRoutes.tsx index db4ed060..41f88499 100644 --- a/frontend-web/src/pages/PageRoutes.tsx +++ b/frontend-web/src/pages/PageRoutes.tsx @@ -18,8 +18,11 @@ function PageLayout() { const { theme } = useTheme(); const isDark = theme === "dark"; + // h-full(100%)而非 h-screen(100vh):配合 globals.css 的 html/body/#root height:100% + // 高度链,根布局跟随容器高度。全屏下 100% 解析到视口,与 h-screen 等价;无界等嵌套 + // 下容器不占满整屏时,高度才能正确收缩而非锁死整屏。 return ( -
+
{sidebarEnabled &&
}
{sidebarEnabled && ( diff --git a/frontend-web/src/pages/WorkspaceRoutes.tsx b/frontend-web/src/pages/WorkspaceRoutes.tsx index f70d42a1..d2c565b1 100644 --- a/frontend-web/src/pages/WorkspaceRoutes.tsx +++ b/frontend-web/src/pages/WorkspaceRoutes.tsx @@ -71,15 +71,27 @@ export function WorkspaceLayout({ return ( diff --git a/frontend-web/src/styles/globals.css b/frontend-web/src/styles/globals.css index 4ab3e054..cb36f5ea 100644 --- a/frontend-web/src/styles/globals.css +++ b/frontend-web/src/styles/globals.css @@ -324,6 +324,18 @@ @apply bg-background text-foreground; } + /* 打通高度链:html/body/#root 取满父级高度,使下游用 h-full(100%) 的根布局 + (PageRoutes 的 PageLayout)跟随容器尺寸而非视口。 + - 全屏:100% 逐级解析到视口,与原先的 h-screen 等价,无视觉变化; + - 无界(wujie)等嵌套:wujie 会把子应用的 html/body 选择器作用到 + 容器,于是高度收缩到容器而非整屏 —— 这正是「高度对齐容器」所需。 + 只设 height、不设 overflow,因此不影响 Landing 等需要自然滚动的页面。 */ + html, + body, + #root { + height: 100%; + } + [data-sidebar="menu-button"][data-active="true"] { box-shadow: inset 3px 0 0 var(--primary); font-weight: 600;