From 683db5b3ba3cfe83e5f5574075ebc1b657d42de1 Mon Sep 17 00:00:00 2001
From: Rairn <958414905@qq.com>
Date: Sun, 23 Apr 2023 18:28:37 +0800
Subject: [PATCH] fix(collection-manager): fix table layout

---
 .../Configuration/CollectionFields.tsx        | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/packages/core/client/src/collection-manager/Configuration/CollectionFields.tsx b/packages/core/client/src/collection-manager/Configuration/CollectionFields.tsx
index a8ceb5bc4..4c8274c69 100644
--- a/packages/core/client/src/collection-manager/Configuration/CollectionFields.tsx
+++ b/packages/core/client/src/collection-manager/Configuration/CollectionFields.tsx
@@ -24,11 +24,10 @@ import { OverridingCollectionField } from './OverridingCollectionField';
 import { SyncFieldsAction } from './SyncFieldsAction';
 import { ViewCollectionField } from './ViewInheritedField';
 import { collection } from './schemas/collectionFields';
-const CELL_WIDTH = 200;
 
 const indentStyle = css`
   .ant-table {
-    margin-left: -7px !important;
+    margin-left: -16px !important;
   }
 `;
 const rowStyle = css`
@@ -36,6 +35,25 @@ const rowStyle = css`
     background-color: white;
   }
 `;
+const tableContainer = css`
+  tr {
+    display: flex;
+  }
+  td,
+  th {
+    flex: 2;
+    width: 0;
+    &:last-child {
+      flex: 1;
+    }
+  }
+  .ant-table-selection-column,
+  .ant-table-row-expand-icon-cell {
+    flex-basis: 50px !important;
+    min-width: 50px;
+    flex: 0;
+  }
+`;
 
 const titlePrompt = 'Default title for each record';
 // 只有下面类型的字段才可以设置为标题字段
@@ -67,18 +85,15 @@ const CurrentFields = (props) => {
     {
       dataIndex: 'name',
       title: t('Field name'),
-      width: CELL_WIDTH + 20,
     },
     {
       dataIndex: 'interface',
       title: t('Field interface'),
-      width: CELL_WIDTH,
       render: (value) => <Tag>{compile(getInterface(value)?.title)}</Tag>,
     },
     {
       dataIndex: 'titleField',
       title: t('Title field'),
-      width: CELL_WIDTH,
       render: function Render(_, record) {
         const handleChange = (checked) => {
           setLoadingRecord(record);
@@ -112,7 +127,6 @@ const CurrentFields = (props) => {
     {
       dataIndex: 'actions',
       title: t('Actions'),
-      width: CELL_WIDTH,
       render: (_, record) => {
         const deleteProps = {
           confirm: {
@@ -177,18 +191,15 @@ const InheritFields = (props) => {
     {
       dataIndex: 'name',
       title: t('Field name'),
-      width: CELL_WIDTH + 20,
     },
     {
       dataIndex: 'interface',
       title: t('Field interface'),
-      width: CELL_WIDTH,
       render: (value) => <Tag>{compile(getInterface(value)?.title)}</Tag>,
     },
     {
       dataIndex: 'titleField',
       title: t('Title field'),
-      width: CELL_WIDTH,
       render(_, record) {
         const handleChange = (checked) => {
           setLoadingRecord(record);
@@ -222,7 +233,6 @@ const InheritFields = (props) => {
     {
       dataIndex: 'actions',
       title: t('Actions'),
-      width: CELL_WIDTH,
       render: function Render(_, record) {
         const overrideProps = {
           type: 'primary',
@@ -275,34 +285,27 @@ export const CollectionFields = (props) => {
         <div
           className={css`
             font-weight: 500;
-            white-space: nowrap;
-            width: 100px;
           `}
         >
           {value}
         </div>
       ),
-      // width: CELL_WIDTH,
     },
     {
       dataIndex: 'name',
       title: t('Field name'),
-      width: CELL_WIDTH + 20,
     },
     {
       dataIndex: 'interface',
       title: t('Field interface'),
-      width: CELL_WIDTH,
     },
     {
       dataIndex: 'titleField',
       title: t('Title field'),
-      width: CELL_WIDTH,
     },
     {
       dataIndex: 'actions',
       title: t('Actions'),
-      width: CELL_WIDTH,
     },
   ];
 
@@ -420,6 +423,7 @@ export const CollectionFields = (props) => {
             columns={columns}
             dataSource={dataSource.filter((d) => d.fields.length)}
             pagination={false}
+            className={tableContainer}
             expandable={{
               defaultExpandAllRows: true,
               expandedRowClassName: () => rowStyle,