поменял поведение таблицы

components/WatchlistTable/WatchListAddressItem.tsx

@@ -12,9 +12,9 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   return (
     <HStack spacing="12px" align="top">
       <Image src="/acc.png" alt="Account Image" w="50px" h="50px"/>
-      <VStack align="stretch">
+      <VStack align="stretch" overflow="hidden">
         <HStack spacing="8px" alignContent="center">
-          <Link href="#" color="blue.500">
+          <Link href="#" color="blue.500" title={ item.address } overflow="hidden" textOverflow="ellipsis">
             { item.address }
           </Link>
           <CopyToClipboard text={ item.address }/>

components/WatchlistTable/WatchListTableItem.tsx

@@ -34,7 +34,11 @@ const WatchlistTableItem = ({ item, onEditClick, onDeleteClick }: Props) => {
   return (
     <Tr alignItems="top" key={ item.address }>
       <Td><WatchListAddressItem item={ item }/></Td>
-      <Td><Tag>{ item.tag }</Tag></Td>
+      <Td>
+        <Tag lineHeight="24px" title={ item.tag }>
+          { item.tag }
+        </Tag>
+      </Td>
       <Td><Switch colorScheme="green" size="md" isChecked={ item.notification }/></Td>
       <Td>
         <HStack spacing="30px">

components/WatchlistTable/WatchlistTable.tsx

@@ -22,13 +22,13 @@ interface Props {
 const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
   return (
     <TableContainer width="100%">
-      <Table variant="simple">
+      <Table variant="simple" minWidth="600px">
         <Thead>
           <Tr>
-            <Th>Address</Th>
-            <Th>Private tag</Th>
-            <Th>Notification</Th>
-            <Th></Th>
+            <Th width="70%" overflow="hidden">Address</Th>
+            <Th width="30%" overflow="hidden">Private tag</Th>
+            <Th width="108px" overflow="hidden">Notification</Th>
+            <Th width="108px" overflow="hidden"></Th>
           </Tr>
         </Thead>
         <Tbody>

data/watchlist.ts

@@ -22,7 +22,7 @@ export const watchlist = [
     tokenBalance: 200.2,
     tokenBalanceUSD: 202.4,
     totalUSD: 3000.5,
-    tag: 'some_other_tag',
+    tag: '12345678901234567890123456789012345',
     notification: false,
   },
 ];

theme/components/Table.ts

@@ -6,7 +6,7 @@ const firstLastStyle = {
 }
 
 const Table: ComponentMultiStyleConfig = {
-  parts: [ 'th', 'td' ],
+  parts: [ 'th', 'td', 'table' ],
   baseStyle: {
     th: {
       ...firstLastStyle,
@@ -18,6 +18,9 @@ const Table: ComponentMultiStyleConfig = {
       fontSize: 'md',
       verticalAlign: 'top',
     },
+    table: {
+      tableLayout: 'fixed',
+    },
   },
 }
 

theme/components/Tag.ts

+import type { ComponentStyleConfig } from '@chakra-ui/theme';
+
+const Tag: ComponentStyleConfig = {
+  baseStyle: {
+    container: {
+      display: 'inline-block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  },
+}
+
+export default Tag;

theme/components/index.ts

@@ -4,6 +4,7 @@ import Modal from './Modal';
 import Table from './Table';
 import Form from './Form';
 import Input from './Input';
+import Tag from './Tag';
 
 const components = {
   Switch,
@@ -12,6 +13,7 @@ const components = {
   Table,
   Input,
   Form,
+  Tag,
 }
 
 export default components;