fix(style): use --app-banner-height in scroller container

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 {

src/layouts/index.tsx

@@ -425,24 +425,33 @@ export default (props: any) => {
           {...runtimeConfig}
           ErrorBoundary={ErrorBoundary}
         >
-          <PluginExtraFields name="GlobalLicenseBanner" />
+          <div
-          <Exception
+            style={{
-            route={matchedRoute}
+              display: 'flex',
-            notFound={runtimeConfig?.notFound}
+              flexDirection: 'column',
-            noFound={runtimeConfig?.noFound}
+              height: '100vh',
-            unAccessible={runtimeConfig?.unAccessible}
+              overflow: 'hidden'
-            noAccessible={runtimeConfig?.noAccessible}
+            }}
           >
-            {isNoContainerPage ? (
+            <PluginExtraFields name="GlobalLicenseBanner" />
-              <Outlet />
+            <Exception
-            ) : (
+              route={matchedRoute}
-              <PageContainerInner>
+              notFound={runtimeConfig?.notFound}
-                <div>
+              noFound={runtimeConfig?.noFound}
-                  <Outlet />
+              unAccessible={runtimeConfig?.unAccessible}
-                </div>
+              noAccessible={runtimeConfig?.noAccessible}
-              </PageContainerInner>
+            >
-            )}
+              {isNoContainerPage ? (
-          </Exception>
+                <Outlet />
+              ) : (
+                <PageContainerInner>
+                  <div>
+                    <Outlet />
+                  </div>
+                </PageContainerInner>
+              )}
+            </Exception>
+          </div>
           {NoResourceModal}
           {contextHolder}
         </ProLayout>

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);

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}

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 }

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}

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',

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">

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) -
+      100vh - var(--app-banner-height, 0px) - @HEADER_HEIGHT - 4px -
-        var(--page-content-padding) - var(--page-header-height)
+        var(--page-content-padding) - var(--page-content-padding) -
+        var(--page-header-height)
     );
     width: calc(100% - 390px);
 

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) -
+    100vh - var(--app-banner-height, 0px) - @HEADER_HEIGHT - 2px -
-      var(--page-content-padding) - var(--page-header-height)
+      var(--page-content-padding) - var(--page-content-padding) -
+      var(--page-header-height)
   );
   padding-top: 16px;
   display: flex;

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) -
+      100vh - var(--app-banner-height, 0px) - var(--page-header-height) -
-        var(--page-content-padding) - @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) -
+        100vh - var(--app-banner-height, 0px) - var(--page-header-height) -
-          var(--page-content-padding) - @HEADER_HEIGHT
+          2px - var(--page-content-padding) - var(--page-content-padding) -
+          @HEADER_HEIGHT
       );
     }
   }