fix some layout issues

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -83,6 +83,7 @@ const AddressIntTxsTableItem = ({
           noLink={ isOut }
           noCopy={ isOut }
           w="min-content"
+          maxW="100%"
         />
       </Td>
       <Td px={ 0 } verticalAlign="middle">
@@ -99,6 +100,7 @@ const AddressIntTxsTableItem = ({
             noLink={ isIn }
             noCopy={ isIn }
             w="min-content"
+            maxW="100%"
           />
         ) }
       </Td>

ui/home/LatestTxsItem.tsx

@@ -48,16 +48,17 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       display={{ base: 'none', lg: 'grid' }}
     >
       <Flex overflow="hidden" w="100%">
-        <TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
+        <TxAdditionalInfo tx={ tx } isLoading={ isLoading } my="3px"/>
         <Box ml={ 3 } w="calc(100% - 40px)">
-          <HStack flexWrap="wrap">
+          <HStack flexWrap="wrap" my="3px">
             <TxType types={ tx.tx_types } isLoading={ isLoading }/>
             <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
             <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
           </HStack>
           <Flex
-            mt={ 2 }
             alignItems="center"
+            mt="7px"
+            mb="3px"
           >
             <TxEntity
               isLoading={ isLoading }
@@ -88,35 +89,36 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           isLoading={ isLoading }
           flexShrink={ 0 }
         />
-        <Box ml={ 1 } maxW="calc(100% - 24px)">
+        <Flex ml={ 1 } maxW="calc(100% - 24px)" flexDir="column" rowGap="1px">
           <AddressEntity
             isLoading={ isLoading }
             address={ tx.from }
             fontSize="sm"
-            lineHeight={ 6 }
+            lineHeight={ 5 }
+            my="5px"
             fontWeight="500"
-            mb={ 2 }
           />
           { dataTo && (
             <AddressEntity
               isLoading={ isLoading }
               address={ dataTo }
               fontSize="sm"
-              lineHeight={ 6 }
+              lineHeight={ 5 }
+              my="5px"
               fontWeight="500"
             />
           ) }
-        </Box>
+        </Flex>
       </Flex>
       <Box>
         { !config.UI.views.tx.hiddenFields?.value && (
-          <Skeleton isLoaded={ !isLoading } mb={ 2 }>
+          <Skeleton isLoaded={ !isLoading } mb="1px" lineHeight="30px">
             <Text as="span" whiteSpace="pre">{ config.chain.currency.symbol } </Text>
             <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
           </Skeleton>
         ) }
         { !config.UI.views.tx.hiddenFields?.tx_fee && (
-          <Skeleton isLoaded={ !isLoading } display="flex" whiteSpace="pre">
+          <Skeleton isLoaded={ !isLoading } display="flex" whiteSpace="pre" lineHeight="30px">
             <Text as="span">Fee </Text>
             { tx.stability_fee ? (
               <TxFeeStability data={ tx.stability_fee } accuracy={ 5 } color="text_secondary" hideUsd/>

ui/txs/TxAdditionalInfo.tsx

 import {
+  chakra,
   Modal,
   ModalContent,
   ModalCloseButton,
@@ -28,9 +29,10 @@ type Props =
   }) & {
     isMobile?: boolean;
     isLoading?: boolean;
+    className?: string;
   }
 
-const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => {
+const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading, className }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const content = hash !== undefined ? <TxAdditionalInfoContainer hash={ hash }/> : <TxAdditionalInfoContent tx={ tx }/>;
@@ -38,7 +40,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => {
   if (isMobile) {
     return (
       <>
-        <AdditionalInfoButton onClick={ onOpen } isLoading={ isLoading }/>
+        <AdditionalInfoButton onClick={ onOpen } isLoading={ isLoading } className={ className }/>
         <Modal isOpen={ isOpen } onClose={ onClose } size="full">
           <ModalContent paddingTop={ 4 }>
             <ModalCloseButton/>
@@ -53,7 +55,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => {
       { ({ isOpen }) => (
         <>
           <PopoverTrigger>
-            <AdditionalInfoButton isOpen={ isOpen } isLoading={ isLoading }/>
+            <AdditionalInfoButton isOpen={ isOpen } isLoading={ isLoading } className={ className }/>
           </PopoverTrigger>
           <PopoverContent border="1px solid" borderColor="divider">
             <PopoverBody>
@@ -66,4 +68,4 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => {
   );
 };
 
-export default React.memo(TxAdditionalInfo);
+export default React.memo(chakra(TxAdditionalInfo));

ui/txs/TxsTableItem.tsx

@@ -53,7 +53,8 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       truncation="constant"
       w="min-content"
       maxW="100%"
-      py="2px"
+      my="2px"
+      lineHeight="20px"
     />
   );
 
@@ -67,6 +68,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
       w="min-content"
       maxW="100%"
       py="2px"
+      lineHeight="20px"
     />
   ) : '-';
 
@@ -151,7 +153,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
                   isLoading={ isLoading }
                 />
               ) }
-            <VStack alignItems="start" ml={ 1 } w="calc(100% - 48px)">
+            <VStack alignItems="start" ml={ 1 } w="calc(100% - 48px)" gap="11px">
               { addressFrom }
               { addressTo }
             </VStack>