From 067d154b60df2e024ff65ea21125e6b259436d61 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Mon, 15 Jul 2024 09:07:32 -0400
Subject: [PATCH] fix: overflow ellipsis (#1375)

---
 src/components/NotificationRow.tsx            |  4 +-
 src/components/RepositoryNotifications.tsx    |  2 +-
 .../AccountNotifications.test.tsx.snap        | 32 +++++++++----
 .../NotificationRow.test.tsx.snap             | 48 ++++++++++++++-----
 .../RepositoryNotifications.test.tsx.snap     | 14 +++---
 5 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 11f6749e5..9d802f0fd 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -101,7 +101,7 @@ export const NotificationRow: FC<INotificationRow> = ({
       </div>
 
       <div
-        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        className="flex-1 truncate cursor-pointer"
         onClick={() => handleNotification()}
       >
         <NotificationHeader notification={notification} />
@@ -111,7 +111,7 @@ export const NotificationRow: FC<INotificationRow> = ({
           role="main"
           title={notificationTitle}
         >
-          {notification.subject.title}
+          <span className="truncate">{notification.subject.title}</span>
           <span
             className={cn(
               'text-xxs',
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index 7ea78c7e2..c0d49d267 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -67,7 +67,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
       >
         <div
           className={cn(
-            'flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium',
+            'flex flex-1 gap-4 items-center truncate text-sm font-medium',
             Opacity.MEDIUM,
           )}
         >
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 6a5364c54..a466615a7 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -96,7 +96,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+          class="flex-1 truncate cursor-pointer"
         >
           <div
             class="mb-1 flex items-center gap-1 text-xs font-medium opacity-80"
@@ -120,7 +120,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             role="main"
             title="I am a robot and this is a test!"
           >
-            I am a robot and this is a test!
+            <span
+              class="truncate"
+            >
+              I am a robot and this is a test!
+            </span>
             <span
               class="text-xxs opacity-50"
             />
@@ -295,7 +299,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+          class="flex-1 truncate cursor-pointer"
         >
           <div
             class="mb-1 flex items-center gap-1 text-xs font-medium opacity-80"
@@ -319,7 +323,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             role="main"
             title="Improve the UI"
           >
-            Improve the UI
+            <span
+              class="truncate"
+            >
+              Improve the UI
+            </span>
             <span
               class="text-xxs opacity-50"
             />
@@ -520,7 +528,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        class="flex-1 truncate cursor-pointer"
       >
         <div
           class="mb-1 flex items-center gap-1 text-xs font-medium opacity-80"
@@ -544,7 +552,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           role="main"
           title="I am a robot and this is a test!"
         >
-          I am a robot and this is a test!
+          <span
+            class="truncate"
+          >
+            I am a robot and this is a test!
+          </span>
           <span
             class="text-xxs opacity-50"
           />
@@ -719,7 +731,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        class="flex-1 truncate cursor-pointer"
       >
         <div
           class="mb-1 flex items-center gap-1 text-xs font-medium opacity-80"
@@ -743,7 +755,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           role="main"
           title="Improve the UI"
         >
-          Improve the UI
+          <span
+            class="truncate"
+          >
+            Improve the UI
+          </span>
           <span
             class="text-xxs opacity-50"
           />
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index e51ae8235..83c13cb35 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+          class="flex-1 truncate cursor-pointer"
         >
           <div
             class="mb-1 flex items-center gap-1 text-xs font-medium opacity-80"
@@ -57,7 +57,11 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             role="main"
             title="I am a robot and this is a test!"
           >
-            I am a robot and this is a test!
+            <span
+              class="truncate"
+            >
+              I am a robot and this is a test!
+            </span>
             <span
               class="text-xxs opacity-50"
             />
@@ -235,7 +239,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        class="flex-1 truncate cursor-pointer"
       >
         <div
           class="mb-1 flex items-center gap-1 text-xs font-medium opacity-80"
@@ -259,7 +263,11 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           role="main"
           title="I am a robot and this is a test!"
         >
-          I am a robot and this is a test!
+          <span
+            class="truncate"
+          >
+            I am a robot and this is a test!
+          </span>
           <span
             class="text-xxs opacity-50"
           />
@@ -494,14 +502,18 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+          class="flex-1 truncate cursor-pointer"
         >
           <div
             class="flex gap-1 items-center mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
-            I am a robot and this is a test!
+            <span
+              class="truncate"
+            >
+              I am a robot and this is a test!
+            </span>
             <span
               class="text-xxs opacity-50"
             />
@@ -679,14 +691,18 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        class="flex-1 truncate cursor-pointer"
       >
         <div
           class="flex gap-1 items-center mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
-          I am a robot and this is a test!
+          <span
+            class="truncate"
+          >
+            I am a robot and this is a test!
+          </span>
           <span
             class="text-xxs opacity-50"
           />
@@ -921,14 +937,18 @@ exports[`components/NotificationRow.tsx should render itself & its children - hi
           </svg>
         </div>
         <div
-          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+          class="flex-1 truncate cursor-pointer"
         >
           <div
             class="flex gap-1 items-center mb-1 truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
-            I am a robot and this is a test!
+            <span
+              class="truncate"
+            >
+              I am a robot and this is a test!
+            </span>
             <span
               class="text-xxs opacity-50 hidden"
             />
@@ -1106,14 +1126,18 @@ exports[`components/NotificationRow.tsx should render itself & its children - hi
         </svg>
       </div>
       <div
-        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
+        class="flex-1 truncate cursor-pointer"
       >
         <div
           class="flex gap-1 items-center mb-1 truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
-          I am a robot and this is a test!
+          <span
+            class="truncate"
+          >
+            I am a robot and this is a test!
+          </span>
           <span
             class="text-xxs opacity-50 hidden"
           />
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 28840d6aa..34fac98d9 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
         >
           <img
             alt="gitify-app/notifications-test's avatar"
@@ -103,7 +103,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+        class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
       >
         <img
           alt="gitify-app/notifications-test's avatar"
@@ -254,7 +254,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -350,7 +350,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -453,7 +453,7 @@ exports[`components/Repository.tsx should toggle account notifications visibilit
       class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+        class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"
@@ -613,7 +613,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
         class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+          class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
         >
           <svg
             aria-hidden="true"
@@ -716,7 +716,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
       class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 gap-4 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium opacity-80"
+        class="flex flex-1 gap-4 items-center truncate text-sm font-medium opacity-80"
       >
         <svg
           aria-hidden="true"