From 905a52ea61990c6cae71eaa78a8aa9f188368da9 Mon Sep 17 00:00:00 2001
From: Dan Peterson <dan@dan-peterson.ca>
Date: Mon, 4 Oct 2021 08:21:59 -0500
Subject: [PATCH] adjust css for toast message so that it behaves as expected
 (text truncation via ellipsis) (#7213)

---
 ui/component/snackBar/view.jsx    | 6 +++---
 ui/scss/component/_snack-bar.scss | 7 +++++--
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/component/snackBar/view.jsx b/ui/component/snackBar/view.jsx
index f0f5c1254..535531373 100644
--- a/ui/component/snackBar/view.jsx
+++ b/ui/component/snackBar/view.jsx
@@ -7,7 +7,7 @@ import Icon from 'component/common/icon';
 import LbcMessage from 'component/common/lbc-message';
 
 type Props = {
-  removeSnack: any => void,
+  removeSnack: (any) => void,
   snack: ?{
     linkTarget: ?string,
     linkText: ?string,
@@ -53,9 +53,9 @@ class SnackBar extends React.PureComponent<Props> {
         <div className="snack-bar__message">
           <Icon icon={isError ? ICONS.ALERT : ICONS.COMPLETED} size={18} />
 
-          <div>
+          <p className="snack-bar__messageText">
             <LbcMessage>{message}</LbcMessage>
-          </div>
+          </p>
         </div>
         {linkText && linkTarget && (
           // This is a little weird because of `linkTarget` code in `lbry-redux`
diff --git a/ui/scss/component/_snack-bar.scss b/ui/scss/component/_snack-bar.scss
index 57d51e318..69922b846 100644
--- a/ui/scss/component/_snack-bar.scss
+++ b/ui/scss/component/_snack-bar.scss
@@ -47,8 +47,6 @@
 }
 
 .snack-bar__message {
-  overflow: hidden;
-  text-overflow: ellipsis;
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -64,3 +62,8 @@
     min-width: 1rem;
   }
 }
+.snack-bar__messageText {
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}