From deee83059fade92fc9159a026767168dd033a043 Mon Sep 17 00:00:00 2001
From: IF <139582705+infiniteflower@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:55:19 -0500
Subject: [PATCH 1/3] chore: remove second inner scroll bar from tx details

---
 ui/pages/bridge/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/pages/bridge/index.scss b/ui/pages/bridge/index.scss
index af7b5ee6fd3b..fc2ffafa6c5f 100644
--- a/ui/pages/bridge/index.scss
+++ b/ui/pages/bridge/index.scss
@@ -42,4 +42,5 @@
   height: 100%;
   min-width: 360px;
   max-width: 480px;
+  overflow-y: hidden;
 }

From 311818c5529d403ce33e2306579482635574bfa0 Mon Sep 17 00:00:00 2001
From: IF <139582705+infiniteflower@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:56:32 -0500
Subject: [PATCH 2/3] chore: remove unneeded extra div

---
 .../transaction-details.tsx                   | 371 +++++++++---------
 1 file changed, 182 insertions(+), 189 deletions(-)

diff --git a/ui/pages/bridge/transaction-details/transaction-details.tsx b/ui/pages/bridge/transaction-details/transaction-details.tsx
index ad8e0566b5f3..cc68c1adf765 100644
--- a/ui/pages/bridge/transaction-details/transaction-details.tsx
+++ b/ui/pages/bridge/transaction-details/transaction-details.tsx
@@ -254,208 +254,201 @@ const CrossChainSwapTxDetails = () => {
   );
 
   return (
-    <div className="bridge">
-      <div className="bridge__container">
-        <Header
-          className="bridge__header"
-          startAccessory={
-            <ButtonIcon
-              iconName={IconName.ArrowLeft}
-              size={ButtonIconSize.Sm}
-              ariaLabel={t('back')}
-              onClick={() => history.goBack()}
-            />
-          }
+    <div className="bridge__container">
+      <Header
+        className="bridge__header"
+        startAccessory={
+          <ButtonIcon
+            iconName={IconName.ArrowLeft}
+            size={ButtonIconSize.Sm}
+            ariaLabel={t('back')}
+            onClick={() => history.goBack()}
+          />
+        }
+      >
+        {t('bridge')} details
+      </Header>
+      <Content>
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          gap={4}
         >
-          {t('bridge')} details
-        </Header>
-        <Content className="bridge__content">
+          {/* Delayed banner */}
+          {isDelayed && (
+            <BannerAlert
+              title={t('bridgeTxDetailsDelayedTitle')}
+              severity={BannerAlertSeverity.Warning}
+            >
+              <Text display={Display.Flex} alignItems={AlignItems.center}>
+                {t('bridgeTxDetailsDelayedDescription')}&nbsp;
+                <ButtonLink
+                  externalLink
+                  href={SUPPORT_REQUEST_LINK}
+                  onClick={() => {
+                    trackEvent(
+                      {
+                        category: MetaMetricsEventCategory.Home,
+                        event: MetaMetricsEventName.SupportLinkClicked,
+                        properties: {
+                          url: SUPPORT_REQUEST_LINK,
+                          location: 'Bridge Tx Details',
+                        },
+                      },
+                      {
+                        contextPropsIntoEventProperties: [
+                          MetaMetricsContextProp.PageTitle,
+                        ],
+                      },
+                    );
+                  }}
+                >
+                  {t('bridgeTxDetailsDelayedDescriptionSupport')}
+                </ButtonLink>
+                .
+              </Text>
+            </BannerAlert>
+          )}
+
+          {/* Bridge step list */}
+          {status !== StatusTypes.COMPLETE &&
+            (bridgeHistoryItem || srcChainTxMeta) && (
+              <BridgeStepList
+                bridgeHistoryItem={bridgeHistoryItem}
+                srcChainTxMeta={srcChainTxMeta}
+                networkConfigurationsByChainId={networkConfigurationsByChainId}
+              />
+            )}
+
+          {/* Links to block explorers */}
+          <BridgeExplorerLinks
+            srcChainId={srcNetwork?.chainId}
+            destChainId={destNetwork?.chainId}
+            srcBlockExplorerUrl={srcBlockExplorerUrl}
+            destBlockExplorerUrl={destBlockExplorerUrl}
+          />
+
+          <Divider />
+
+          {/* Bridge tx details */}
           <Box
             display={Display.Flex}
             flexDirection={FlexDirection.Column}
-            gap={4}
+            gap={2}
           >
-            {/* Delayed banner */}
-            {isDelayed && (
-              <BannerAlert
-                title={t('bridgeTxDetailsDelayedTitle')}
-                severity={BannerAlertSeverity.Warning}
-              >
-                <Text display={Display.Flex} alignItems={AlignItems.center}>
-                  {t('bridgeTxDetailsDelayedDescription')}&nbsp;
-                  <ButtonLink
-                    externalLink
-                    href={SUPPORT_REQUEST_LINK}
-                    onClick={() => {
-                      trackEvent(
-                        {
-                          category: MetaMetricsEventCategory.Home,
-                          event: MetaMetricsEventName.SupportLinkClicked,
-                          properties: {
-                            url: SUPPORT_REQUEST_LINK,
-                            location: 'Bridge Tx Details',
-                          },
-                        },
-                        {
-                          contextPropsIntoEventProperties: [
-                            MetaMetricsContextProp.PageTitle,
-                          ],
-                        },
-                      );
-                    }}
-                  >
-                    {t('bridgeTxDetailsDelayedDescriptionSupport')}
-                  </ButtonLink>
-                  .
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsStatus')}
+              value={
+                <Text
+                  textTransform={TextTransform.Capitalize}
+                  color={status ? StatusToColorMap[status] : undefined}
+                >
+                  {status?.toLowerCase()}
                 </Text>
-              </BannerAlert>
-            )}
-
-            {/* Bridge step list */}
-            {status !== StatusTypes.COMPLETE &&
-              (bridgeHistoryItem || srcChainTxMeta) && (
-                <BridgeStepList
-                  bridgeHistoryItem={bridgeHistoryItem}
-                  srcChainTxMeta={srcChainTxMeta}
-                  networkConfigurationsByChainId={
-                    networkConfigurationsByChainId
-                  }
-                />
-              )}
-
-            {/* Links to block explorers */}
-            <BridgeExplorerLinks
-              srcChainId={srcNetwork?.chainId}
-              destChainId={destNetwork?.chainId}
-              srcBlockExplorerUrl={srcBlockExplorerUrl}
-              destBlockExplorerUrl={destBlockExplorerUrl}
+              }
             />
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsBridging')}
+              value={
+                <Box
+                  display={Display.Flex}
+                  gap={1}
+                  alignItems={AlignItems.center}
+                >
+                  {srcNetworkIconName}
+                  <Icon name={IconName.Arrow2Right} size={IconSize.Sm} />
+                  {destNetworkIconName}
+                </Box>
+              }
+            />
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsTimestamp')}
+              value={t('bridgeTxDetailsTimestampValue', [
+                formatDate(srcChainTxMeta?.time, 'MMM d, yyyy'),
+                formatDate(srcChainTxMeta?.time, 'hh:mm a'),
+              ])}
+            />
+          </Box>
 
-            <Divider />
-
-            {/* Bridge tx details */}
-            <Box
-              display={Display.Flex}
-              flexDirection={FlexDirection.Column}
-              gap={2}
-            >
-              <TransactionDetailRow
-                title={t('bridgeTxDetailsStatus')}
-                value={
-                  <Text
-                    textTransform={TextTransform.Capitalize}
-                    color={status ? StatusToColorMap[status] : undefined}
-                  >
-                    {status?.toLowerCase()}
-                  </Text>
-                }
-              />
-              <TransactionDetailRow
-                title={t('bridgeTxDetailsBridging')}
-                value={
-                  <Box
-                    display={Display.Flex}
-                    gap={1}
-                    alignItems={AlignItems.center}
-                  >
-                    {srcNetworkIconName}
-                    <Icon name={IconName.Arrow2Right} size={IconSize.Sm} />
-                    {destNetworkIconName}
-                  </Box>
-                }
-              />
-              <TransactionDetailRow
-                title={t('bridgeTxDetailsTimestamp')}
-                value={t('bridgeTxDetailsTimestampValue', [
-                  formatDate(srcChainTxMeta?.time, 'MMM d, yyyy'),
-                  formatDate(srcChainTxMeta?.time, 'hh:mm a'),
-                ])}
-              />
-            </Box>
-
-            <Divider />
+          <Divider />
 
-            {/* Bridge tx details 2 */}
-            <Box
-              display={Display.Flex}
-              flexDirection={FlexDirection.Column}
-              gap={2}
-            >
-              <TransactionDetailRow
-                title={t('bridgeTxDetailsYouSent')}
-                value={
-                  <Box
-                    display={Display.Flex}
-                    gap={1}
-                    alignItems={AlignItems.center}
-                  >
-                    {t('bridgeTxDetailsTokenAmountOnChain', [
-                      bridgeAmountSent,
-                      bridgeHistoryItem?.quote.srcAsset.symbol,
-                    ])}
-                    {srcNetworkIconName}
-                  </Box>
-                }
-              />
-              {bridgeAmountReceived &&
-                bridgeHistoryItem?.quote.destAsset.symbol && (
-                  <TransactionDetailRow
-                    title={t('bridgeTxDetailsYouReceived')}
-                    value={
-                      <Box
-                        display={Display.Flex}
-                        gap={1}
-                        alignItems={AlignItems.center}
-                      >
-                        {t('bridgeTxDetailsTokenAmountOnChain', [
-                          bridgeAmountReceived,
-                          bridgeHistoryItem.quote.destAsset.symbol,
-                        ])}
-                        {destNetworkIconName}
-                      </Box>
-                    }
-                  />
-                )}
-              <TransactionDetailRow
-                title={t('bridgeTxDetailsTotalGasFee')}
-                value={
-                  <UserPreferencedCurrencyDisplay
-                    currency={data?.nativeCurrency}
-                    denomination={EtherDenomination.ETH}
-                    numberOfDecimals={6}
-                    value={data?.hexGasTotal}
-                    type={PRIMARY}
-                  />
-                }
-              />
-            </Box>
+          {/* Bridge tx details 2 */}
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            gap={2}
+          >
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsYouSent')}
+              value={
+                <Box
+                  display={Display.Flex}
+                  gap={1}
+                  alignItems={AlignItems.center}
+                >
+                  {t('bridgeTxDetailsTokenAmountOnChain', [
+                    bridgeAmountSent,
+                    bridgeHistoryItem?.quote.srcAsset.symbol,
+                  ])}
+                  {srcNetworkIconName}
+                </Box>
+              }
+            />
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsYouReceived')}
+              value={
+                <Box
+                  display={Display.Flex}
+                  gap={1}
+                  alignItems={AlignItems.center}
+                >
+                  {t('bridgeTxDetailsTokenAmountOnChain', [
+                    bridgeAmountReceived,
+                    bridgeHistoryItem?.quote.destAsset.symbol,
+                  ])}
+                  {destNetworkIconName}
+                </Box>
+              }
+            />
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsTotalGasFee')}
+              value={
+                <UserPreferencedCurrencyDisplay
+                  currency={data?.nativeCurrency}
+                  denomination={EtherDenomination.ETH}
+                  numberOfDecimals={6}
+                  value={data?.hexGasTotal}
+                  type={PRIMARY}
+                />
+              }
+            />
+          </Box>
 
-            <Divider />
+          <Divider />
 
-            {/* Generic tx details */}
-            <Box
-              display={Display.Flex}
-              flexDirection={FlexDirection.Column}
-              gap={2}
-            >
-              <TransactionDetailRow
-                title={t('bridgeTxDetailsNonce')}
-                value={
-                  srcChainTxMeta?.txParams.nonce
-                    ? hexToDecimal(srcChainTxMeta?.txParams.nonce)
-                    : undefined
-                }
-              />
+          {/* Generic tx details */}
+          <Box
+            display={Display.Flex}
+            flexDirection={FlexDirection.Column}
+            gap={2}
+          >
+            <TransactionDetailRow
+              title={t('bridgeTxDetailsNonce')}
+              value={
+                srcChainTxMeta?.txParams.nonce
+                  ? hexToDecimal(srcChainTxMeta?.txParams.nonce)
+                  : undefined
+              }
+            />
 
-              <TransactionActivityLog
-                transactionGroup={transactionGroup}
-                className="transaction-list-item-details__transaction-activity-log"
-                isEarliestNonce={isEarliestNonce}
-              />
-            </Box>
+            <TransactionActivityLog
+              transactionGroup={transactionGroup}
+              className="transaction-list-item-details__transaction-activity-log"
+              isEarliestNonce={isEarliestNonce}
+            />
           </Box>
-        </Content>
-      </div>
+        </Box>
+      </Content>
     </div>
   );
 };

From 070a63d859d93e0dfff88e1e888e2038dc2da2d7 Mon Sep 17 00:00:00 2001
From: IF <139582705+infiniteflower@users.noreply.github.com>
Date: Fri, 20 Dec 2024 17:18:39 -0500
Subject: [PATCH 3/3] fix: not being able to see bottom of details

---
 ui/pages/bridge/index.scss                                  | 1 -
 ui/pages/bridge/transaction-details/index.scss              | 4 ++++
 ui/pages/bridge/transaction-details/transaction-details.tsx | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/pages/bridge/index.scss b/ui/pages/bridge/index.scss
index fc2ffafa6c5f..af7b5ee6fd3b 100644
--- a/ui/pages/bridge/index.scss
+++ b/ui/pages/bridge/index.scss
@@ -42,5 +42,4 @@
   height: 100%;
   min-width: 360px;
   max-width: 480px;
-  overflow-y: hidden;
 }
diff --git a/ui/pages/bridge/transaction-details/index.scss b/ui/pages/bridge/transaction-details/index.scss
index 7832fffdd6a5..8f7a53abac4c 100644
--- a/ui/pages/bridge/transaction-details/index.scss
+++ b/ui/pages/bridge/transaction-details/index.scss
@@ -1,4 +1,8 @@
 .bridge-transaction-details {
+  &__content {
+    overflow-y: hidden;
+  }
+
   &__icon-loading {
     animation: loading-dot 1.2s linear infinite;
   }
diff --git a/ui/pages/bridge/transaction-details/transaction-details.tsx b/ui/pages/bridge/transaction-details/transaction-details.tsx
index cc68c1adf765..48804dd3283f 100644
--- a/ui/pages/bridge/transaction-details/transaction-details.tsx
+++ b/ui/pages/bridge/transaction-details/transaction-details.tsx
@@ -268,7 +268,7 @@ const CrossChainSwapTxDetails = () => {
       >
         {t('bridge')} details
       </Header>
-      <Content>
+      <Content className="bridge-transaction-details__content">
         <Box
           display={Display.Flex}
           flexDirection={FlexDirection.Column}