fix: ui isssues

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/grid/Grid.tsx

@@ -224,6 +224,7 @@ const AttuGrid: FC<AttuGridType> = props => {
           handleSort={handleSort}
           order={order}
           orderBy={orderBy}
+          rowHeight={rowHeight}
           rowDecorator={rowDecorator}
         ></Table>
         {rowCount && showPagination ? (

client/src/components/grid/Table.tsx

@@ -43,6 +43,7 @@ const EnhancedTable: FC<TableType> = props => {
     order,
     orderBy,
     rowDecorator = () => ({}),
+    rowHeight = 41,
   } = props;
 
   const hasData = rows && rows.length > 0;
@@ -126,6 +127,7 @@ const EnhancedTable: FC<TableType> = props => {
                         <TableCell
                           padding="checkbox"
                           sx={theme => ({
+                            width: '38px',
                             borderBottom: `1px solid ${theme.palette.divider}`,
                           })}
                         >
@@ -195,6 +197,7 @@ const EnhancedTable: FC<TableType> = props => {
                             sx={
                               [
                                 (theme: Theme) => ({
+                                  minHeight: rowHeight,
                                   borderBottom: `1px solid ${theme.palette.divider}`,
                                   '& p': {
                                     display: 'inline-block',
@@ -216,6 +219,7 @@ const EnhancedTable: FC<TableType> = props => {
                               sx={{
                                 display: 'flex',
                                 whiteSpace: 'nowrap',
+                                minHeight: 24,
                               }}
                             >
                               {typeof row[colDef.id] !== 'undefined' && (

client/src/components/grid/TableHead.tsx

@@ -68,7 +68,7 @@ const EnhancedTableHead: FC<TableHeadType> = props => {
     <TableHead>
       <StyledTableRow>
         {openCheckBox && (
-          <TableCell padding="checkbox" role="cell">
+          <TableCell padding="checkbox" role="cell" sx={{ width: '38px' }}>
             <Checkbox
               color="primary"
               size="small"

client/src/components/grid/Types.ts

@@ -81,6 +81,7 @@ export type TableType = {
   onSelected: (e: React.MouseEvent, row: any) => void;
   isSelected: (data: any[]) => boolean;
   onSelectedAll: (e: React.ChangeEvent) => void;
+  rowHeight?: number;
   rows?: any[];
   colDefinitions: ColDefinitionsType[];
   primaryKey: string;

client/src/pages/databases/collections/Collections.tsx

@@ -313,18 +313,16 @@ const Collections = () => {
       sortType: 'string',
       formatter({ collection_name }) {
         return (
-          <Typography variant="body1">
+          <Typography variant="body1" sx={{ width: '10vw' }}>
             <Link
               to={`/databases/${database}/${collection_name}/overview`}
               style={{
                 color: 'inherit',
-                display: 'inline-flex',
-                alignItems: 'center',
-                wordBreak: 'break-all',
-                whiteSpace: 'nowrap',
-                width: 150,
+                display: 'block',
                 overflow: 'hidden',
+                width: '100%',
                 textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
                 textDecoration: 'none',
               }}
               title={collection_name}
@@ -342,7 +340,7 @@ const Collections = () => {
         );
       },
       getStyle: () => {
-        return { minWidth: '200px' };
+        return { minWidth: '10vw' };
       },
       label: collectionTrans('name'),
     },
@@ -391,7 +389,7 @@ const Collections = () => {
         );
       },
       getStyle: () => {
-        return { minWidth: '150px' };
+        return { minWidth: '100px' };
       },
     },
     {
@@ -411,7 +409,7 @@ const Collections = () => {
         return <Typography variant="body1">{v.description || '--'}</Typography>;
       },
       getStyle: () => {
-        return { minWidth: '150px' };
+        return { minWidth: '120px' };
       },
     },
     {
@@ -457,7 +455,7 @@ const Collections = () => {
         );
       },
       getStyle: () => {
-        return { minWidth: '120px' };
+        return { minWidth: '100px' };
       },
     });
   }

client/src/pages/databases/collections/segments/Segments.tsx

@@ -111,7 +111,7 @@ const Segments = () => {
       label: 'ID',
       getStyle: () => {
         return {
-          minWidth: 190,
+          minWidth: 155,
         };
       },
     },
@@ -121,7 +121,9 @@ const Segments = () => {
       disablePadding: false,
       label: 'Level',
       getStyle: () => {
-        return {};
+        return {
+          minWidth: 15,
+        };
       },
     },
     {
@@ -132,7 +134,7 @@ const Segments = () => {
       label: collectionTrans('partitionID'),
       getStyle: () => {
         return {
-          minWidth: 190,
+          minWidth: 160,
         };
       },
     },
@@ -143,7 +145,7 @@ const Segments = () => {
       label: collectionTrans('segPState'),
       getStyle: () => {
         return {
-          minWidth: 200,
+          minWidth: 160,
         };
       },
     },
@@ -154,7 +156,7 @@ const Segments = () => {
       label: collectionTrans('num_rows'),
       getStyle: () => {
         return {
-          minWidth: 100,
+          minWidth: 74,
         };
       },
     },
@@ -168,7 +170,7 @@ const Segments = () => {
       },
       getStyle: () => {
         return {
-          minWidth: 140,
+          minWidth: 40,
         };
       },
     },
@@ -179,7 +181,7 @@ const Segments = () => {
       label: collectionTrans('q_state'),
       getStyle: () => {
         return {
-          minWidth: 200,
+          minWidth: 80,
         };
       },
     },