Repository: gitify-app/gitify
Pull request #1361 (2024-07-11 00:16:06)

fix: alignment of notification title and number


Patch:
diff --git a/.husky/pre-commit b/.husky/pre-commit
index cb2c84d5..09dd6bf4 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,1 +1,1 @@
-pnpm lint-staged
+pnpx lint-staged
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 5f635e21..11f6749e 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -107,14 +107,14 @@ export const NotificationRow: FC<INotificationRow> = ({
         <NotificationHeader notification={notification} />
 
         <div
-          className="mb-1 truncate text-sm"
+          className="flex gap-1 items-center mb-1 truncate text-sm"
           role="main"
           title={notificationTitle}
         >
           {notification.subject.title}
           <span
             className={cn(
-              'text-xxs ml-1',
+              'text-xxs',
               Opacity.READ,
               !settings.showNumber && 'hidden',
             )}


Test patch:
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index cec4888c..6a5364c5 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -116,13 +116,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
           </div>
           <div
-            class="mb-1 truncate text-sm"
+            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="text-xxs ml-1 opacity-50"
+              class="text-xxs opacity-50"
             />
           </div>
           <div
@@ -315,13 +315,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             </span>
           </div>
           <div
-            class="mb-1 truncate text-sm"
+            class="flex gap-1 items-center mb-1 truncate text-sm"
             role="main"
             title="Improve the UI"
           >
             Improve the UI
             <span
-              class="text-xxs ml-1 opacity-50"
+              class="text-xxs opacity-50"
             />
           </div>
           <div
@@ -540,13 +540,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
         </div>
         <div
-          class="mb-1 truncate text-sm"
+          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="text-xxs ml-1 opacity-50"
+            class="text-xxs opacity-50"
           />
         </div>
         <div
@@ -739,13 +739,13 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
           </span>
         </div>
         <div
-          class="mb-1 truncate text-sm"
+          class="flex gap-1 items-center mb-1 truncate text-sm"
           role="main"
           title="Improve the UI"
         >
           Improve the UI
           <span
-            class="text-xxs ml-1 opacity-50"
+            class="text-xxs opacity-50"
           />
         </div>
         <div
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index c30e3a4b..e51ae823 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -53,13 +53,13 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
             </span>
           </div>
           <div
-            class="mb-1 truncate text-sm"
+            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="text-xxs ml-1 opacity-50"
+              class="text-xxs opacity-50"
             />
           </div>
           <div
@@ -255,13 +255,13 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           </span>
         </div>
         <div
-          class="mb-1 truncate text-sm"
+          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="text-xxs ml-1 opacity-50"
+            class="text-xxs opacity-50"
           />
         </div>
         <div
@@ -497,13 +497,13 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
           class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 truncate text-sm"
+            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="text-xxs ml-1 opacity-50"
+              class="text-xxs opacity-50"
             />
           </div>
           <div
@@ -682,13 +682,13 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
         class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 truncate text-sm"
+          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="text-xxs ml-1 opacity-50"
+            class="text-xxs opacity-50"
           />
         </div>
         <div
@@ -924,13 +924,13 @@ exports[`components/NotificationRow.tsx should render itself & its children - hi
           class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
         >
           <div
-            class="mb-1 truncate text-sm"
+            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="text-xxs ml-1 opacity-50 hidden"
+              class="text-xxs opacity-50 hidden"
             />
           </div>
           <div
@@ -1109,13 +1109,13 @@ exports[`components/NotificationRow.tsx should render itself & its children - hi
         class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap cursor-pointer"
       >
         <div
-          class="mb-1 truncate text-sm"
+          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="text-xxs ml-1 opacity-50 hidden"
+            class="text-xxs opacity-50 hidden"
           />
         </div>
         <div