From 00ae5b20faf3b2ba3d42835f93bb30ff6becab7d Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Mon, 16 Oct 2023 10:46:42 +0100
Subject: [PATCH] fix: use grid for asset rows to stop overflow while allowing
 width, closes #4171

---
 .../components/asset-row-grid.tsx             | 20 +++++++
 .../crypto-currency-asset-item.layout.tsx     | 52 +++++++++++--------
 ...tacks-fungible-token-asset-item.layout.tsx | 42 ++++++---------
 3 files changed, 66 insertions(+), 48 deletions(-)
 create mode 100644 src/app/components/crypto-assets/components/asset-row-grid.tsx

diff --git a/src/app/components/crypto-assets/components/asset-row-grid.tsx b/src/app/components/crypto-assets/components/asset-row-grid.tsx
new file mode 100644
index 00000000000..b46b2148003
--- /dev/null
+++ b/src/app/components/crypto-assets/components/asset-row-grid.tsx
@@ -0,0 +1,20 @@
+import { Grid, GridItem } from 'leather-styles/jsx';
+
+interface AssetRowGridProps {
+  title: React.ReactNode;
+  balance: React.ReactNode;
+  caption: React.ReactNode;
+  usdBalance?: React.ReactNode;
+}
+export function AssetRowGrid({ title, balance, caption, usdBalance }: AssetRowGridProps) {
+  return (
+    <Grid columns={2} gridTemplateColumns="2fr 1fr" gridTemplateRows={2} gap={0}>
+      <GridItem whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
+        {title}
+      </GridItem>
+      <GridItem textAlign="right">{balance}</GridItem>
+      <GridItem>{caption}</GridItem>
+      {usdBalance && <GridItem>{usdBalance}</GridItem>}
+    </Grid>
+  );
+}
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index 285da32ccb7..99ff750f859 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -2,7 +2,7 @@ import { Flex, StackProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
 import { truncateMiddle } from '@stacks/ui-utils';
 import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors';
-import { HStack, styled } from 'leather-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
 import { CryptoCurrencies } from '@shared/models/currencies.model';
 import { Money } from '@shared/models/money.model';
@@ -13,6 +13,8 @@ import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';
 
+import { AssetRowGrid } from '../components/asset-row-grid';
+
 interface CryptoCurrencyAssetItemLayoutProps extends StackProps {
   balance: Money;
   caption: string;
@@ -67,31 +69,35 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
         <Flag
           align="middle"
           img={isHovered && copyIcon ? copyIcon : icon}
-          spacing="base"
+          spacing="space.04"
           width="100%"
         >
-          <HStack alignItems="center" justifyContent="space-between" width="100%">
-            <styled.span textStyle="label.01">
-              {isHovered ? truncateMiddle(address, 6) : title}
-            </styled.span>
-            <Tooltip
-              label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
-              placement="left-start"
-            >
-              <styled.span data-testid={title} textStyle="label.01">
-                {formattedBalance.value} {additionalBalanceInfo}
+          <AssetRowGrid
+            title={
+              <styled.span textStyle="label.01">
+                {isHovered ? truncateMiddle(address, 6) : title}
               </styled.span>
-            </Tooltip>
-          </HStack>
-          <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
-            <styled.span textStyle="caption.02">{caption}</styled.span>
-            <Flex>
-              {balance.amount.toNumber() > 0 && address ? (
-                <styled.span textStyle="caption.02">{usdBalance}</styled.span>
-              ) : null}
-              {additionalUsdBalanceInfo}
-            </Flex>
-          </HStack>
+            }
+            balance={
+              <Tooltip
+                label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
+                placement="left-start"
+              >
+                <styled.span data-testid={title} textStyle="label.01">
+                  {formattedBalance.value} {additionalBalanceInfo}
+                </styled.span>
+              </Tooltip>
+            }
+            caption={<styled.span textStyle="caption.02">{caption}</styled.span>}
+            usdBalance={
+              <Flex justifyContent="flex-end">
+                {balance.amount.toNumber() > 0 && address ? (
+                  <styled.span textStyle="caption.02">{usdBalance}</styled.span>
+                ) : null}
+                {additionalUsdBalanceInfo}
+              </Flex>
+            }
+          />
         </Flag>
         {component}
       </Flex>
diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
index 128e737cdfd..384ade2ed17 100644
--- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -1,6 +1,6 @@
 import { BoxProps } from '@stacks/ui';
 import { forwardRefWithAs } from '@stacks/ui-core';
-import { Flex, HStack, styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import type { Money } from '@shared/models/money.model';
 
@@ -12,6 +12,7 @@ import { Flag } from '@app/components/layout/flag';
 import { Tooltip } from '@app/components/tooltip';
 
 import { AssetCaption } from '../../components/asset-caption';
+import { AssetRowGrid } from '../../components/asset-row-grid';
 
 interface StacksFungibleTokenAssetItemLayoutProps extends BoxProps {
   avatar: string;
@@ -45,32 +46,23 @@ export const StacksFungibleTokenAssetItemLayout = forwardRefWithAs(
               {title[0]}
             </StacksAssetAvatar>
           }
-          spacing="base"
+          spacing="space.04"
           width="100%"
         >
-          <HStack alignItems="center" justifyContent="space-between" width="100%">
-            <styled.span
-              maxWidth="150px"
-              overflow="hidden"
-              textAlign="left"
-              textOverflow="ellipsis"
-              textStyle="label.01"
-              whiteSpace="nowrap"
-            >
-              {title}
-            </styled.span>
-            <Tooltip
-              label={formattedBalance.isAbbreviated ? amount : undefined}
-              placement="left-start"
-            >
-              <styled.span data-testid={title} textStyle="label.01">
-                {formattedBalance.value}
-              </styled.span>
-            </Tooltip>
-          </HStack>
-          <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
-            <AssetCaption caption={caption} />
-          </HStack>
+          <AssetRowGrid
+            title={<styled.span textStyle="label.01">{title}</styled.span>}
+            balance={
+              <Tooltip
+                label={formattedBalance.isAbbreviated ? amount : undefined}
+                placement="left-start"
+              >
+                <styled.span data-testid={title} textStyle="label.01">
+                  {formattedBalance.value}
+                </styled.span>
+              </Tooltip>
+            }
+            caption={<AssetCaption caption={caption} />}
+          />
           {component}
         </Flag>
       </Flex>