style: Improve Start page grid size for XXL screen

Author: yomybaby

react/src/pages/StartPage.tsx

@@ -9,7 +9,7 @@ import { filterEmptyItem } from '../helper';
 import { useSuspendedBackendaiClient, useWebUINavigate } from '../hooks';
 import { SessionLauncherFormValue } from './SessionLauncherPage';
 import { AppstoreAddOutlined, FolderAddOutlined } from '@ant-design/icons';
-import { Card, Col, Row } from 'antd';
+import { Card, Col, Grid, Row } from 'antd';
 import _ from 'lodash';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -160,6 +160,8 @@ const StartPage: React.FC = () => {
       !_.includes(inactiveList, item.requiredMenuKey),
   );
 
+  Grid.useBreakpoint();
+
   return (
     <Flex direction="column" gap={'md'} align="stretch">
       {/* <BAIBoard
@@ -178,7 +180,7 @@ const StartPage: React.FC = () => {
       <Row gutter={[16, 16]}>
         {_.map(items, (item, idx) => {
           return (
-            <Col key={item.id} xs={24} md={12} xl={6}>
+            <Col key={item.id} xs={24} md={12} xl={6} xxl={4}>
               <Card
                 style={{ height: 340 }}
                 styles={{

resources/theme.json

@@ -9,7 +9,10 @@
       "colorInfo": "#028DF2",
       "colorError": "#FF4D4F",
       "colorSuccess": "#00BD9B",
-      "colorFillSecondary": "#D9D9D9"
+      "colorFillSecondary": "#D9D9D9",
+      "screenXLMax": 1919,
+      "screenXXLMin": 1920,
+      "screenXXL": 1920
     },
     "components": {
       "Tag": {
@@ -34,7 +37,10 @@
       "colorInfo": "#009BDD",
       "colorError": "#DC4446",
       "colorSuccess": "#03A487",
-      "colorFillSecondary": "#262626"
+      "colorFillSecondary": "#262626",
+      "screenXLMax": 1919,
+      "screenXXLMin": 1920,
+      "screenXXL": 1920
     },
     "components": {
       "Tag": {