From 62f0e0955faea5f1bdfa93f90f68ddc124584370 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Sat, 5 Aug 2023 11:11:27 -0500
Subject: [PATCH] Fix #20184 - Prevent overflow within the activity list
 (#20188)

* Fix #20184 - Prevent overflow within the activity list

* removing inline style, updating snap

---------

Co-authored-by: Victor Thomas <10986371+vthomas13@users.noreply.github.com>
---
 .../__snapshots__/activity-list-item.test.js.snap           | 4 ++--
 .../multichain/activity-list-item/activity-list-item.js     | 6 +++++-
 ui/components/multichain/activity-list-item/index.scss      | 4 ++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
index 92e55f2ed..a7dd27534 100644
--- a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
+++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap
@@ -10,7 +10,7 @@ exports[`ActivityListItem should match snapshot with no props 1`] = `
       class="mm-box mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--width-full"
     >
       <div
-        class="mm-box mm-box--display-inline-flex mm-box--width-full"
+        class="mm-box activity-list-item__content-container mm-box--display-inline-flex mm-box--width-full"
       >
         <div
           class="mm-box activity-list-item__detail-container mm-box--display-inline-flex mm-box--flex-direction-column mm-box--width-1/3 mm-box--sm:width-7/12"
@@ -52,7 +52,7 @@ exports[`ActivityListItem should match snapshot with props 1`] = `
         />
       </div>
       <div
-        class="mm-box mm-box--display-inline-flex mm-box--width-full"
+        class="mm-box activity-list-item__content-container mm-box--display-inline-flex mm-box--width-full"
       >
         <div
           class="mm-box activity-list-item__detail-container mm-box--display-inline-flex mm-box--flex-direction-column mm-box--width-1/3 mm-box--sm:width-7/12"
diff --git a/ui/components/multichain/activity-list-item/activity-list-item.js b/ui/components/multichain/activity-list-item/activity-list-item.js
index 44a942bf0..e2a2f3100 100644
--- a/ui/components/multichain/activity-list-item/activity-list-item.js
+++ b/ui/components/multichain/activity-list-item/activity-list-item.js
@@ -66,7 +66,11 @@ export const ActivityListItem = ({
         gap={4}
       >
         {icon && <Box display={Display.InlineFlex}>{icon}</Box>}
-        <Box display={Display.InlineFlex} width={BlockSize.Full}>
+        <Box
+          display={Display.InlineFlex}
+          width={BlockSize.Full}
+          className="activity-list-item__content-container"
+        >
           <Box
             display={Display.InlineFlex}
             width={[BlockSize.OneThird, BlockSize.SevenTwelfths]}
diff --git a/ui/components/multichain/activity-list-item/index.scss b/ui/components/multichain/activity-list-item/index.scss
index 125a7a2db..1b4de0ae4 100644
--- a/ui/components/multichain/activity-list-item/index.scss
+++ b/ui/components/multichain/activity-list-item/index.scss
@@ -1,6 +1,10 @@
 .activity-list-item {
   cursor: pointer;
 
+  &__content-container {
+    overflow: hidden;
+  }
+
   &__primary-currency {
     max-width: 130px;