fix: overflow ellipsis (#1375)

gitify-app · Jul 15, 2024 · 067d154 · 067d154
1 parent c8f44f2
commit 067d154
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 30 deletions.
diff --git 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
@@ -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
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap