[fix] add ellipsis to long text in cells (#284)

someengineering · Jul 31, 2024 · 94a34c5 · 94a34c5
1 parent fc1abd6
commit 94a34c5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/pages/panel/inventory/InventoryTable.tsx b/src/pages/panel/inventory/InventoryTable.tsx
@@ -143,7 +143,7 @@ export const InventoryTable = ({ searchCrit, history }: InventoryTableProps) =>
                     : i.kind === 'double' || i.kind === 'float' || i.kind === 'int32' || i.kind === 'int64'
                       ? 'number'
                       : 'string',
-              display: 'flex',
+              display: inventoryTableCellHasIcon(i) ? 'flex' : undefined,
               valueGetter:
                 i.kind === 'date' || i.kind === 'datetime'
                   ? (value) => new Date(value)

diff --git a/src/pages/panel/inventory/utils/InventoryTableKindRenderCell.tsx b/src/pages/panel/inventory/utils/InventoryTableKindRenderCell.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@mui/material'
+import { Box, Stack, Typography } from '@mui/material'
 import { QueryFunctionContext, useQuery } from '@tanstack/react-query'
 import axios from 'axios'
 import { useThemeMode } from 'src/core/theme'
@@ -45,13 +45,15 @@ export const InventoryTableKindRenderCell = ({ group, iconUrl, name }: Inventory
     refetchOnReconnect: false,
   })
   return (
-    <Stack direction="row" spacing={1} alignItems="center">
+    <Stack direction="row" spacing={1} alignItems="center" height="100%">
       {svg ? (
         <Box component="img" width={24} height={24} src={`data:image/svg+xml;base64,${svg}`} alt={name} />
       ) : svg === null ? (
         <Box component="img" width={24} height={24} src={iconUrl} alt={name} />
       ) : undefined}
-      <span>{name}</span>
+      <Typography component="span" variant="caption" overflow="hidden" textOverflow="ellipsis" title={name}>
+        {name}
+      </Typography>
     </Stack>
   )
 }