update mobile view

ui/shared/ListItemMobile/ListItemMobileGrid.tsx

-import { Grid, Text, chakra } from '@chakra-ui/react';
+import { Grid, chakra, GridItem } from '@chakra-ui/react';
 import { motion } from 'framer-motion';
 import React from 'react';
 
@@ -22,10 +22,11 @@ const ListItemMobileGrid = ({ isAnimated, items, className }: Props) => {
       animate={{ opacity: 1, scale: 1 }}
       transitionDuration="normal"
       transitionTimingFunction="linear"
-      rowGap={ 4 }
+      rowGap={ 2 }
       columnGap={ 2 }
-      gridTemplateColumns="max-content auto"
-      paddingY={ 6 }
+      gridTemplateColumns="86px auto"
+      gridTemplateRows="minmax(30px, max-content)"
+      paddingY={ 4 }
       borderColor="divider"
       borderTopWidth="1px"
       _last={{
@@ -36,8 +37,10 @@ const ListItemMobileGrid = ({ isAnimated, items, className }: Props) => {
     >
       { items.map(item => Boolean(item.value) && (
         <>
-          <Text >{ item.name }</Text>
-          { typeof item.value === 'string' ? <Text variant="secondary">{ item.value }</Text> : item.value }
+          <GridItem fontWeight={ 500 } lineHeight="30px">{ item.name }</GridItem>
+          <GridItem alignSelf="center">
+            { typeof item.value === 'string' ? <chakra.span color="text_secondary">{ item.value }</chakra.span> : item.value }
+          </GridItem>
         </>
       )) }
     </Grid>

ui/tx/state/TxStateListItem.tsx

-import { Grid, GridItem } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxStateChange } from 'types/api/txStateChanges';
@@ -6,7 +5,7 @@ import type { TxStateChange } from 'types/api/txStateChanges';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
 import { getStateElements } from './utils';
 
@@ -18,37 +17,21 @@ const TxStateListItem = ({ data }: Props) => {
 
   const { before, after, change, hint, tokenId } = getStateElements(data);
 
-  return (
-    <ListItemMobile>
+  const items = [
+    { name: 'Address', value: (
       <Address flexGrow={ 1 } w="100%">
         <AddressIcon address={ data.address }/>
         <AddressLink type="address" hash={ data.address.hash } ml={ 2 } truncation="constant" mr="auto"/>
         { hint }
       </Address>
-      <Grid gridTemplateColumns="90px 1fr" columnGap={ 3 } rowGap={ 2 }>
-        { before && (
-          <>
-            <GridItem fontWeight={ 500 }>Before</GridItem>
-            <GridItem>{ before }</GridItem>
-          </>
-        ) }
-        { after && (
-          <>
-            <GridItem fontWeight={ 500 }>After</GridItem>
-            <GridItem>{ after }</GridItem>
-          </>
-        ) }
-        <GridItem fontWeight={ 500 }>Change</GridItem>
-        <GridItem>{ change }</GridItem>
-        { tokenId && (
-          <>
-            <GridItem fontWeight={ 500 }>Token ID</GridItem>
-            <GridItem>{ tokenId }</GridItem>
-          </>
-        ) }
-      </Grid>
-    </ListItemMobile>
-  );
+    ) },
+    { name: 'Before', value: before },
+    { name: 'After', value: after },
+    { name: 'Change', value: change },
+    { name: 'Token ID', value: tokenId },
+  ];
+
+  return <ListItemMobileGrid items={ items }/>;
 };
 
 export default TxStateListItem;

ui/tx/state/TxStateTokenIdList.tsx

@@ -22,17 +22,18 @@ const TxStateTokenIdList = ({ items, tokenAddress }: Props) => {
           id={ item.total.token_id }
           w="auto"
           truncation="constant"
-          my={{ base: '-3px', lg: 0 }}
         />
       )) }
-      <Link
-        fontWeight={ 400 }
-        textDecoration="underline dashed"
-        _hover={{ textDecoration: 'underline dashed', color: 'link_hovered' }}
-        onClick={ setIsCut.toggle }
-      >
+      { items.length > 3 && (
+        <Link
+          fontWeight={ 400 }
+          textDecoration="underline dashed"
+          _hover={{ textDecoration: 'underline dashed', color: 'link_hovered' }}
+          onClick={ setIsCut.toggle }
+        >
         View { isCut ? 'more' : 'less' }
-      </Link>
+        </Link>
+      ) }
     </Flex>
   );
 };

ui/tx/state/utils.tsx

@@ -19,7 +19,7 @@ export function getStateElements(data: TxStateChange) {
   const hint = (() => {
     if (data.is_miner) {
       return (
-        <Flex align="center" columnGap={ 1 }>
+        <Flex align="center" columnGap={ 1 } flexDir={{ base: 'row-reverse', lg: 'row' }}>
           <Hint label="A block producer who successfully included the block into the blockchain"/>
           <Box color="text_secondary" textTransform="capitalize">{ getNetworkValidatorTitle() }</Box>
         </Flex>
@@ -31,7 +31,7 @@ export function getStateElements(data: TxStateChange) {
       if (changeDirection) {
         const text = changeDirection === 'from' ? 'Mint' : 'Burn';
         return (
-          <Flex align="center" columnGap={ 1 }>
+          <Flex align="center" columnGap={ 1 } flexDir={{ base: 'row-reverse', lg: 'row' }}>
             <Hint label="Address used in tokens mintings and burnings"/>
             <Box color="text_secondary" whiteSpace="nowrap">{ text } address</Box>
           </Flex>