ui: fix schema page ui

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

client/src/pages/databases/collections/schema/Schema.tsx

@@ -460,7 +460,7 @@ const Overview = () => {
             <InfoRow>
               <InfoLabel>{collectionTrans('description')}</InfoLabel>
               <InfoValue>
-                <Typography variant="body1">
+                <Typography variant="body2">
                   {collection?.description || '--'}
                 </Typography>
               </InfoValue>
@@ -469,7 +469,7 @@ const Overview = () => {
             <InfoRow>
               <InfoLabel>{collectionTrans('createdTime')}</InfoLabel>
               <InfoValue>
-                <Typography variant="body1">
+                <Typography variant="body2">
                   {new Date(collection.createdTime).toLocaleString()}
                 </Typography>
               </InfoValue>
@@ -507,7 +507,7 @@ const Overview = () => {
                 </CustomToolTip>
               </InfoLabel>
               <InfoValue>
-                <Typography variant="body1">
+                <Typography variant="body2">
                   {collection.loaded ? collection.replicas?.length : '...'}
                 </Typography>
                 {collection.loaded && enableModifyReplica && (
@@ -561,7 +561,7 @@ const Overview = () => {
                 )}
               </InfoLabel>
               <InfoValue>
-                <Typography variant="body1">
+                <Typography variant="body2">
                   {formatNumber(Number(collection?.rowCount || '0'))}
                 </Typography>
               </InfoValue>

client/src/pages/databases/collections/schema/StyledComponents.tsx

@@ -40,7 +40,7 @@ export const Card = styled(Box)(({ theme }) => ({
 
 export const InfoRow = styled(Box)(({ theme }) => ({
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-start',
   gap: theme.spacing(1.5),
   '&:not(:last-child)': {
     padding: theme.spacing(0.5, 0),
@@ -61,9 +61,11 @@ export const InfoLabel = styled(Box)(({ theme }) => ({
   flexShrink: 0,
   display: 'flex',
   alignItems: 'center',
+  height: '24px',
   [theme.breakpoints.down('md')]: {
     minWidth: 70,
     fontSize: 12,
+    height: '20px',
   },
 }));
 
@@ -77,9 +79,11 @@ export const InfoValue = styled(Box)(({ theme }) => ({
   flex: 1,
   minWidth: 0,
   flexWrap: 'nowrap',
+  minHeight: '24px',
   [theme.breakpoints.down('md')]: {
     fontSize: 13,
     gap: theme.spacing(0.5),
+    minHeight: '20px',
   },
   '& .truncate': {
     overflow: 'hidden',
@@ -97,6 +101,9 @@ export const InfoValue = styled(Box)(({ theme }) => ({
       gap: theme.spacing(0.5),
     },
   },
+  '& .MuiTypography-root': {
+    lineHeight: 1.5,
+  },
 }));
 
 export const ActionWrapper = styled(Box)(({ theme }) => ({
@@ -166,7 +173,4 @@ export const ParamWrapper = styled(Box)(({ theme }) => ({
   },
 }));
 
-export const GridWrapper = styled(Box)(({ theme }) => ({
-  flex: 1,
-  minHeight: 0,
-}));
+export const GridWrapper = styled(Box)(({ theme }) => ({}));