Merge pull request #2154 from blockscout/fe-2135

mud design fixes

ui/address/mud/AddressMudRecordsTable.tsx

@@ -10,6 +10,7 @@ import { route } from 'nextjs-routes';
 import capitalizeFirstLetter from 'lib/capitalizeFirstLetter';
 import dayjs from 'lib/date/dayjs';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import { default as Thead } from 'ui/shared/TheadSticky';
@@ -109,18 +110,19 @@ const AddressMudRecordsTable = ({
 
   const colW = isMobile ? COL_MIN_WIDTH_MOBILE : COL_MIN_WIDTH;
 
+  const keys = (isOpened || !hasCut) ? data.schema.key_names : data.schema.key_names.slice(0, colsCutCount);
+  const values = (isOpened || !hasCut) ? data.schema.value_names : data.schema.value_names.slice(0, colsCutCount - data.schema.key_names.length);
+  const colsCount = (isOpened || !hasCut) ? totalColsCut : colsCutCount;
+
   const tdStyles: StyleProps = {
     wordBreak: 'break-word',
     whiteSpace: 'normal',
     minW: `${ colW }px`,
-    w: `${ colW }px`,
+    w: `${ 100 / colsCount }%`,
     verticalAlign: 'top',
     lineHeight: '20px',
   };
 
-  const keys = (isOpened || !hasCut) ? data.schema.key_names : data.schema.key_names.slice(0, colsCutCount);
-  const values = (isOpened || !hasCut) ? data.schema.value_names : data.schema.value_names.slice(0, colsCutCount - data.schema.key_names.length);
-
   const hasHorizontalScroll = isMobile || isOpened;
 
   if (hasCut && !colsCutCount) {
@@ -185,7 +187,7 @@ const AddressMudRecordsTable = ({
               </Th>
             )) }
             { hasCut && !isOpened && cutButton }
-            <Th { ...tdStyles }>Modified</Th>
+            <Th { ...tdStyles } w={ `${ colW }px` }>Modified</Th>
             { hasCut && isOpened && cutButton }
           </Tr>
         </Thead>
@@ -204,12 +206,13 @@ const AddressMudRecordsTable = ({
                       { getValueString(item.decoded[keyName]) }
                     </LinkInternal>
                   ) : getValueString(item.decoded[keyName]) }
+                  <CopyToClipboard text={ item.decoded[keyName] }/>
                 </Td>
               )) }
               { values.map((valName) =>
                 <Td key={ valName } { ...tdStyles }>{ getValueString(item.decoded[valName]) }</Td>) }
               { hasCut && !isOpened && <Td width={ `${ CUT_COL_WIDTH }px ` }></Td> }
-              <Td { ...tdStyles } color="text_secondary">{ dayjs(item.timestamp).format('lll') }</Td>
+              <Td { ...tdStyles } color="text_secondary" w={ `${ colW }px` }>{ dayjs(item.timestamp).format('lll') }</Td>
               { hasCut && isOpened && <Td width={ `${ CUT_COL_WIDTH }px ` }></Td> }
             </Tr>
           )) }

ui/address/mud/AddressMudTablesTableItem.tsx

@@ -43,7 +43,7 @@ const AddressMudTablesTableItem = ({ item, isLoading, scrollRef, hash }: Props)
 
   return (
     <>
-      <Tr borderStyle={ isOpened ? 'hidden' : 'unset' }>
+      <Tr borderBottomStyle={ isOpened ? 'hidden' : 'unset' }>
         <Td verticalAlign="middle">
           <Skeleton isLoaded={ !isLoading }>
             <Link display="block">