Merge pull request #2029 from oasisprotocol/lw/more-adaptive

Inline copy button next to more account links using AdaptiveTrimmer

Author: lukaw3d

.changelog/2029.bugfix.md

@@ -0,0 +1 @@
+Inline copy button next to some account links using AdaptiveTrimmer

src/app/components/Account/ConsensusAccountDetailsView.tsx

@@ -61,13 +61,15 @@ export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> =
         </Box>
       </StyledListTitleWithAvatar>
       <dd>
-        <ConsensusAccountLink
-          alwaysTrim={false}
-          network={account.network}
-          address={account.address}
-          highlightPattern={highlightPattern}
-        />
-        <CopyToClipboard value={account.address} />
+        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+          <ConsensusAccountLink
+            alwaysTrim={false}
+            network={account.network}
+            address={account.address}
+            highlightPattern={highlightPattern}
+          />
+          <CopyToClipboard value={account.address} />
+        </Box>
       </dd>
       <dt>
         <strong>{t('account.totalBalance')}</strong>

src/app/pages/ConsensusTransactionDetailPage/index.tsx

@@ -26,6 +26,7 @@ import { getFiatCurrencyForScope } from '../../../config'
 import { useWantedTransaction } from '../../hooks/useWantedTransaction'
 import { MultipleTransactionsWarning } from '../../components/Transactions/MultipleTransactionsWarning'
 import { DashboardLink } from '../ParatimeDashboardPage/DashboardLink'
+import Box from '@mui/material/Box'
 
 const StyledDescriptionDetails = styled('dd')({
   '&&': { padding: 0 },
@@ -120,15 +121,27 @@ export const ConsensusTransactionDetailView: FC<{
       </dd>
       <dt>{t('common.from')}</dt>
       <dd>
-        <ConsensusAccountLink network={transaction.network} address={transaction.sender} alwaysTrim={false} />
-        <CopyToClipboard value={transaction.sender} />
+        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+          <ConsensusAccountLink
+            network={transaction.network}
+            address={transaction.sender}
+            alwaysTrim={false}
+          />
+          <CopyToClipboard value={transaction.sender} />
+        </Box>
       </dd>
       {transaction.to && (
         <>
           <dt>{t('common.to')}</dt>
           <dd>
-            <ConsensusAccountLink network={transaction.network} address={transaction.to} alwaysTrim={false} />
-            <CopyToClipboard value={transaction.to} />
+            <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+              <ConsensusAccountLink
+                network={transaction.network}
+                address={transaction.to}
+                alwaysTrim={false}
+              />
+              <CopyToClipboard value={transaction.to} />
+            </Box>
           </dd>
         </>
       )}

src/app/pages/ValidatorDetailsPage/ValidatorTitleCard.tsx

@@ -34,13 +34,12 @@ export const ValidatorTitleCard: FC<ValidatorTitleCardProps> = ({
           {validator && (
             <Box sx={{ display: 'flex' }}>
               <ValidatorStatusBadge active={validator.active} inValidatorSet={validator?.in_validator_set} />
-              <Box sx={{ paddingLeft: 4 }}>
-                <AccountLink
-                  scope={{ network, layer: 'consensus' }}
-                  address={validator.entity_address}
-                  showOnlyAddress
-                />
-              </Box>
+              &nbsp;&nbsp;&nbsp;
+              <AccountLink
+                scope={{ network, layer: 'consensus' }}
+                address={validator.entity_address}
+                showOnlyAddress
+              />
               <CopyToClipboard value={validator.entity_address} />
             </Box>
           )}
@@ -51,29 +50,30 @@ export const ValidatorTitleCard: FC<ValidatorTitleCardProps> = ({
         <>
           {validator && (
             <>
-              <Box sx={{ display: 'flex', alignItems: 'center' }} gap={4}>
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
                 <ValidatorImage
                   address={validator.entity_address}
                   name={validator.media?.name}
                   logotype={validator.media?.logoUrl}
                 />
+                &nbsp;&nbsp;
                 {isTablet ? (
                   <AdaptiveHighlightedText text={validator?.media?.name} pattern={highlightPattern} />
                 ) : (
                   <HighlightedText text={validator?.media?.name} pattern={highlightPattern} />
                 )}
+                &nbsp;
+                <Typography
+                  component="span"
+                  sx={{
+                    color: COLORS.grayMedium,
+                    fontSize: '24px',
+                    fontWeight: 400,
+                  }}
+                >
+                  ({validator.rank})
+                </Typography>
               </Box>
-              &nbsp;
-              <Typography
-                component="span"
-                sx={{
-                  color: COLORS.grayMedium,
-                  fontSize: '24px',
-                  fontWeight: 400,
-                }}
-              >
-                ({validator.rank})
-              </Typography>
             </>
           )}
         </>