add constrained text in attchment table

try lineClamp1 flexbox 1 attachement table flex add margin right for name cellstyle fix margin right fix flex
scality · Jul 13, 2023 · 7ea832d · 7ea832d
1 parent 33f59e5
commit 7ea832d
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx
@@ -15,6 +15,7 @@ import { useCombobox, UseComboboxStateChange } from 'downshift';
 import { Box, Button, Table } from '../../next';
 
 import {
+  ConstrainedText,
   Icon,
   Loader,
   SearchInput,
@@ -596,10 +597,11 @@ export const AttachmentTable = <ENTITY_TYPE,>({
         <Table
           columns={[
             {
-              Header: 'Name',
+              Header: <Box flex={1.5}>Name</Box>,
               accessor: 'name',
               cellStyle: {
-                flex: 0.8,
+                flex: 1.5,
+                marginRight: '1.5rem',
               },
               Cell: ({
                 value,
@@ -616,7 +618,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                 });
 
                 if (value) {
-                  return <>{value}</>;
+                  return <ConstrainedText text={value} lineClamp={2} />;
                 }
                 if (status === 'error') {
                   return (
@@ -632,28 +634,28 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                   if (!asyncName) {
                     return <EmptyCell />;
                   }
-                  return <>{asyncName}</>;
+                  return <ConstrainedText text={asyncName} lineClamp={2} />;
                 }
 
                 return <EmptyCell />;
               },
             },
             {
-              Header: 'Attachment status',
+              Header: <Box flex={0.5}>Attachment status</Box>,
               accessor: 'isPending',
               cellStyle: {
-                flex: 0.8,
+                flex: 0.5,
               },
               Cell: ({ value }: { value?: boolean }) => {
                 return value ? <>Pending</> : <>Attached</>;
               },
             },
             {
-              Header: '',
+              Header: <Box flex={0.5} />,
               accessor: 'action',
               cellStyle: {
                 textAlign: 'right',
-                flex: '1',
+                flex: 0.5,
                 marginLeft: 'auto',
                 marginRight: '0.5rem',
               },