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

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

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;

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