feat: Align the cards on the Model Providers page #2111 (#2125)

### What problem does this PR solve?

feat: Align the cards on the Model Providers page #2111

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/user-setting/setting-model/index.less

@@ -17,6 +17,9 @@
     border: 1px solid #eaecf0;
     background: #e3f0ff;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    :global(.ant-card-body) {
+      padding: 10px 24px;
+    }
   }
   .addedCard {
     border-radius: 18px;
@@ -24,4 +27,12 @@
     background: #e6e7eb;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
+  .modelDivider {
+    margin: 0;
+  }
+  .modelTags {
+    height: 40px;
+    overflow: hidden;
+    font-size: 8px;
+  }
 }

web/src/pages/user-setting/setting-model/index.tsx

@@ -286,20 +286,22 @@ const UserSettingModel = () => {
             md: 3,
             lg: 4,
             xl: 4,
-            xxl: 8,
+            xxl: 10,
           }}
           dataSource={factoryList}
           renderItem={(item) => (
             <List.Item>
               <Card className={styles.toBeAddedCard}>
-                <Flex vertical gap={'large'}>
+                <Flex vertical gap={'middle'}>
                   <LlmIcon name={item.name} />
                   <Flex vertical gap={'middle'}>
-                    <b>{item.name}</b>
-                    <Text>{item.tags}</Text>
+                    <b>
+                      <Text ellipsis={{ tooltip: item.name }}>{item.name}</Text>
+                    </b>
+                    <Text className={styles.modelTags}>{item.tags}</Text>
                   </Flex>
                 </Flex>
-                <Divider></Divider>
+                <Divider className={styles.modelDivider}></Divider>
                 <Button type="link" onClick={() => handleAddModel(item.name)}>
                   {t('addTheModel')}
                 </Button>