From 3acc1a2a4e4d579a6720041ad66eb5a0a92d38af Mon Sep 17 00:00:00 2001
From: He1DAr <heidarsaleh@outlook.com>
Date: Thu, 11 Jan 2024 20:51:27 -0500
Subject: [PATCH] fix: tx and address page summary mobile style

---
 .../address/[principal]/AddressSummary.tsx    |  2 +-
 .../txid/[txId]/CoinbasePage/TxDetails.tsx    |  2 +-
 .../txid/[txId]/ContractCall/TxDetails.tsx    |  2 +-
 .../[txId]/PoisonMicroblock/TxDetails.tsx     |  2 +-
 .../txid/[txId]/SmartContract/TxDetails.tsx   |  2 +-
 .../txid/[txId]/TenureChange/TxDetails.tsx    |  2 +-
 .../txid/[txId]/TokenTransfer/TxDetails.tsx   |  2 +-
 src/app/txid/[txId]/TxDetails/Amount.tsx      | 10 ++-----
 src/app/txid/[txId]/TxDetails/Fees.tsx        |  9 ++----
 src/common/components/KeyValueHorizontal.tsx  | 28 +++++++++++++------
 10 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/app/address/[principal]/AddressSummary.tsx b/src/app/address/[principal]/AddressSummary.tsx
index 8eb6fb04b..d930c845d 100644
--- a/src/app/address/[principal]/AddressSummary.tsx
+++ b/src/app/address/[principal]/AddressSummary.tsx
@@ -23,7 +23,7 @@ export const AddressSummary = ({
 }: AddressSummaryProps) => {
   return (
     <Section title="Summary">
-      <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+      <Flex width="100%" flexDirection={['column', 'column', 'row']}>
         <Box width={['100%']}>
           <KeyValueHorizontal
             label={'Address'}
diff --git a/src/app/txid/[txId]/CoinbasePage/TxDetails.tsx b/src/app/txid/[txId]/CoinbasePage/TxDetails.tsx
index bfdc76609..46b1742ff 100644
--- a/src/app/txid/[txId]/CoinbasePage/TxDetails.tsx
+++ b/src/app/txid/[txId]/CoinbasePage/TxDetails.tsx
@@ -23,7 +23,7 @@ interface TxDetailsProps {
 export const TxDetails: React.FC<TxDetailsProps> = ({ tx }) => {
   return (
     <Section title="Summary">
-      <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+      <Flex width="100%" flexDirection={['column', 'column', 'row']}>
         <Box width={['100%']}>
           <ID tx={tx} />
           <Sender tx={tx} />
diff --git a/src/app/txid/[txId]/ContractCall/TxDetails.tsx b/src/app/txid/[txId]/ContractCall/TxDetails.tsx
index 90dd905ea..0239a2845 100644
--- a/src/app/txid/[txId]/ContractCall/TxDetails.tsx
+++ b/src/app/txid/[txId]/ContractCall/TxDetails.tsx
@@ -28,7 +28,7 @@ export const TxDetails: React.FC<TxDetailsProps> = ({ tx }) => {
   return (
     <>
       <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+        <Flex width="100%" flexDirection={['column', 'column', 'row']}>
           <Box width={['100%']}>
             <ContractName tx={tx} />
             <ID tx={tx} />
diff --git a/src/app/txid/[txId]/PoisonMicroblock/TxDetails.tsx b/src/app/txid/[txId]/PoisonMicroblock/TxDetails.tsx
index b7d069651..9a2340f4c 100644
--- a/src/app/txid/[txId]/PoisonMicroblock/TxDetails.tsx
+++ b/src/app/txid/[txId]/PoisonMicroblock/TxDetails.tsx
@@ -25,7 +25,7 @@ export const TxDetails: React.FC<TxDetailsProps> = ({ tx }) => {
   return (
     <>
       <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+        <Flex width="100%" flexDirection={['column', 'column', 'row']}>
           <Box width={['100%']}>
             <Sender tx={tx} />
             <ID tx={tx} />
diff --git a/src/app/txid/[txId]/SmartContract/TxDetails.tsx b/src/app/txid/[txId]/SmartContract/TxDetails.tsx
index 35d6d523a..d3fe5541d 100644
--- a/src/app/txid/[txId]/SmartContract/TxDetails.tsx
+++ b/src/app/txid/[txId]/SmartContract/TxDetails.tsx
@@ -28,7 +28,7 @@ export const TxDetails: React.FC<TxDetailsProps> = ({ tx, block }) => {
   return (
     <>
       <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+        <Flex width="100%" flexDirection={['column', 'column', 'row']}>
           <Box width={['100%']}>
             <ContractName tx={tx} />
             <ID tx={tx} />
diff --git a/src/app/txid/[txId]/TenureChange/TxDetails.tsx b/src/app/txid/[txId]/TenureChange/TxDetails.tsx
index 7aa61dc17..dde99151b 100644
--- a/src/app/txid/[txId]/TenureChange/TxDetails.tsx
+++ b/src/app/txid/[txId]/TenureChange/TxDetails.tsx
@@ -28,7 +28,7 @@ export const TxDetails: React.FC<TxDetailsProps> = ({ tx }) => {
   return (
     <>
       <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+        <Flex width="100%" flexDirection={['column', 'column', 'row']}>
           <Box width={['100%']}>
             <Sender tx={tx} />
             <ID tx={tx} />
diff --git a/src/app/txid/[txId]/TokenTransfer/TxDetails.tsx b/src/app/txid/[txId]/TokenTransfer/TxDetails.tsx
index 9daccd89d..3b96157e7 100644
--- a/src/app/txid/[txId]/TokenTransfer/TxDetails.tsx
+++ b/src/app/txid/[txId]/TokenTransfer/TxDetails.tsx
@@ -27,7 +27,7 @@ export const TxDetails: React.FC<TxDetailsProps> = ({ tx }) => {
   return (
     <>
       <Section title="Summary">
-        <Flex px="16px" width="100%" flexDirection={['column', 'column', 'row']}>
+        <Flex width="100%" flexDirection={['column', 'column', 'row']}>
           <Box width={['100%']}>
             <Amount tx={tx} />
             <Sender tx={tx} />
diff --git a/src/app/txid/[txId]/TxDetails/Amount.tsx b/src/app/txid/[txId]/TxDetails/Amount.tsx
index 2624026ab..b5b70662f 100644
--- a/src/app/txid/[txId]/TxDetails/Amount.tsx
+++ b/src/app/txid/[txId]/TxDetails/Amount.tsx
@@ -11,6 +11,7 @@ import { KeyValueHorizontal } from '../../../../common/components/KeyValueHorizo
 import { StxPriceButton } from '../../../../common/components/StxPriceButton';
 import { microToStacks, microToStacksFormatted } from '../../../../common/utils/utils';
 import { Box } from '../../../../ui/Box';
+import { Flex } from '../../../../ui/Flex';
 import { HStack } from '../../../../ui/HStack';
 import { Icon } from '../../../../ui/Icon';
 import { Stack } from '../../../../ui/Stack';
@@ -25,13 +26,8 @@ export const Amount: FC<{ tx: TokenTransferTransaction | MempoolTokenTransferTra
     <KeyValueHorizontal
       label={'Amount'}
       value={
-        <>
+        <Flex alignItems={'center'}>
           <HStack alignItems="flex-start" gap={2}>
-            <Box width="24px" position="relative">
-              <Circle position="absolute" left={0} size="24px" bg={'accent'}>
-                <Icon as={StxIcon} size="14px" color="white" />
-              </Circle>
-            </Box>
             <Text fontSize="16px" color={'textTitle'} fontWeight="500">
               {stxValue}{' '}
               <Text as="span" display="inline" opacity="0.5">
@@ -40,7 +36,7 @@ export const Amount: FC<{ tx: TokenTransferTransaction | MempoolTokenTransferTra
             </Text>
           </HStack>
           <StxPriceButton tx={tx} value={Number(tx.token_transfer.amount)} />
-        </>
+        </Flex>
       }
       copyValue={stxValue.toString()}
     />
diff --git a/src/app/txid/[txId]/TxDetails/Fees.tsx b/src/app/txid/[txId]/TxDetails/Fees.tsx
index 1d277354f..34d8b10f4 100644
--- a/src/app/txid/[txId]/TxDetails/Fees.tsx
+++ b/src/app/txid/[txId]/TxDetails/Fees.tsx
@@ -21,11 +21,8 @@ export const Fees: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => {
     <KeyValueHorizontal
       label={'Fees'}
       value={
-        <>
-          <Flex
-            flexDirection={['column', 'column', 'row']}
-            alignItems={['flex-start', 'flex-start', 'center']}
-          >
+        <Flex alignItems={'center'}>
+          <Flex alignItems={'center'}>
             <Value>{stxValue} STX</Value>
             <StxPriceButton tx={tx} value={Number(tx.fee_rate)} />
           </Flex>
@@ -34,7 +31,7 @@ export const Fees: FC<{ tx: Transaction | MempoolTransaction }> = ({ tx }) => {
               Sponsored
             </Badge>
           ) : null}
-        </>
+        </Flex>
       }
       copyValue={stxValue.toString()}
     />
diff --git a/src/common/components/KeyValueHorizontal.tsx b/src/common/components/KeyValueHorizontal.tsx
index e97d2b567..87be493d3 100644
--- a/src/common/components/KeyValueHorizontal.tsx
+++ b/src/common/components/KeyValueHorizontal.tsx
@@ -3,6 +3,7 @@ import { css } from '@emotion/react';
 import { FC, ReactNode } from 'react';
 
 import { Flex, FlexProps } from '../../ui/Flex';
+import { Show } from '../../ui/Show';
 import { CopyButton } from './CopyButton';
 
 export interface KeyValueHorizontalProps {
@@ -39,7 +40,7 @@ export const KeyValueHorizontal: FC<KeyValueHorizontalProps> = ({
   return (
     <Flex
       py={'16px'}
-      alignItems={'center'}
+      alignItems={['flex-start', 'flex-start', 'center']}
       css={rowStyle}
       gap={'10px'}
       flexWrap="nowrap"
@@ -47,26 +48,35 @@ export const KeyValueHorizontal: FC<KeyValueHorizontalProps> = ({
       borderBottom={'1px'}
       borderColor={borderColor}
       _last={{ borderBottom: 'unset' }}
+      direction={['column', 'column', 'row']}
     >
-      <Flex fontSize={'12px'} color={'textCaption'} width={'140px'} flexShrink={0} {...labelProps}>
+      <Flex
+        fontSize={'12px'}
+        color={'textCaption'}
+        width={['full', 'full', '140px']}
+        flexShrink={0}
+        {...labelProps}
+      >
         {label}
       </Flex>
       <Flex
         flexDirection={['column', 'column', 'row']}
         alignItems={['flex-start', 'flex-start', 'center']}
-        maxWidth={'calc(100% - 180px)'}
+        maxWidth={['full', 'full', 'calc(100% - 180px)']}
         wordBreak={'break-all'}
         fontSize={'sm'}
       >
         {value}
       </Flex>
       {copyValue && (
-        <CopyButton
-          className={'fancy-copy'}
-          initialValue={copyValue}
-          aria-label={'copy row'}
-          size={'40px'}
-        />
+        <Show above="lg">
+          <CopyButton
+            className={'fancy-copy'}
+            initialValue={copyValue}
+            aria-label={'copy row'}
+            size={'40px'}
+          />
+        </Show>
       )}
     </Flex>
   );