draft of logs tab

ui/tx/logs/TxLogItem.tsx

@@ -15,14 +15,29 @@ interface Props {
   index: number;
 }
 
-const RowHeader = ({ children }: { children: React.ReactNode }) => <GridItem><Text fontWeight={ 500 }>{ children }</Text></GridItem>;
+const RowHeader = ({ children }: { children: React.ReactNode }) => (
+  <GridItem _notFirst={{ mt: { base: 5, lg: 0 } }}>
+    <Text fontWeight={{ base: 700, lg: 500 }}>{ children }</Text>
+  </GridItem>
+);
 
 const TxLogItem = ({ address, index, topics, data }: Props) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const dataBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Grid gridTemplateColumns="200px 1fr" gap={ 8 } py={ 8 } _notFirst={{ borderTopWidth: '1px', borderTopColor: borderColor }}>
+    <Grid
+      gridTemplateColumns={{ base: 'minmax(0, 1fr)', lg: '200px minmax(0, 1fr)' }}
+      gap={{ base: 3, lg: 8 }}
+      py={ 8 }
+      _notFirst={{
+        borderTopWidth: '1px',
+        borderTopColor: borderColor,
+      }}
+      _first={{
+        pt: 0,
+      }}
+    >
       <RowHeader>Address</RowHeader>
       <GridItem display="flex" alignItems="center">
         <Address>
@@ -35,7 +50,7 @@ const TxLogItem = ({ address, index, topics, data }: Props) => {
           </Link>
         </Tooltip>
         <Tooltip label="Log index">
-          <Button variant="outline" isActive ml="auto" size="sm" fontWeight={ 400 }>
+          <Button variant="outline" isActive ml={{ base: 6, lg: 'auto' }} size="sm" fontWeight={ 400 }>
             { index }
           </Button>
         </Tooltip>

ui/tx/logs/TxLogTopic.tsx

-import { Flex, Button, Text, Select } from '@chakra-ui/react';
+import { Flex, Button, Select, Box } from '@chakra-ui/react';
 import React from 'react';
 
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+
 interface Props {
   hex: string;
   index: number;
@@ -17,18 +19,29 @@ const TxLogTopic = ({ hex, index }: Props) => {
   }, []);
 
   return (
-    <Flex alignItems="center" px={ 3 } _notFirst={{ mt: 3 }}>
+    <Flex alignItems="center" px={{ base: 0, lg: 3 }} _notFirst={{ mt: 3 }} overflow="hidden" maxW="100%">
       <Button variant="outline" isActive size="xs" fontWeight={ 400 } mr={ 3 } w={ 6 }>
         { index }
       </Button>
       { /* temporary condition juse to show different states of the component */ }
       { /* delete when ther will be real data */ }
       { index > 0 && (
-        <Select size="sm" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange } focusBorderColor="none" w="75px" mr={ 3 }>
+        <Select
+          size="sm"
+          borderRadius="base"
+          value={ selectedDataType }
+          onChange={ handleSelectChange }
+          focusBorderColor="none"
+          w="75px"
+          mr={ 3 }
+          flexShrink={ 0 }
+        >
           { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
         </Select>
       ) }
-      <Text>{ hex }</Text>
+      <Box overflow="hidden" whiteSpace="nowrap">
+        <HashStringShortenDynamic hash={ hex }/>
+      </Box>
     </Flex>
   );
 };