diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index f4f726a37..76575e2fc 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -105,10 +105,10 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   return (
     <div
       id={notification.id}
-      className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      className="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
     >
       <div
-        className={`flex justify-center items-center w-5 ${iconColor}`}
+        className={`flex justify-center items-center mr-3 w-5 ${iconColor}`}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
@@ -120,122 +120,115 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
         onKeyDown={() => openNotification()}
       >
         <div
-          className="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          className="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="text-xs text-capitalize">
-          <span title={updatedLabel} className="flex items-center gap-1">
-            {notification.subject.user ? (
-              <span
-                title="View User Profile"
-                onClick={openUserProfile}
-                onKeyDown={openUserProfile}
-                className="flex-shrink-0"
-              >
-                <img
-                  className="rounded-full w-4 h-4 object-cover cursor-pointer"
-                  src={notification.subject.user.avatar_url}
-                  title={notification.subject.user.login}
-                  alt={`${notification.subject.user.login}'s avatar`}
-                />
-              </span>
-            ) : (
-              <span>
-                <FeedPersonIcon
-                  size={16}
-                  className="text-gray-500 dark:text-gray-300"
-                />
-              </span>
-            )}
-            <span title={reason.description}>{reason.title}</span>
-            <span>{updatedAt}</span>
-            {settings.showPills && (
-              <span className="hover:overflow-auto">
-                {notification.subject?.linkedIssues?.length > 0 && (
-                  <span title={linkedIssuesPillDescription}>
-                    <button type="button" className={Constants.PILL_CLASS_NAME}>
-                      <IssueClosedIcon
-                        size={12}
-                        className={`mr-1 ${IconColor.GREEN}`}
-                        aria-label={linkedIssuesPillDescription}
-                      />
-                      {notification.subject.linkedIssues.length}
-                    </button>
-                  </span>
-                )}
-                {notification.subject.reviews
-                  ? notification.subject.reviews.map((review) => {
-                      const icon = getPullRequestReviewIcon(review);
-                      if (!icon) {
-                        return null;
-                      }
+        <div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
+          {notification.subject.user ? (
+            <div
+              title="View User Profile"
+              onClick={openUserProfile}
+              onKeyDown={openUserProfile}
+              className="flex-shrink-0"
+            >
+              <img
+                className="rounded-full w-4 h-4 object-cover cursor-pointer"
+                src={notification.subject.user.avatar_url}
+                title={notification.subject.user.login}
+                alt={`${notification.subject.user.login}'s avatar`}
+              />
+            </div>
+          ) : (
+            <div>
+              <FeedPersonIcon
+                size={16}
+                className="text-gray-500 dark:text-gray-300"
+              />
+            </div>
+          )}
+          <div title={reason.description}>{reason.title}</div>
+          <div title={updatedLabel}>{updatedAt}</div>
+          {settings.showPills && (
+            <div>
+              {notification.subject?.linkedIssues?.length > 0 && (
+                <span title={linkedIssuesPillDescription}>
+                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <IssueClosedIcon
+                      size={12}
+                      className={`mr-1 ${IconColor.GREEN}`}
+                      aria-label={linkedIssuesPillDescription}
+                    />
+                    {notification.subject.linkedIssues.length}
+                  </button>
+                </span>
+              )}
+              {notification.subject.reviews?.map((review) => {
+                const icon = getPullRequestReviewIcon(review);
+                if (!icon) {
+                  return null;
+                }
 
-                      return (
-                        <span key={review.state} title={icon.description}>
-                          <button
-                            type="button"
-                            className={Constants.PILL_CLASS_NAME}
-                          >
-                            <icon.type
-                              size={12}
-                              className={`mr-1 ${icon.color}`}
-                              aria-label={icon.description}
-                            />
-                            {review.users.length}
-                          </button>
-                        </span>
-                      );
-                    })
-                  : null}
-                {notification.subject?.comments > 0 && (
-                  <span title={commentsPillDescription}>
+                return (
+                  <span key={review.state} title={icon.description}>
                     <button type="button" className={Constants.PILL_CLASS_NAME}>
-                      <CommentIcon
+                      <icon.type
                         size={12}
-                        className={`mr-1 ${IconColor.GRAY}`}
-                        aria-label={commentsPillDescription}
+                        className={`mr-1 ${icon.color}`}
+                        aria-label={icon.description}
                       />
-                      {notification.subject.comments}
+                      {review.users.length}
                     </button>
                   </span>
-                )}
-                {notification.subject?.labels?.length > 0 && (
-                  <span title={labelsPillDescription}>
-                    <button type="button" className={Constants.PILL_CLASS_NAME}>
-                      <TagIcon
-                        size={12}
-                        className={`mr-1 ${IconColor.GRAY}`}
-                        aria-label={labelsPillDescription}
-                      />
-                      {notification.subject.labels.length}
-                    </button>
-                  </span>
-                )}
-                {notification.subject.milestone && (
-                  <span
-                    className="ml-1"
-                    title={notification.subject.milestone.title}
-                  >
-                    <button type="button" className={Constants.PILL_CLASS_NAME}>
-                      <MilestoneIcon
-                        size={12}
-                        className={
-                          notification.subject.milestone.state === 'open'
-                            ? IconColor.GREEN
-                            : IconColor.RED
-                        }
-                        aria-label={notification.subject.milestone.title}
-                      />
-                    </button>
-                  </span>
-                )}
-              </span>
-            )}
-          </span>
+                );
+              })}
+              {notification.subject?.comments > 0 && (
+                <span title={commentsPillDescription}>
+                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <CommentIcon
+                      size={12}
+                      className={`mr-1 ${IconColor.GRAY}`}
+                      aria-label={commentsPillDescription}
+                    />
+                    {notification.subject.comments}
+                  </button>
+                </span>
+              )}
+              {notification.subject?.labels?.length > 0 && (
+                <span title={labelsPillDescription}>
+                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <TagIcon
+                      size={12}
+                      className={`mr-1 ${IconColor.GRAY}`}
+                      aria-label={labelsPillDescription}
+                    />
+                    {notification.subject.labels.length}
+                  </button>
+                </span>
+              )}
+              {notification.subject.milestone && (
+                <span
+                  className="ml-1"
+                  title={notification.subject.milestone.title}
+                >
+                  <button type="button" className={Constants.PILL_CLASS_NAME}>
+                    <MilestoneIcon
+                      size={12}
+                      className={
+                        notification.subject.milestone.state === 'open'
+                          ? IconColor.GREEN
+                          : IconColor.RED
+                      }
+                      aria-label={notification.subject.milestone.title}
+                    />
+                  </button>
+                </span>
+              )}
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 47074f314..2b7877617 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -52,7 +52,7 @@ export const RepositoryNotifications: FC<IProps> = ({
             <MarkGithubIcon size={18} />
           )}
           <span
-            className="cursor-pointer"
+            className="cursor-pointer truncate"
             onClick={openBrowser}
             onKeyDown={openBrowser}
           >
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 7cf6e5b80..d8901bfcc 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -36,151 +36,146 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                title="You're watching the repository."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="Linked to issues #1, #2"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                    />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                    />
+                  </svg>
+                  2
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="octocat approved these changes"
               >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="gitify-app requested changes"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="1 comment"
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="1 comment"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="1 comment"
+                    class="mr-1 text-gray-500 dark:text-gray-300"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="1 comment"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -255,11 +250,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -285,151 +280,146 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              title="You're watching the repository."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="octocat approved these changes"
             >
-              <span
-                title="Linked to issues #1, #2"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="Linked to issues #1, #2"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                    />
-                    <path
-                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                title="octocat approved these changes"
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="1 comment"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="1 comment"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="1 comment"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="1 comment"
-                    class="mr-1 text-gray-500 dark:text-gray-300"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -561,11 +551,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -591,151 +581,146 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                title="You're watching the repository."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="Linked to issues #1, #2"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                    />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                    />
+                  </svg>
+                  2
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="octocat approved these changes"
               >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="gitify-app requested changes"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="2 comments"
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="2 comments"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="2 comments"
+                    class="mr-1 text-gray-500 dark:text-gray-300"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="2 comments"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
+                    <path
+                      d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                    />
+                  </svg>
+                  2
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -810,11 +795,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -840,151 +825,146 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
             <span
-              title="You're watching the repository."
+              title="octocat approved these changes"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="gitify-app requested changes"
             >
-              <span
-                title="Linked to issues #1, #2"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="Linked to issues #1, #2"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                    />
-                    <path
-                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                title="octocat approved these changes"
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="2 comments"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="2 comments"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="2 comments"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="2 comments"
-                    class="mr-1 text-gray-500 dark:text-gray-300"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
+                  <path
+                    d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -1116,11 +1096,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -1146,126 +1126,121 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                title="You're watching the repository."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="Linked to issues #1, #2"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                    />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                    />
+                  </svg>
+                  2
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="octocat approved these changes"
               >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="gitify-app requested changes"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -1340,11 +1315,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -1370,126 +1345,121 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              title="You're watching the repository."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="octocat approved these changes"
             >
-              <span
-                title="Linked to issues #1, #2"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="Linked to issues #1, #2"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                    />
-                    <path
-                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                title="octocat approved these changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -1604,343 +1574,63 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
   "queryAllByTitle": [Function],
   "queryByAltText": [Function],
   "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`components/NotificationRow.tsx notification pills / metrics label pills should render labels pill 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
-        id="138661096"
-      >
-        <div
-          class="flex justify-center items-center w-5 text-green-500"
-          title="Open Issue"
-        >
-          <svg
-            aria-label="Issue"
-            class="octicon octicon-issue-opened"
-            fill="currentColor"
-            focusable="false"
-            height="18"
-            role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="18"
-          >
-            <path
-              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-            />
-            <path
-              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-            />
-          </svg>
-        </div>
-        <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
-        >
-          <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
-            role="main"
-            title="I am a robot and this is a test!"
-          >
-            I am a robot and this is a test!
-          </div>
-          <div
-            class="text-xs text-capitalize"
-          >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
-            >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
-              <span
-                title="You're watching the repository."
-              >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
-              </span>
-              <span
-                class="hover:overflow-auto"
-              >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="2 comments"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="2 comments"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="🏷️ enhancement
-🏷️ good-first-issue"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="🏷️ enhancement
-🏷️ good-first-issue"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-        <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
-        >
-          <button
-            class="focus:outline-none h-full hover:text-green-500"
-            title="Mark as Done"
-            type="button"
-          >
-            <svg
-              aria-label="Mark as Done"
-              class="octicon octicon-check"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <button
-            class="focus:outline-none h-full hover:text-red-500"
-            title="Unsubscribe from Thread"
-            type="button"
-          >
-            <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
-              fill="currentColor"
-              focusable="false"
-              height="14"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="14"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <button
-            class="focus:outline-none h-full hover:text-green-500"
-            title="Mark as Read"
-            type="button"
-          >
-            <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
-              fill="currentColor"
-              focusable="false"
-              height="14"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="14"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
-      id="138661096"
-    >
-      <div
-        class="flex justify-center items-center w-5 text-green-500"
-        title="Open Issue"
-      >
-        <svg
-          aria-label="Issue"
-          class="octicon octicon-issue-opened"
-          fill="currentColor"
-          focusable="false"
-          height="18"
-          role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="18"
-        >
-          <path
-            d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-          />
-          <path
-            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-          />
-        </svg>
-      </div>
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/NotificationRow.tsx notification pills / metrics label pills should render labels pill 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        id="138661096"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
-          role="main"
-          title="I am a robot and this is a test!"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          title="Open Issue"
         >
-          I am a robot and this is a test!
+          <svg
+            aria-label="Issue"
+            class="octicon octicon-issue-opened"
+            fill="currentColor"
+            focusable="false"
+            height="18"
+            role="img"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="18"
+          >
+            <path
+              d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div
+            class="mb-1 text-sm truncate cursor-pointer"
+            role="main"
+            title="I am a robot and this is a test!"
+          >
+            I am a robot and this is a test!
+          </div>
+          <div
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span>
+            <div>
               <svg
                 aria-hidden="true"
                 class="text-gray-500 dark:text-gray-300"
@@ -1955,23 +1645,23 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                   d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
                 />
               </svg>
-            </span>
-            <span
+            </div>
+            <div
               title="You're watching the repository."
             >
               Updated
-            </span>
-            <span>
-              over 6 years ago
-            </span>
-            <span
-              class="hover:overflow-auto"
+            </div>
+            <div
+              title="Updated 7 years ago"
             >
+              7 years ago
+            </div>
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -1999,7 +1689,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2024,7 +1714,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2049,7 +1739,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2075,7 +1765,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
 🏷️ good-first-issue"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2097,8 +1787,278 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                   2
                 </button>
               </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        >
+          <button
+            class="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Done"
+            type="button"
+          >
+            <svg
+              aria-label="Mark as Done"
+              class="octicon octicon-check"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="focus:outline-none h-full hover:text-red-500"
+            title="Unsubscribe from Thread"
+            type="button"
+          >
+            <svg
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <path
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Read"
+            type="button"
+          >
+            <svg
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      id="138661096"
+    >
+      <div
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        title="Open Issue"
+      >
+        <svg
+          aria-label="Issue"
+          class="octicon octicon-issue-opened"
+          fill="currentColor"
+          focusable="false"
+          height="18"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="18"
+        >
+          <path
+            d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+          />
+          <path
+            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+      >
+        <div
+          class="mb-1 text-sm truncate cursor-pointer"
+          role="main"
+          title="I am a robot and this is a test!"
+        >
+          I am a robot and this is a test!
+        </div>
+        <div
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+        >
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              title="octocat approved these changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="2 comments"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="2 comments"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              title="🏷️ enhancement
+🏷️ good-first-issue"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="🏷️ enhancement
+🏷️ good-first-issue"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -2230,11 +2190,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -2260,126 +2220,121 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                title="You're watching the repository."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="Linked to issues #1, #2"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                    />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                    />
+                  </svg>
+                  2
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="octocat approved these changes"
               >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="gitify-app requested changes"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -2454,11 +2409,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -2484,126 +2439,121 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              title="You're watching the repository."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="octocat approved these changes"
             >
-              <span
-                title="Linked to issues #1, #2"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="Linked to issues #1, #2"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                    />
-                    <path
-                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                title="octocat approved these changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -2735,11 +2685,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -2765,126 +2715,121 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                title="You're watching the repository."
+                title="Linked to issue #1"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="Linked to issue #1"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                    />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="octocat approved these changes"
               >
-                <span
-                  title="Linked to issue #1"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issue #1"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="gitify-app requested changes"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -2959,11 +2904,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -2989,126 +2934,121 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              title="You're watching the repository."
+              title="Linked to issue #1"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issue #1"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="octocat approved these changes"
             >
-              <span
-                title="Linked to issue #1"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="Linked to issue #1"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                    />
-                    <path
-                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="octocat approved these changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -3240,11 +3180,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -3270,203 +3210,198 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
+              <span
+                title="Linked to issues #1, #2"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
+                  <svg
+                    aria-label="Linked to issues #1, #2"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                    />
+                    <path
+                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                    />
+                  </svg>
+                  2
+                </button>
               </span>
               <span
-                title="You're watching the repository."
+                title="octocat approved these changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="gitify-app requested changes"
               >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="2 comments"
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
+              </span>
+              <span
+                title="2 comments"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="2 comments"
+                    class="mr-1 text-gray-500 dark:text-gray-300"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="2 comments"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="🏷️ enhancement
+                    <path
+                      d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                    />
+                  </svg>
+                  2
+                </button>
+              </span>
+              <span
+                title="🏷️ enhancement
 🏷️ good-first-issue"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="🏷️ enhancement
+                  <svg
+                    aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  class="ml-1"
-                  title="Milestone 1"
+                    class="mr-1 text-gray-500 dark:text-gray-300"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+                    />
+                  </svg>
+                  2
+                </button>
+              </span>
+              <span
+                class="ml-1"
+                title="Milestone 1"
+              >
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="Milestone 1"
+                    class="text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="Milestone 1"
-                      class="text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z"
-                      />
-                    </svg>
-                  </button>
-                </span>
+                    <path
+                      d="M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z"
+                    />
+                  </svg>
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -3541,11 +3476,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -3571,203 +3506,198 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              title="You're watching the repository."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="octocat approved these changes"
             >
-              <span
-                title="Linked to issues #1, #2"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="Linked to issues #1, #2"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                    />
-                    <path
-                      d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                title="octocat approved these changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="2 comments"
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="2 comments"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="2 comments"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="2 comments"
-                    class="mr-1 text-gray-500 dark:text-gray-300"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                title="🏷️ enhancement
+                  <path
+                    d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              title="🏷️ enhancement
 🏷️ good-first-issue"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="🏷️ enhancement
+                <svg
+                  aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-                    class="mr-1 text-gray-500 dark:text-gray-300"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
-                    />
-                  </svg>
-                  2
-                </button>
-              </span>
-              <span
-                class="ml-1"
-                title="Milestone 1"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              class="ml-1"
+              title="Milestone 1"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="Milestone 1"
+                  class="text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="Milestone 1"
-                    class="text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z"
-                    />
-                  </svg>
-                </button>
-              </span>
+                  <path
+                    d="M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z"
+                  />
+                </svg>
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -3899,11 +3829,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -3919,331 +3849,26 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             <path
               d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-            />
-            <path
-              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-            />
-          </svg>
-        </div>
-        <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
-        >
-          <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
-            role="main"
-            title="I am a robot and this is a test!"
-          >
-            I am a robot and this is a test!
-          </div>
-          <div
-            class="text-xs text-capitalize"
-          >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
-            >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
-              <span
-                title="You're watching the repository."
-              >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
-              </span>
-              <span
-                class="hover:overflow-auto"
-              >
-                <span
-                  title="Linked to issues #1, #2"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Linked to issues #1, #2"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
-                      />
-                      <path
-                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="octocat approved these changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="2 comments"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="2 comments"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  title="🏷️ enhancement
-🏷️ good-first-issue"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="🏷️ enhancement
-🏷️ good-first-issue"
-                      class="mr-1 text-gray-500 dark:text-gray-300"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
-                      />
-                    </svg>
-                    2
-                  </button>
-                </span>
-                <span
-                  class="ml-1"
-                  title="Milestone 1"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="Milestone 1"
-                      class="text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z"
-                      />
-                    </svg>
-                  </button>
-                </span>
-              </span>
-            </span>
-          </div>
-        </div>
-        <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
-        >
-          <button
-            class="focus:outline-none h-full hover:text-green-500"
-            title="Mark as Done"
-            type="button"
-          >
-            <svg
-              aria-label="Mark as Done"
-              class="octicon octicon-check"
-              fill="currentColor"
-              focusable="false"
-              height="16"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="16"
-            >
-              <path
-                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-              />
-            </svg>
-          </button>
-          <button
-            class="focus:outline-none h-full hover:text-red-500"
-            title="Unsubscribe from Thread"
-            type="button"
-          >
-            <svg
-              aria-label="Unsubscribe from Thread"
-              class="octicon octicon-bell-slash"
-              fill="currentColor"
-              focusable="false"
-              height="14"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="14"
-            >
-              <path
-                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
-              />
-            </svg>
-          </button>
-          <button
-            class="focus:outline-none h-full hover:text-green-500"
-            title="Mark as Read"
-            type="button"
-          >
-            <svg
-              aria-label="Mark as Read"
-              class="octicon octicon-read"
-              fill="currentColor"
-              focusable="false"
-              height="14"
-              role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 16 16"
-              width="14"
-            >
-              <path
-                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
-    <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
-      id="138661096"
-    >
-      <div
-        class="flex justify-center items-center w-5 text-green-500"
-        title="Open Issue"
-      >
-        <svg
-          aria-label="Issue"
-          class="octicon octicon-issue-opened"
-          fill="currentColor"
-          focusable="false"
-          height="18"
-          role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="18"
-        >
-          <path
-            d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-          />
-          <path
-            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
-          />
-        </svg>
-      </div>
-      <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
-      >
-        <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
-          role="main"
-          title="I am a robot and this is a test!"
-        >
-          I am a robot and this is a test!
+            />
+            <path
+              d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+            />
+          </svg>
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div
+            class="mb-1 text-sm truncate cursor-pointer"
+            role="main"
+            title="I am a robot and this is a test!"
+          >
+            I am a robot and this is a test!
+          </div>
+          <div
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span>
+            <div>
               <svg
                 aria-hidden="true"
                 class="text-gray-500 dark:text-gray-300"
@@ -4258,23 +3883,23 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                   d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
                 />
               </svg>
-            </span>
-            <span
+            </div>
+            <div
               title="You're watching the repository."
             >
               Updated
-            </span>
-            <span>
-              over 6 years ago
-            </span>
-            <span
-              class="hover:overflow-auto"
+            </div>
+            <div
+              title="Updated 7 years ago"
             >
+              7 years ago
+            </div>
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4302,7 +3927,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4327,7 +3952,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4352,7 +3977,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4378,7 +4003,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4405,7 +4030,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Milestone 1"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4425,8 +4050,303 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                   </svg>
                 </button>
               </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        >
+          <button
+            class="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Done"
+            type="button"
+          >
+            <svg
+              aria-label="Mark as Done"
+              class="octicon octicon-check"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="focus:outline-none h-full hover:text-red-500"
+            title="Unsubscribe from Thread"
+            type="button"
+          >
+            <svg
+              aria-label="Unsubscribe from Thread"
+              class="octicon octicon-bell-slash"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <path
+                d="m4.182 4.31.016.011 10.104 7.316.013.01 1.375.996a.75.75 0 1 1-.88 1.214L13.626 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947V5.305L.31 3.357a.75.75 0 1 1 .88-1.214Zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01c0 .005.002.009.005.012l.006.004.007.001ZM8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 1 1 4.38 1.55 5 5 0 0 1 13 5v2.373a.75.75 0 0 1-1.5 0V5A3.5 3.5 0 0 0 8 1.5ZM8 16a2 2 0 0 1-1.985-1.75c-.017-.137.097-.25.235-.25h3.5c.138 0 .252.113.235.25A2 2 0 0 1 8 16Z"
+              />
+            </svg>
+          </button>
+          <button
+            class="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Read"
+            type="button"
+          >
+            <svg
+              aria-label="Mark as Read"
+              class="octicon octicon-read"
+              fill="currentColor"
+              focusable="false"
+              height="14"
+              role="img"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="14"
+            >
+              <path
+                d="M7.115.65a1.752 1.752 0 0 1 1.77 0l6.25 3.663c.536.314.865.889.865 1.51v6.427A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25V5.823c0-.621.33-1.196.865-1.51Zm1.011 1.293a.252.252 0 0 0-.252 0l-5.72 3.353L6.468 7.76a2.748 2.748 0 0 1 3.066 0l4.312-2.464-5.719-3.353ZM13.15 12.5 8.772 9.06a1.25 1.25 0 0 0-1.544 0L2.85 12.5Zm1.35-5.85-3.687 2.106 3.687 2.897ZM5.187 8.756 1.5 6.65v5.003Z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      id="138661096"
+    >
+      <div
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        title="Open Issue"
+      >
+        <svg
+          aria-label="Issue"
+          class="octicon octicon-issue-opened"
+          fill="currentColor"
+          focusable="false"
+          height="18"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="18"
+        >
+          <path
+            d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+          />
+          <path
+            d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+          />
+        </svg>
+      </div>
+      <div
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+      >
+        <div
+          class="mb-1 text-sm truncate cursor-pointer"
+          role="main"
+          title="I am a robot and this is a test!"
+        >
+          I am a robot and this is a test!
+        </div>
+        <div
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+        >
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Linked to issues #1, #2"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+                  />
+                  <path
+                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              title="octocat approved these changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="gitify-app requested changes"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
+            </span>
+            <span
+              title="2 comments"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="2 comments"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              title="🏷️ enhancement
+🏷️ good-first-issue"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="🏷️ enhancement
+🏷️ good-first-issue"
+                  class="mr-1 text-gray-500 dark:text-gray-300"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
+                  />
+                </svg>
+                2
+              </button>
+            </span>
+            <span
+              class="ml-1"
+              title="Milestone 1"
+            >
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="Milestone 1"
+                  class="text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M7.75 0a.75.75 0 0 1 .75.75V3h3.634c.414 0 .814.147 1.13.414l2.07 1.75a1.75 1.75 0 0 1 0 2.672l-2.07 1.75a1.75 1.75 0 0 1-1.13.414H8.5v5.25a.75.75 0 0 1-1.5 0V10H2.75A1.75 1.75 0 0 1 1 8.25v-3.5C1 3.784 1.784 3 2.75 3H7V.75A.75.75 0 0 1 7.75 0Zm4.384 8.5a.25.25 0 0 0 .161-.06l2.07-1.75a.248.248 0 0 0 0-.38l-2.07-1.75a.25.25 0 0 0-.161-.06H2.75a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h9.384Z"
+                  />
+                </svg>
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -4558,11 +4478,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -4588,44 +4508,41 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
-            >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
-              <span
-                title="You're watching the repository."
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
-              </span>
-            </span>
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
+            >
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
           </div>
         </div>
         <div
@@ -4700,11 +4617,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -4730,44 +4647,41 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
-          >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
-            <span
-              title="You're watching the repository."
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
-            </span>
-          </span>
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
         </div>
       </div>
       <div
@@ -4899,11 +4813,11 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -4929,93 +4843,88 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="gitify-app updated over 6 years ago"
+            <div
+              class="flex-shrink-0"
+              title="View User Profile"
             >
+              <img
+                alt="gitify-app's avatar"
+                class="rounded-full w-4 h-4 object-cover cursor-pointer"
+                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                title="gitify-app"
+              />
+            </div>
+            <div
+              title="You're watching the repository."
+            >
+              Updated
+            </div>
+            <div
+              title="gitify-app updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                class="flex-shrink-0"
-                title="View User Profile"
-              >
-                <img
-                  alt="gitify-app's avatar"
-                  class="rounded-full w-4 h-4 object-cover cursor-pointer"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  title="gitify-app"
-                />
-              </span>
-              <span
-                title="You're watching the repository."
+                title="octocat approved these changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="gitify-app requested changes"
               >
-                <span
-                  title="octocat approved these changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -5090,11 +4999,11 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5120,93 +5029,88 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="gitify-app updated over 6 years ago"
+          <div
+            class="flex-shrink-0"
+            title="View User Profile"
           >
+            <img
+              alt="gitify-app's avatar"
+              class="rounded-full w-4 h-4 object-cover cursor-pointer"
+              src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+              title="gitify-app"
+            />
+          </div>
+          <div
+            title="You're watching the repository."
+          >
+            Updated
+          </div>
+          <div
+            title="gitify-app updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              class="flex-shrink-0"
-              title="View User Profile"
-            >
-              <img
-                alt="gitify-app's avatar"
-                class="rounded-full w-4 h-4 object-cover cursor-pointer"
-                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                title="gitify-app"
-              />
-            </span>
-            <span
-              title="You're watching the repository."
+              title="octocat approved these changes"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="gitify-app requested changes"
             >
-              <span
-                title="octocat approved these changes"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -5338,11 +5242,11 @@ exports[`components/NotificationRow.tsx should render itself & its children when
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -5368,93 +5272,88 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="gitify-app updated over 6 years ago"
+            <div
+              class="flex-shrink-0"
+              title="View User Profile"
             >
+              <img
+                alt="gitify-app's avatar"
+                class="rounded-full w-4 h-4 object-cover cursor-pointer"
+                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+                title="gitify-app"
+              />
+            </div>
+            <div
+              title="You're watching the repository."
+            >
+              Updated
+            </div>
+            <div
+              title="gitify-app updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                class="flex-shrink-0"
-                title="View User Profile"
-              >
-                <img
-                  alt="gitify-app's avatar"
-                  class="rounded-full w-4 h-4 object-cover cursor-pointer"
-                  src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                  title="gitify-app"
-                />
-              </span>
-              <span
-                title="You're watching the repository."
+                title="octocat approved these changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="gitify-app requested changes"
               >
-                <span
-                  title="octocat approved these changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -5529,11 +5428,11 @@ exports[`components/NotificationRow.tsx should render itself & its children when
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5559,93 +5458,88 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="gitify-app updated over 6 years ago"
+          <div
+            class="flex-shrink-0"
+            title="View User Profile"
+          >
+            <img
+              alt="gitify-app's avatar"
+              class="rounded-full w-4 h-4 object-cover cursor-pointer"
+              src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
+              title="gitify-app"
+            />
+          </div>
+          <div
+            title="You're watching the repository."
           >
+            Updated
+          </div>
+          <div
+            title="gitify-app updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              class="flex-shrink-0"
-              title="View User Profile"
-            >
-              <img
-                alt="gitify-app's avatar"
-                class="rounded-full w-4 h-4 object-cover cursor-pointer"
-                src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
-                title="gitify-app"
-              />
-            </span>
-            <span
-              title="You're watching the repository."
+              title="octocat approved these changes"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="gitify-app requested changes"
             >
-              <span
-                title="octocat approved these changes"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -5777,11 +5671,11 @@ exports[`components/NotificationRow.tsx should render itself & its children with
   "baseElement": <body>
     <div>
       <div
-        class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+        class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
         id="138661096"
       >
         <div
-          class="flex justify-center items-center w-5 text-green-500"
+          class="flex justify-center items-center mr-3 w-5 text-green-500"
           title="Open Issue"
         >
           <svg
@@ -5807,98 +5701,93 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         >
           <div
-            class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+            class="mb-1 text-sm truncate cursor-pointer"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
-            <span
-              class="flex items-center gap-1"
-              title="Updated over 6 years ago"
+            <div>
+              <svg
+                aria-hidden="true"
+                class="text-gray-500 dark:text-gray-300"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+                />
+              </svg>
+            </div>
+            <div
+              title="You're watching the repository."
             >
-              <span>
-                <svg
-                  aria-hidden="true"
-                  class="text-gray-500 dark:text-gray-300"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                  />
-                </svg>
-              </span>
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div>
               <span
-                title="You're watching the repository."
+                title="octocat approved these changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
+                >
+                  <svg
+                    aria-label="octocat approved these changes"
+                    class="mr-1 text-green-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
+                  >
+                    <path
+                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
               <span
-                class="hover:overflow-auto"
+                title="gitify-app requested changes"
               >
-                <span
-                  title="octocat approved these changes"
-                >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
-                  >
-                    <svg
-                      aria-label="octocat approved these changes"
-                      class="mr-1 text-green-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
-                <span
-                  title="gitify-app requested changes"
+                <button
+                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  type="button"
                 >
-                  <button
-                    class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                    type="button"
+                  <svg
+                    aria-label="gitify-app requested changes"
+                    class="mr-1 text-red-500"
+                    fill="currentColor"
+                    focusable="false"
+                    height="12"
+                    role="img"
+                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    viewBox="0 0 16 16"
+                    width="12"
                   >
-                    <svg
-                      aria-label="gitify-app requested changes"
-                      class="mr-1 text-red-500"
-                      fill="currentColor"
-                      focusable="false"
-                      height="12"
-                      role="img"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                      viewBox="0 0 16 16"
-                      width="12"
-                    >
-                      <path
-                        d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                      />
-                    </svg>
-                    1
-                  </button>
-                </span>
+                    <path
+                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                    />
+                  </svg>
+                  1
+                </button>
               </span>
-            </span>
+            </div>
           </div>
         </div>
         <div
@@ -5973,11 +5862,11 @@ exports[`components/NotificationRow.tsx should render itself & its children with
   </body>,
   "container": <div>
     <div
-      class="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
+      class="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
       id="138661096"
     >
       <div
-        class="flex justify-center items-center w-5 text-green-500"
+        class="flex justify-center items-center mr-3 w-5 text-green-500"
         title="Open Issue"
       >
         <svg
@@ -6003,98 +5892,93 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
       >
         <div
-          class="mb-1 text-sm whitespace-nowrap cursor-pointer"
+          class="mb-1 text-sm truncate cursor-pointer"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <div>
+            <svg
+              aria-hidden="true"
+              class="text-gray-500 dark:text-gray-300"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
+              />
+            </svg>
+          </div>
+          <div
+            title="You're watching the repository."
           >
-            <span>
-              <svg
-                aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                viewBox="0 0 16 16"
-                width="16"
-              >
-                <path
-                  d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.847-8.145a2.502 2.502 0 1 0-1.694 0C5.471 8.261 4 9.775 4 11c0 .395.145.995 1 .995h6c.855 0 1-.6 1-.995 0-1.224-1.47-2.74-3.153-3.145Z"
-                />
-              </svg>
-            </span>
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div>
             <span
-              title="You're watching the repository."
+              title="octocat approved these changes"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
+              >
+                <svg
+                  aria-label="octocat approved these changes"
+                  class="mr-1 text-green-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
+                >
+                  <path
+                    d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
             <span
-              class="hover:overflow-auto"
+              title="gitify-app requested changes"
             >
-              <span
-                title="octocat approved these changes"
-              >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
-                >
-                  <svg
-                    aria-label="octocat approved these changes"
-                    class="mr-1 text-green-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
-              <span
-                title="gitify-app requested changes"
+              <button
+                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                type="button"
               >
-                <button
-                  class="rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
-                  type="button"
+                <svg
+                  aria-label="gitify-app requested changes"
+                  class="mr-1 text-red-500"
+                  fill="currentColor"
+                  focusable="false"
+                  height="12"
+                  role="img"
+                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  viewBox="0 0 16 16"
+                  width="12"
                 >
-                  <svg
-                    aria-label="gitify-app requested changes"
-                    class="mr-1 text-red-500"
-                    fill="currentColor"
-                    focusable="false"
-                    height="12"
-                    role="img"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                    viewBox="0 0 16 16"
-                    width="12"
-                  >
-                    <path
-                      d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
-                    />
-                  </svg>
-                  1
-                </button>
-              </span>
+                  <path
+                    d="M1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V4.664a.25.25 0 0 0-.073-.177l-2.914-2.914a.25.25 0 0 0-.177-.073ZM8 3.25a.75.75 0 0 1 .75.75v1.5h1.5a.75.75 0 0 1 0 1.5h-1.5v1.5a.75.75 0 0 1-1.5 0V7h-1.5a.75.75 0 0 1 0-1.5h1.5V4A.75.75 0 0 1 8 3.25Zm-3 8a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
+                  />
+                </svg>
+                1
+              </button>
             </span>
-          </span>
+          </div>
         </div>
       </div>
       <div
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index 07de95e6c..dba530368 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
-            class="cursor-pointer"
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -95,7 +95,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
-          class="cursor-pointer"
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
@@ -239,7 +239,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
             />
           </svg>
           <span
-            class="cursor-pointer"
+            class="cursor-pointer truncate"
           >
             gitify-app/notifications-test
           </span>
@@ -326,7 +326,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
           />
         </svg>
         <span
-          class="cursor-pointer"
+          class="cursor-pointer truncate"
         >
           gitify-app/notifications-test
         </span>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index bb1567670..a3d607f94 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -25,7 +25,7 @@ export const Constants = {
   READ_CLASS_NAME: 'opacity-50 dark:opacity-50',
 
   PILL_CLASS_NAME:
-    'rounded-full text-xs px-1.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700',
+    'rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700',
 
   // GitHub Docs
   GITHUB_DOCS: {
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index f175c8b4b..a69d121bb 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -1,4 +1,4 @@
-import { formatDistanceToNow, parseISO } from 'date-fns';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import type { Account, AuthState } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openExternalLink } from '../utils/comms';
@@ -176,7 +176,7 @@ export function formatNotificationUpdatedAt(
   const date = notification.last_read_at ?? notification.updated_at;
 
   try {
-    return formatDistanceToNow(parseISO(date), {
+    return formatDistanceToNowStrict(parseISO(date), {
       addSuffix: true,
     });
   } catch (e) {}
diff --git a/tailwind.config.js b/tailwind.config.js
index e1e37787e..d8329ccf9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      fontSize: {
+        xss: '0.625rem', // 10px
+      },
       colors: {
         gray: {
           sidebar: '#24292e',