Bugfix: models configuration button is overlapped in small screens

Author: xuyaqist

frontend/app/[locale]/models/components/modelConfig.tsx

@@ -846,40 +846,82 @@ export const ModelConfigSection = forwardRef<
             justifyContent: "flex-start",
             paddingRight: 12,
             marginLeft: "4px",
-            height: LAYOUT_CONFIG.BUTTON_AREA_HEIGHT,
+            minHeight: LAYOUT_CONFIG.BUTTON_AREA_HEIGHT,
           }}
         >
-          <Space size={10}>
-            <Button type="primary" size="middle" onClick={handleSyncModels}>
-              <SyncOutlined />{" "}
-              {t("modelConfig.button.syncModelEngine")}
-            </Button>
-            <Button
-              type="primary"
-              size="middle"
-              icon={<PlusOutlined />}
-              onClick={() => setIsAddModalOpen(true)}
-            >
-              {t("modelConfig.button.addCustomModel")}
-            </Button>
-            <Button
-              type="primary"
-              size="middle"
-              icon={<EditOutlined />}
-              onClick={() => setIsDeleteModalOpen(true)}
-            >
-              {t("modelConfig.button.editCustomModel")}
-            </Button>
-            <Button
-              type="primary"
-              size="middle"
-              icon={<SafetyCertificateOutlined />}
-              onClick={verifyModels}
-              loading={isVerifying}
-            >
-              {t("modelConfig.button.checkConnectivity")}
-            </Button>
-          </Space>
+          <Row gutter={[8, 8]} style={{ width: "100%" }}>
+            <Col xs={24} sm={12} md={6} lg={6} xl={6}>
+              <Button 
+                type="primary" 
+                size="middle" 
+                onClick={handleSyncModels}
+                style={{ width: "100%" }}
+                block
+              >
+                <SyncOutlined />
+                <span style={{ marginLeft: 4 }}>
+                  <span className="hidden xl:inline button-text-full">
+                    {t("modelConfig.button.syncModelEngine")}
+                  </span>
+                  <span className="xl:hidden button-text-short">
+                    {t("modelConfig.button.sync")}
+                  </span>
+                </span>
+              </Button>
+            </Col>
+            <Col xs={24} sm={12} md={6} lg={6} xl={6}>
+              <Button
+                type="primary"
+                size="middle"
+                icon={<PlusOutlined />}
+                onClick={() => setIsAddModalOpen(true)}
+                style={{ width: "100%" }}
+                block
+              >
+                <span className="hidden xl:inline button-text-full">
+                  {t("modelConfig.button.addCustomModel")}
+                </span>
+                <span className="xl:hidden button-text-short">
+                  {t("modelConfig.button.add")}
+                </span>
+              </Button>
+            </Col>
+            <Col xs={24} sm={12} md={6} lg={6} xl={6}>
+              <Button
+                type="primary"
+                size="middle"
+                icon={<EditOutlined />}
+                onClick={() => setIsDeleteModalOpen(true)}
+                style={{ width: "100%" }}
+                block
+              >
+                <span className="hidden xl:inline button-text-full">
+                  {t("modelConfig.button.editCustomModel")}
+                </span>
+                <span className="xl:hidden button-text-short">
+                  {t("modelConfig.button.edit")}
+                </span>
+              </Button>
+            </Col>
+            <Col xs={24} sm={12} md={6} lg={6} xl={6}>
+              <Button
+                type="primary"
+                size="middle"
+                icon={<SafetyCertificateOutlined />}
+                onClick={verifyModels}
+                loading={isVerifying}
+                style={{ width: "100%" }}
+                block
+              >
+                <span className="hidden xl:inline button-text-full">
+                  {t("modelConfig.button.checkConnectivity")}
+                </span>
+                <span className="xl:hidden button-text-short">
+                  {t("modelConfig.button.check")}
+                </span>
+              </Button>
+            </Col>
+          </Row>
         </div>
 
         <div

frontend/public/locales/en/common.json

@@ -699,6 +699,10 @@
   "modelConfig.button.addCustomModel": "Add Model",
   "modelConfig.button.editCustomModel": "Edit or Delete Model",
   "modelConfig.button.checkConnectivity": "Check Model Connectivity",
+  "modelConfig.button.sync": "Sync",
+  "modelConfig.button.add": "Add",
+  "modelConfig.button.edit": "Edit",
+  "modelConfig.button.check": "Check",
   "modelConfig.slider.chunkingSize": "Chunk Size",
   "modelConfig.slider.expectedChunkSize": "Expected Chunk Size",
   "modelConfig.slider.maximumChunkSize": "Maximum Chunk Size",

frontend/public/locales/zh/common.json

@@ -699,6 +699,10 @@
   "modelConfig.button.addCustomModel": "添加模型",
   "modelConfig.button.editCustomModel": "修改或删除模型",
   "modelConfig.button.checkConnectivity": "检查模型连通性",
+  "modelConfig.button.sync": "同步",
+  "modelConfig.button.add": "添加",
+  "modelConfig.button.edit": "修改",
+  "modelConfig.button.check": "检查",
   "modelConfig.slider.chunkingSize": "文档切片大小",
   "modelConfig.slider.expectedChunkSize": "期望切片大小",
   "modelConfig.slider.maximumChunkSize": "最大切片大小",

frontend/styles/globals.css

@@ -305,4 +305,23 @@
 .kb-embedding-warning .ant-modal {
   width: max-content;
   min-width: 0;
+}
+
+/* Responsive button text - global utility */
+@media (max-width: 1279px) {
+  .button-text-full {
+    display: none !important;
+  }
+  .button-text-short {
+    display: inline !important;
+  }
+}
+
+@media (min-width: 1280px) {
+  .button-text-full {
+    display: inline !important;
+  }
+  .button-text-short {
+    display: none !important;
+  }
 }