From 6f896b4f944cc3a81dc40c6be8a60f52b77dbef7 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 20 May 2026 15:31:06 +0800
Subject: [PATCH] fix(style):  use --app-banner-height in scroller container

---
 src/global.less                               |  2 +-
 src/layouts/index.tsx                         | 43 +++++++++++--------
 src/pages/_components/styles/page-box.less    | 23 +++++++++-
 src/pages/benchmark/filters/index.tsx         |  2 +-
 .../cluster-management/cluster-create.tsx     |  4 +-
 src/pages/llmodels/filters/index.tsx          |  2 +-
 .../components/multiple-chat/index.tsx        |  2 +-
 src/pages/playground/speech/stt.tsx           |  2 +-
 src/pages/playground/style/ground-llm.less    |  5 ++-
 .../style/params-container.module.less        |  5 ++-
 src/pages/playground/style/play-ground.less   | 10 +++--
 11 files changed, 68 insertions(+), 32 deletions(-)

diff --git a/src/global.less b/src/global.less
index 7d9ac681..9d5306cf 100644
--- a/src/global.less
+++ b/src/global.less
@@ -6,6 +6,7 @@
 html {
   --page-header-height: 56px;
   --page-content-padding: 8px;
+  --app-banner-height: 0px;
   --color-text-light-1: rgba(255, 255, 255, 90%);
   --color-fill-1: var(--ant-color-bg-container);
   --color-scrollbar-thumb: rgba(193, 193, 193, 80%);
@@ -237,7 +238,6 @@ body {
 
   // ============== new theme style start ===============
   .ant-pro-layout {
-    background-color: var(--color-fill-1);
     height: 100%;
 
     .ant-pro-sider-footer {
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 34937170..9aa3ec64 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -425,24 +425,33 @@ export default (props: any) => {
           {...runtimeConfig}
           ErrorBoundary={ErrorBoundary}
         >
-          <PluginExtraFields name="GlobalLicenseBanner" />
-          <Exception
-            route={matchedRoute}
-            notFound={runtimeConfig?.notFound}
-            noFound={runtimeConfig?.noFound}
-            unAccessible={runtimeConfig?.unAccessible}
-            noAccessible={runtimeConfig?.noAccessible}
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100vh',
+              overflow: 'hidden'
+            }}
           >
-            {isNoContainerPage ? (
-              <Outlet />
-            ) : (
-              <PageContainerInner>
-                <div>
-                  <Outlet />
-                </div>
-              </PageContainerInner>
-            )}
-          </Exception>
+            <PluginExtraFields name="GlobalLicenseBanner" />
+            <Exception
+              route={matchedRoute}
+              notFound={runtimeConfig?.notFound}
+              noFound={runtimeConfig?.noFound}
+              unAccessible={runtimeConfig?.unAccessible}
+              noAccessible={runtimeConfig?.noAccessible}
+            >
+              {isNoContainerPage ? (
+                <Outlet />
+              ) : (
+                <PageContainerInner>
+                  <div>
+                    <Outlet />
+                  </div>
+                </PageContainerInner>
+              )}
+            </Exception>
+          </div>
           {NoResourceModal}
           {contextHolder}
         </ProLayout>
diff --git a/src/pages/_components/styles/page-box.less b/src/pages/_components/styles/page-box.less
index 86ae6a61..96df205b 100644
--- a/src/pages/_components/styles/page-box.less
+++ b/src/pages/_components/styles/page-box.less
@@ -1,4 +1,9 @@
 .containerWrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+
   :global {
     .ant-affix {
       top: 0 !important;
@@ -17,8 +22,24 @@
       font-size: 16px;
     }
 
+    .ant-pro-page-container {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    .ant-pro-grid-content,
+    .ant-pro-grid-content-children {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+    }
+
     .ant-pro-page-container-children-container {
-      height: calc(100vh - 16px);
+      flex: 1;
+      min-height: 0;
+      height: auto;
       display: flex;
       flex-direction: column;
       border: 1px solid var(--color-border-container);
diff --git a/src/pages/benchmark/filters/index.tsx b/src/pages/benchmark/filters/index.tsx
index 054fc23d..36cf668c 100644
--- a/src/pages/benchmark/filters/index.tsx
+++ b/src/pages/benchmark/filters/index.tsx
@@ -60,7 +60,7 @@ const FilterFormContent: React.FC<FilterFormContentProps> = forwardRef(
       <FilterForm
         ref={filterRef}
         width={232}
-        contentHeight={'calc(100vh - 122px)'}
+        contentHeight={'calc(100vh - var(--app-banner-height, 0px) - 122px)'}
         open={open}
         onClose={onClose}
         onClear={onClear}
diff --git a/src/pages/cluster-management/cluster-create.tsx b/src/pages/cluster-management/cluster-create.tsx
index a84191af..35e926ba 100644
--- a/src/pages/cluster-management/cluster-create.tsx
+++ b/src/pages/cluster-management/cluster-create.tsx
@@ -331,7 +331,9 @@ const ClusterCreate: React.FC<{
       )}
       <ColumnWrapper
         maxHeight={
-          isAddWorkerStep ? 'calc(100vh - 200px)' : 'calc(100vh - 150px)'
+          isAddWorkerStep
+            ? 'calc(100vh - var(--app-banner-height, 0px) - 200px)'
+            : 'calc(100vh - var(--app-banner-height, 0px) - 150px)'
         }
         styles={{
           container: { paddingTop: 16, paddingBottom: 16 }
diff --git a/src/pages/llmodels/filters/index.tsx b/src/pages/llmodels/filters/index.tsx
index ae32f717..aa731e01 100644
--- a/src/pages/llmodels/filters/index.tsx
+++ b/src/pages/llmodels/filters/index.tsx
@@ -50,7 +50,7 @@ const FilterFormContent: React.FC<FilterFormContentProps> = forwardRef(
       <FilterForm
         ref={filterRef}
         width={232}
-        contentHeight={'calc(100vh - 74px)'}
+        contentHeight={'calc(100vh - var(--app-banner-height, 0px) - 74px)'}
         open={open}
         onClose={onClose}
         onClear={onClear}
diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx
index 3ce8922b..0c8c6085 100644
--- a/src/pages/playground/components/multiple-chat/index.tsx
+++ b/src/pages/playground/components/multiple-chat/index.tsx
@@ -39,7 +39,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
   const modelsCounterMap = useRef<Record<string, number>>({});
   const modelRefs = useRef<any>({});
   const chatListScrollRef = useRef<any>(null);
-  const boxHeight = `calc(100vh - ${HEADER_HEIGHT}px - 2px - var(--page-header-height) - var(--page-content-padding) - var(--page-content-padding))`;
+  const boxHeight = `calc(100vh - var(--app-banner-height, 0px) - ${HEADER_HEIGHT}px - 2px - var(--page-header-height) - var(--page-content-padding) - var(--page-content-padding))`;
   const [actions, setActions] = useState<MessageItemAction[]>([
     'upload',
     'delete',
diff --git a/src/pages/playground/speech/stt.tsx b/src/pages/playground/speech/stt.tsx
index 5f63121e..38119e35 100644
--- a/src/pages/playground/speech/stt.tsx
+++ b/src/pages/playground/speech/stt.tsx
@@ -300,7 +300,7 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
     <div
       className="ground-left-wrapper"
       style={{
-        height: `calc(100vh - ${HEADER_HEIGHT}px)`
+        height: `calc(100vh - var(--app-banner-height, 0px) - ${HEADER_HEIGHT}px)`
       }}
     >
       <div className="ground-left">
diff --git a/src/pages/playground/style/ground-llm.less b/src/pages/playground/style/ground-llm.less
index 15917c79..d50ad4c7 100644
--- a/src/pages/playground/style/ground-llm.less
+++ b/src/pages/playground/style/ground-llm.less
@@ -10,8 +10,9 @@
     flex-direction: column;
     position: relative;
     height: calc(
-      100vh - @HEADER_HEIGHT - 4px - var(--page-content-padding) -
-        var(--page-content-padding) - var(--page-header-height)
+      100vh - var(--app-banner-height, 0px) - @HEADER_HEIGHT - 4px -
+        var(--page-content-padding) - var(--page-content-padding) -
+        var(--page-header-height)
     );
     width: calc(100% - 390px);
 
diff --git a/src/pages/playground/style/params-container.module.less b/src/pages/playground/style/params-container.module.less
index 2386f610..2342c696 100644
--- a/src/pages/playground/style/params-container.module.less
+++ b/src/pages/playground/style/params-container.module.less
@@ -6,8 +6,9 @@
   border-left: 1px solid var(--ant-color-split);
   transition: width 0.3s ease;
   height: calc(
-    100vh - @HEADER_HEIGHT - 2px - var(--page-content-padding) -
-      var(--page-content-padding) - var(--page-header-height)
+    100vh - var(--app-banner-height, 0px) - @HEADER_HEIGHT - 2px -
+      var(--page-content-padding) - var(--page-content-padding) -
+      var(--page-header-height)
   );
   padding-top: 16px;
   display: flex;
diff --git a/src/pages/playground/style/play-ground.less b/src/pages/playground/style/play-ground.less
index 8facae22..a751277b 100644
--- a/src/pages/playground/style/play-ground.less
+++ b/src/pages/playground/style/play-ground.less
@@ -40,8 +40,9 @@
   .params {
     overflow: hidden;
     height: calc(
-      100vh - var(--page-header-height) - var(--page-content-padding) -
-        var(--page-content-padding) - @HEADER_HEIGHT
+      100vh - var(--app-banner-height, 0px) - var(--page-header-height) -
+        var(--page-content-padding) - var(--page-content-padding) -
+        @HEADER_HEIGHT
     );
 
     .collapse {
@@ -74,8 +75,9 @@
     .ant-divider {
       margin: 0;
       height: calc(
-        100vh - var(--page-header-height) - 2px - var(--page-content-padding) -
-          var(--page-content-padding) - @HEADER_HEIGHT
+        100vh - var(--app-banner-height, 0px) - var(--page-header-height) -
+          2px - var(--page-content-padding) - var(--page-content-padding) -
+          @HEADER_HEIGHT
       );
     }
   }