From efc9caf2404aa1fdf564e8bdde712cad82c6c54e Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 5 Jun 2024 08:42:28 -0400
Subject: [PATCH 1/3] refactor: more pill css changes

---
 src/components/NotificationRow.tsx            |  206 +-
 .../NotificationRow.test.tsx.snap             | 5148 ++++++++---------
 src/utils/constants.ts                        |    2 +-
 src/utils/helpers.ts                          |    4 +-
 4 files changed, 2646 insertions(+), 2714 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 18e0585ab..e32045aa1 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -115,7 +115,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
       </div>
 
       <div
-        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         onClick={() => openNotification()}
         onKeyDown={() => openNotification()}
       >
@@ -127,113 +127,111 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
           {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`}
-                />
+        <div className="flex 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>
+          <div className="overflow-auto whitespace-normal">
+            {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;
+                  }
+
+                  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}>
+                <button type="button" className={Constants.PILL_CLASS_NAME}>
+                  <CommentIcon
+                    size={12}
+                    className={`mr-1 ${IconColor.GRAY}`}
+                    aria-label={commentsPillDescription}
+                  />
+                  {notification.subject.comments}
+                </button>
               </span>
-            ) : (
-              <span>
-                <FeedPersonIcon
-                  size={16}
-                  className="text-gray-500 dark:text-gray-300"
-                />
+            )}
+            {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>
             )}
-            <span title={reason.description}>{reason.title}</span>
-            <span>{updatedAt}</span>
-            <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;
+            {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
                     }
-
-                    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}>
-                  <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>
-              )}
-            </span>
-          </span>
+                    aria-label={notification.subject.milestone.title}
+                  />
+                </button>
+              </span>
+            )}
+          </div>
         </div>
       </div>
 
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index b9cab2c6d..9b0ecf5b4 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -43,144 +43,141 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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."
+            >
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div
+              class="overflow-auto whitespace-normal"
             >
-              <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."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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
@@ -282,7 +279,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -292,144 +289,141 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div
+            class="overflow-auto whitespace-normal"
           >
-            <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."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xs px-1.5 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 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-xs px-1.5 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-xs px-1.5 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
@@ -588,7 +582,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -598,144 +592,141 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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."
+            >
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div
+              class="overflow-auto whitespace-normal"
             >
-              <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."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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
@@ -837,7 +828,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -847,144 +838,141 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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
+            class="overflow-auto whitespace-normal"
+          >
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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 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-xs px-1.5 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"
-                  >
-                    <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"
                 >
-                  <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
@@ -1143,7 +1131,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -1153,119 +1141,116 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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."
+            >
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div
+              class="overflow-auto whitespace-normal"
             >
-              <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."
+                title="Linked to issues #1, #2"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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
@@ -1367,7 +1352,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -1377,119 +1362,116 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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
+            class="overflow-auto whitespace-normal"
+          >
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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 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"
-              >
-                <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>
+                  <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
@@ -1648,7 +1630,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -1658,289 +1640,9 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             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>
-      <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"
+            class="flex items-center text-xs text-capitalize gap-1"
           >
-            <span>
+            <div>
               <svg
                 aria-hidden="true"
                 class="text-gray-500 dark:text-gray-300"
@@ -1955,23 +1657,25 @@ 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
+              class="overflow-auto whitespace-normal"
             >
               <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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -1999,7 +1703,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2024,7 +1728,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2049,7 +1753,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2075,7 +1779,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2097,53 +1801,325 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                   2
                 </button>
               </span>
-            </span>
-          </span>
+            </div>
+          </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"
+        <div
+          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
         >
-          <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"
+          <button
+            class="focus:outline-none h-full hover:text-green-500"
+            title="Mark as Done"
+            type="button"
           >
-            <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
+              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 gap-1"
+      >
+        <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="flex 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
+            class="overflow-auto whitespace-normal"
+          >
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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>
+          </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
@@ -2257,7 +2233,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -2267,119 +2243,116 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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
+              class="overflow-auto whitespace-normal"
+            >
+              <span
+                title="Linked to issues #1, #2"
+              >
+                <button
+                  class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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
@@ -2481,7 +2454,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -2491,119 +2464,116 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div
+            class="overflow-auto whitespace-normal"
           >
-            <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."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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
@@ -2762,7 +2732,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -2772,119 +2742,116 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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
+              class="overflow-auto whitespace-normal"
+            >
+              <span
+                title="Linked to issue #1"
+              >
+                <button
+                  class="rounded-full text-xs px-1.5 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 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="You're watching the repository."
+                title="octocat approved these changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xs px-1.5 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 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-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 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
@@ -2986,7 +2953,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -2996,119 +2963,116 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div
+            class="overflow-auto whitespace-normal"
           >
-            <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."
+              title="Linked to issue #1"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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
@@ -3267,7 +3231,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -3277,196 +3241,193 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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
+              class="overflow-auto whitespace-normal"
+            >
+              <span
+                title="Linked to issues #1, #2"
+              >
+                <button
+                  class="rounded-full text-xs px-1.5 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="octocat approved these changes"
+              >
+                <button
+                  class="rounded-full text-xs px-1.5 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="You're watching the repository."
+                title="gitify-app requested changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xs px-1.5 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
-                class="hover:overflow-auto"
+                title="2 comments"
               >
-                <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 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-xs px-1.5 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-xs px-1.5 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
@@ -3568,7 +3529,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -3578,196 +3539,193 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div
+            class="overflow-auto whitespace-normal"
           >
-            <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."
+              title="Linked to issues #1, #2"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xs px-1.5 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-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 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="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="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 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"
-                  >
-                    <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"
+                <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 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="🏷️ 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"
-                    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 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
+🏷️ 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"
                 >
-                  <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="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 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-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>
-          </span>
+          </div>
         </div>
       </div>
       <div
@@ -3903,347 +3861,42 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         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
-                  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!"
+          class="flex justify-center items-center 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 gap-1"
         >
-          <span
-            class="flex items-center gap-1"
-            title="Updated over 6 years ago"
+          <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="flex items-center text-xs text-capitalize gap-1"
           >
-            <span>
+            <div>
               <svg
                 aria-hidden="true"
                 class="text-gray-500 dark:text-gray-300"
@@ -4258,23 +3911,25 @@ 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
+              class="overflow-auto whitespace-normal"
             >
               <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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4302,7 +3957,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4327,7 +3982,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4352,7 +4007,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4378,7 +4033,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-xs px-1.5 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4404,29 +4059,326 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 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"
+                <button
+                  class="rounded-full text-xs px-1.5 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>
+            </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 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 gap-1"
+      >
+        <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="flex 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
+            class="overflow-auto whitespace-normal"
+          >
+            <span
+              title="Linked to issues #1, #2"
+            >
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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-xs px-1.5 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"
                 >
-                  <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>
+                  <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
@@ -4585,7 +4537,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -4595,86 +4547,83 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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
+              class="overflow-auto whitespace-normal"
             >
               <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-xs px-1.5 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-xs px-1.5 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
@@ -4776,7 +4725,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -4786,86 +4735,83 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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
+            class="overflow-auto whitespace-normal"
           >
             <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-xs px-1.5 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-xs px-1.5 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
@@ -5024,7 +4970,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -5034,86 +4980,83 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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
+              class="overflow-auto whitespace-normal"
             >
               <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-xs px-1.5 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-xs px-1.5 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
@@ -5215,7 +5158,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -5225,86 +5168,83 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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
+            class="overflow-auto whitespace-normal"
           >
             <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-xs px-1.5 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-xs px-1.5 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
@@ -5463,7 +5403,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
         >
           <div
             class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -5473,91 +5413,88 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             I am a robot and this is a test!
           </div>
           <div
-            class="text-xs text-capitalize"
+            class="flex 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."
+            >
+              Updated
+            </div>
+            <div
+              title="Updated 7 years ago"
+            >
+              7 years ago
+            </div>
+            <div
+              class="overflow-auto whitespace-normal"
             >
-              <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."
+                title="octocat approved these changes"
               >
-                Updated
-              </span>
-              <span>
-                over 6 years ago
+                <button
+                  class="rounded-full text-xs px-1.5 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-xs px-1.5 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
@@ -5659,7 +5596,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
       >
         <div
           class="mb-1 text-sm whitespace-nowrap cursor-pointer"
@@ -5669,91 +5606,88 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           I am a robot and this is a test!
         </div>
         <div
-          class="text-xs text-capitalize"
+          class="flex 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."
+          >
+            Updated
+          </div>
+          <div
+            title="Updated 7 years ago"
+          >
+            7 years ago
+          </div>
+          <div
+            class="overflow-auto whitespace-normal"
           >
-            <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."
+              title="octocat approved these changes"
             >
-              Updated
-            </span>
-            <span>
-              over 6 years ago
+              <button
+                class="rounded-full text-xs px-1.5 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-xs px-1.5 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/utils/constants.ts b/src/utils/constants.ts
index bb1567670..54ce027d4 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-xs px-1.5 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) {}

From 2f40d1ba8f531318acd49b4f3e7ebb6dc991131f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 5 Jun 2024 10:24:26 -0400
Subject: [PATCH 2/3] refactor: more pill css changes

---
 src/components/NotificationRow.tsx            |  53 ++-
 src/components/Repository.tsx                 |   2 +-
 .../NotificationRow.test.tsx.snap             | 308 ++++++++----------
 .../__snapshots__/Repository.test.tsx.snap    |   8 +-
 4 files changed, 161 insertions(+), 210 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index e32045aa1..d0a32c1b4 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -105,29 +105,29 @@ 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} />
       </div>
 
       <div
-        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-1"
+        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
         onClick={() => openNotification()}
         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="flex items-center text-xs text-capitalize gap-1">
+        <div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
           {notification.subject.user ? (
             <div
               title="View User Profile"
@@ -152,7 +152,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
           )}
           <div title={reason.description}>{reason.title}</div>
           <div title={updatedLabel}>{updatedAt}</div>
-          <div className="overflow-auto whitespace-normal">
+          <div>
             {notification.subject?.linkedIssues?.length > 0 && (
               <span title={linkedIssuesPillDescription}>
                 <button type="button" className={Constants.PILL_CLASS_NAME}>
@@ -165,30 +165,25 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                 </button>
               </span>
             )}
-            {notification.subject.reviews
-              ? notification.subject.reviews.map((review) => {
-                  const icon = getPullRequestReviewIcon(review);
-                  if (!icon) {
-                    return null;
-                  }
+            {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}
+              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>
+              );
+            })}
             {notification.subject?.comments > 0 && (
               <span title={commentsPillDescription}>
                 <button type="button" className={Constants.PILL_CLASS_NAME}>
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 9b0ecf5b4..7f15c047f 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
@@ -33,17 +33,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -71,9 +71,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -252,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
@@ -279,17 +277,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -317,9 +315,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -555,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
@@ -582,17 +578,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -620,9 +616,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -801,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
@@ -828,17 +822,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -866,9 +860,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -1104,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
@@ -1131,17 +1123,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -1169,9 +1161,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -1325,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
@@ -1352,17 +1342,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -1390,9 +1380,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -1603,11 +1591,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
   "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
@@ -1630,17 +1618,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -1668,9 +1656,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -1876,11 +1862,11 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
   </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
@@ -1903,17 +1889,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -1941,9 +1927,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -2206,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
@@ -2233,17 +2217,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -2271,9 +2255,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -2427,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
@@ -2454,17 +2436,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -2492,9 +2474,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -2705,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
@@ -2732,17 +2712,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -2770,9 +2750,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issue #1"
               >
@@ -2926,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
@@ -2953,17 +2931,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -2991,9 +2969,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issue #1"
             >
@@ -3204,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
@@ -3231,17 +3207,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -3269,9 +3245,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -3502,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
@@ -3529,17 +3503,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -3567,9 +3541,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -3857,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
@@ -3884,17 +3856,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -3922,9 +3894,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="Linked to issues #1, #2"
               >
@@ -4155,11 +4125,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
@@ -4182,17 +4152,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -4220,9 +4190,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="Linked to issues #1, #2"
             >
@@ -4510,11 +4478,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
@@ -4537,17 +4505,17 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div
               class="flex-shrink-0"
@@ -4570,9 +4538,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="octocat approved these changes"
               >
@@ -4698,11 +4664,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
@@ -4725,17 +4691,17 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div
             class="flex-shrink-0"
@@ -4758,9 +4724,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="octocat approved these changes"
             >
@@ -4943,11 +4907,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
@@ -4970,17 +4934,17 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div
               class="flex-shrink-0"
@@ -5003,9 +4967,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="octocat approved these changes"
               >
@@ -5131,11 +5093,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
@@ -5158,17 +5120,17 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div
             class="flex-shrink-0"
@@ -5191,9 +5153,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="octocat approved these changes"
             >
@@ -5376,11 +5336,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
@@ -5403,17 +5363,17 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
           >
             <div>
               <svg
@@ -5441,9 +5401,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             >
               7 years ago
             </div>
-            <div
-              class="overflow-auto whitespace-normal"
-            >
+            <div>
               <span
                 title="octocat approved these changes"
               >
@@ -5569,11 +5527,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
@@ -5596,17 +5554,17 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis gap-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="flex items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
         >
           <div>
             <svg
@@ -5634,9 +5592,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           >
             7 years ago
           </div>
-          <div
-            class="overflow-auto whitespace-normal"
-          >
+          <div>
             <span
               title="octocat approved these changes"
             >
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>

From 317251f13fc82a2cecb9e57d2ef9b0aca44819b2 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 5 Jun 2024 10:29:44 -0400
Subject: [PATCH 3/3] refactor: more pill css changes

---
 .../NotificationRow.test.tsx.snap             | 160 +++++++++---------
 src/utils/constants.ts                        |   2 +-
 tailwind.config.js                            |   3 +
 3 files changed, 84 insertions(+), 81 deletions(-)

diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 7f15c047f..ac740d9e9 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -104,7 +104,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -129,7 +129,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -154,7 +154,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="1 comment"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -320,7 +320,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -348,7 +348,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -373,7 +373,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -398,7 +398,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="1 comment"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -621,7 +621,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -649,7 +649,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -674,7 +674,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -699,7 +699,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -865,7 +865,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -893,7 +893,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -918,7 +918,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -943,7 +943,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="2 comments"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -1166,7 +1166,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -1194,7 +1194,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -1219,7 +1219,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -1385,7 +1385,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -1413,7 +1413,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -1438,7 +1438,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -1661,7 +1661,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -1689,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 m-0.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
@@ -1714,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 m-0.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
@@ -1739,7 +1739,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -1765,7 +1765,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
 🏷️ good-first-issue"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -1932,7 +1932,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -1960,7 +1960,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -1985,7 +1985,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -2010,7 +2010,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
               title="2 comments"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -2036,7 +2036,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
 🏷️ good-first-issue"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -2260,7 +2260,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -2288,7 +2288,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -2313,7 +2313,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -2479,7 +2479,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -2507,7 +2507,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -2532,7 +2532,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -2755,7 +2755,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="Linked to issue #1"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -2783,7 +2783,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -2808,7 +2808,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -2974,7 +2974,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="Linked to issue #1"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3002,7 +3002,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3027,7 +3027,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3250,7 +3250,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3278,7 +3278,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3303,7 +3303,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3328,7 +3328,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3354,7 +3354,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3381,7 +3381,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Milestone 1"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3546,7 +3546,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3574,7 +3574,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3599,7 +3599,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3624,7 +3624,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="2 comments"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3650,7 +3650,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3677,7 +3677,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Milestone 1"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -3899,7 +3899,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -3927,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 m-0.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
@@ -3952,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 m-0.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
@@ -3977,7 +3977,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -4003,7 +4003,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -4030,7 +4030,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Milestone 1"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -4195,7 +4195,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4223,7 +4223,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4248,7 +4248,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4273,7 +4273,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="2 comments"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4299,7 +4299,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4326,7 +4326,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Milestone 1"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4543,7 +4543,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -4568,7 +4568,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -4729,7 +4729,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4754,7 +4754,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -4972,7 +4972,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -4997,7 +4997,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -5158,7 +5158,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -5183,7 +5183,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -5406,7 +5406,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -5431,7 +5431,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xs px-1.5 m-0.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
@@ -5597,7 +5597,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
@@ -5622,7 +5622,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xs px-1.5 m-0.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
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 54ce027d4..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 m-0.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/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',