diff --git a/src/app.tsx b/src/app.tsx
index c15ab937b..49af30b12 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -31,7 +31,7 @@ export const App = () => {
   return (
     <AppProvider>
       <Router>
-        <div className="flex flex-col pl-14 h-full">
+        <div className="flex h-full flex-col pl-14">
           <Loading />
           <Sidebar />
           <Routes>
diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index d4a9ebcfd..34179e056 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -54,7 +54,7 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <div className="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold">
+        <div className="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
           <div>
             <PlatformIcon type={account.platform} size={16} />
             <button
diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx
index 37efc892d..b16823bac 100644
--- a/src/components/AllRead.tsx
+++ b/src/components/AllRead.tsx
@@ -11,12 +11,10 @@ export const AllRead = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
-      <h1 className="text-5xl mb-5">{emoji}</h1>
+    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+      <h1 className="mb-5 text-5xl">{emoji}</h1>
 
-      <h2 className="font-semibold text-xl mb-2 text-semibold">
-        No new notifications.
-      </h2>
+      <h2 className="mb-2 text-xl font-semibold">No new notifications.</h2>
     </div>
   );
 };
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 0ce9e8af6..febe971c9 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -104,26 +104,26 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
       )}
     >
       <div
-        className={cn('flex justify-center items-center mr-3 w-5', iconColor)}
+        className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
         title={notificationTitle}
       >
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
 
       <div
-        className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         onClick={() => handleNotification()}
         onKeyDown={() => handleNotification()}
       >
         <div
-          className="mb-1 text-sm truncate cursor-pointer"
+          className="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title={notification.subject.title}
         >
           {notification.subject.title}
         </div>
 
-        <div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
+        <div className="flex flex-wrap items-center gap-1 text-xs capitalize">
           {notification.subject.user ? (
             <button
               type="button"
@@ -136,7 +136,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
               className="flex-shrink-0"
             >
               <img
-                className="rounded-full w-4 h-4 object-cover cursor-pointer"
+                className="size-4 cursor-pointer rounded-full object-cover"
                 src={notification.subject.user.avatar_url}
                 title={notification.subject.user.login}
                 alt={`${notification.subject.user.login}'s avatar`}
@@ -211,10 +211,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
         </div>
       </div>
 
-      <div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
+      <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
         <button
           type="button"
-          className="focus:outline-none h-full hover:text-green-500"
+          className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           onClick={() => {
             setAnimateExit(true);
@@ -226,7 +226,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
 
         <button
           type="button"
-          className="focus:outline-none h-full hover:text-red-500"
+          className="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           onClick={unsubscribeFromThread}
         >
@@ -235,7 +235,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
 
         <button
           type="button"
-          className="focus:outline-none h-full hover:text-green-500"
+          className="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           onClick={() => {
             setAnimateExit(true);
diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx
index 30d3c681f..6222d2015 100644
--- a/src/components/Oops.tsx
+++ b/src/components/Oops.tsx
@@ -12,16 +12,14 @@ export const Oops: FC<IProps> = ({ error }) => {
   );
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
-      <h1 className="text-5xl mb-5">{emoji}</h1>
+    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+      <h1 className="mb-5 text-5xl">{emoji}</h1>
 
-      <h2 className="font-semibold text-xl mb-2 text-semibold">
-        {error.title}
-      </h2>
+      <h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
       {error.descriptions.map((description, i) => {
         return (
           // biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
-          <div className="text-center mb-2" key={`error_description_${i}`}>
+          <div className="mb-2 text-center" key={`error_description_${i}`}>
             {description}
           </div>
         );
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 04186a61b..187f10cd2 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -33,11 +33,11 @@ export const RepositoryNotifications: FC<IProps> = ({
 
   return (
     <>
-      <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group">
-        <div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
+      <div className="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
+        <div className="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
           {avatarUrl ? (
             <img
-              className="rounded w-5 h-5"
+              className="size-5 rounded"
               src={avatarUrl}
               alt={`${repoSlug}'s avatar`}
             />
@@ -53,10 +53,10 @@ export const RepositoryNotifications: FC<IProps> = ({
           </span>
         </div>
 
-        <div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
+        <div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
           <button
             type="button"
-            className="focus:outline-none h-full hover:text-green-500"
+            className="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Done"
             onClick={markRepoAsDone}
           >
@@ -67,7 +67,7 @@ export const RepositoryNotifications: FC<IProps> = ({
 
           <button
             type="button"
-            className="focus:outline-none h-full hover:text-green-500"
+            className="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Read"
             onClick={markRepoAsRead}
           >
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 74632eb2d..eee0c2c82 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -34,11 +34,11 @@ export const Sidebar: FC = () => {
   }, [notifications]);
 
   return (
-    <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto">
-      <div className="flex flex-col flex-1 items-center py-4">
+    <div className="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar">
+      <div className="flex flex-1 flex-col items-center py-4">
         <button
           type="button"
-          className="w-5 my-3 mx-auto cursor-pointer outline-none"
+          className="mx-auto my-3 w-5 cursor-pointer outline-none"
           title="Open Gitify on GitHub"
           onClick={() => openGitifyRepository()}
           data-testid="gitify-logo"
@@ -49,7 +49,7 @@ export const Sidebar: FC = () => {
         <button
           type="button"
           className={cn(
-            'flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer',
+            'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
             notificationsCount > 0 ? 'text-green-500' : 'text-white',
           )}
           onClick={() => openGitHubNotifications()}
@@ -63,7 +63,7 @@ export const Sidebar: FC = () => {
         </button>
       </div>
 
-      <div className="py-4 px-3">
+      <div className="px-3 py-4">
         {isLoggedIn && (
           <>
             <button
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 0f1e8f305..fbd8f9167 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -65,7 +65,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+      class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
     >
       <div>
         <span
@@ -181,7 +181,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -237,7 +237,7 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   </body>,
   "container": <div>
     <div
-      class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+      class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
     >
       <div>
         <span
@@ -350,7 +350,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   "baseElement": <body>
     <div>
       <div
-        class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -405,7 +405,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
     </div>
     <div>
       <div
-        class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+        class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
       >
         <div>
           <span
@@ -464,7 +464,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
   </body>,
   "container": <div>
     <div
-      class="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold"
+      class="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white"
     >
       <div>
         <span
diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap
index 7adc63836..e1a5816fe 100644
--- a/src/components/__snapshots__/AllRead.test.tsx.snap
+++ b/src/components/__snapshots__/AllRead.test.tsx.snap
@@ -6,15 +6,15 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"
+        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
       >
         <h1
-          class="text-5xl mb-5"
+          class="mb-5 text-5xl"
         >
           😉
         </h1>
         <h2
-          class="font-semibold text-xl mb-2 text-semibold"
+          class="mb-2 text-xl font-semibold"
         >
           No new notifications.
         </h2>
@@ -23,15 +23,15 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"
+      class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
     >
       <h1
-        class="text-5xl mb-5"
+        class="mb-5 text-5xl"
       >
         😉
       </h1>
       <h2
-        class="font-semibold text-xl mb-2 text-semibold"
+        class="mb-2 text-xl font-semibold"
       >
         No new notifications.
       </h2>
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 3efb3ce47..de10784af 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center 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"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <svg
@@ -76,7 +76,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -179,10 +179,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -203,7 +203,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -224,7 +224,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -254,7 +254,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -277,17 +277,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -423,10 +423,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -447,7 +447,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -468,7 +468,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -555,7 +555,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -578,17 +578,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -724,10 +724,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -748,7 +748,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -769,7 +769,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -799,7 +799,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -822,17 +822,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -968,10 +968,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -992,7 +992,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -1013,7 +1013,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -1100,7 +1100,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -1123,17 +1123,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -1244,10 +1244,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -1268,7 +1268,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -1289,7 +1289,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -1319,7 +1319,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -1342,17 +1342,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -1463,10 +1463,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -1487,7 +1487,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -1508,7 +1508,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics comment pil
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -1595,7 +1595,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -1618,17 +1618,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -1791,10 +1791,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -1815,7 +1815,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -1836,7 +1836,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -1866,7 +1866,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -1889,17 +1889,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -2062,10 +2062,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -2086,7 +2086,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -2107,7 +2107,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics label pills
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -2194,7 +2194,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -2217,17 +2217,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2338,10 +2338,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -2362,7 +2362,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -2383,7 +2383,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -2413,7 +2413,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -2436,17 +2436,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -2557,10 +2557,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -2581,7 +2581,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -2602,7 +2602,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -2689,7 +2689,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -2712,17 +2712,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <svg
@@ -2755,7 +2755,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
                 title="Linked to issue #1"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -2833,10 +2833,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -2857,7 +2857,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -2878,7 +2878,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -2908,7 +2908,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -2931,17 +2931,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <svg
@@ -2974,7 +2974,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
               title="Linked to issue #1"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3052,10 +3052,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -3076,7 +3076,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -3097,7 +3097,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics linked issu
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -3184,7 +3184,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -3207,17 +3207,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss 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-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -3380,7 +3380,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Milestone 1"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -3404,10 +3404,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -3428,7 +3428,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -3449,7 +3449,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -3479,7 +3479,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -3502,17 +3502,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <svg
@@ -3545,7 +3545,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3573,7 +3573,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3598,7 +3598,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3623,7 +3623,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="2 comments"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3649,7 +3649,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3675,7 +3675,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Milestone 1"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -3699,10 +3699,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -3723,7 +3723,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -3744,7 +3744,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -3831,7 +3831,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -3854,17 +3854,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <svg
@@ -3897,7 +3897,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Linked to issues #1, #2"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -3925,7 +3925,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -3950,7 +3950,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -3975,7 +3975,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="2 comments"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4001,7 +4001,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4027,7 +4027,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
                 title="Milestone 1"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4051,10 +4051,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -4075,7 +4075,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -4096,7 +4096,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -4126,7 +4126,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -4149,17 +4149,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <svg
@@ -4192,7 +4192,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Linked to issues #1, #2"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -4220,7 +4220,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -4245,7 +4245,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -4270,7 +4270,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="2 comments"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -4296,7 +4296,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
 🏷️ good-first-issue"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -4322,7 +4322,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
               title="Milestone 1"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -4346,10 +4346,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -4370,7 +4370,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -4391,7 +4391,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics milestone p
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -4478,7 +4478,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -4501,17 +4501,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </svg>
         </div>
         <div
-          class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+          class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <svg
@@ -4542,10 +4542,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -4566,7 +4566,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -4587,7 +4587,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -4617,7 +4617,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -4640,17 +4640,17 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         </svg>
       </div>
       <div
-        class="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
+        class="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <svg
@@ -4681,10 +4681,10 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -4705,7 +4705,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -4726,7 +4726,7 @@ exports[`components/NotificationRow.tsx notification pills / metrics showPills d
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -4813,7 +4813,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -4836,17 +4836,17 @@ 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 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <button
               class="flex-shrink-0"
@@ -4855,7 +4855,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             >
               <img
                 alt="gitify-app's avatar"
-                class="rounded-full w-4 h-4 object-cover cursor-pointer"
+                class="size-4 cursor-pointer rounded-full object-cover"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
                 title="gitify-app"
               />
@@ -4875,7 +4875,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4900,7 +4900,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -4925,10 +4925,10 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -4949,7 +4949,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -4970,7 +4970,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -5000,7 +5000,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5023,17 +5023,17 @@ 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 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <button
             class="flex-shrink-0"
@@ -5042,7 +5042,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           >
             <img
               alt="gitify-app's avatar"
-              class="rounded-full w-4 h-4 object-cover cursor-pointer"
+              class="size-4 cursor-pointer rounded-full object-cover"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               title="gitify-app"
             />
@@ -5062,7 +5062,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -5087,7 +5087,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -5112,10 +5112,10 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -5136,7 +5136,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -5157,7 +5157,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -5244,7 +5244,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -5267,17 +5267,17 @@ 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 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <button
               class="flex-shrink-0"
@@ -5286,7 +5286,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             >
               <img
                 alt="gitify-app's avatar"
-                class="rounded-full w-4 h-4 object-cover cursor-pointer"
+                class="size-4 cursor-pointer rounded-full object-cover"
                 src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
                 title="gitify-app"
               />
@@ -5306,7 +5306,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -5331,7 +5331,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -5356,10 +5356,10 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -5380,7 +5380,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -5401,7 +5401,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -5431,7 +5431,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5454,17 +5454,17 @@ 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 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <button
             class="flex-shrink-0"
@@ -5473,7 +5473,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           >
             <img
               alt="gitify-app's avatar"
-              class="rounded-full w-4 h-4 object-cover cursor-pointer"
+              class="size-4 cursor-pointer rounded-full object-cover"
               src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
               title="gitify-app"
             />
@@ -5493,7 +5493,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -5518,7 +5518,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -5543,10 +5543,10 @@ exports[`components/NotificationRow.tsx should render itself & its children when
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -5567,7 +5567,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -5588,7 +5588,7 @@ exports[`components/NotificationRow.tsx should render itself & its children when
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
@@ -5675,7 +5675,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         id="138661096"
       >
         <div
-          class="flex justify-center items-center mr-3 w-5 text-green-500"
+          class="mr-3 flex w-5 items-center justify-center text-green-500"
           title="Open Issue"
         >
           <svg
@@ -5698,17 +5698,17 @@ 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 overflow-hidden overflow-ellipsis whitespace-nowrap"
         >
           <div
-            class="mb-1 text-sm truncate cursor-pointer"
+            class="mb-1 cursor-pointer truncate text-sm"
             role="main"
             title="I am a robot and this is a test!"
           >
             I am a robot and this is a test!
           </div>
           <div
-            class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+            class="flex flex-wrap items-center gap-1 text-xs capitalize"
           >
             <div>
               <svg
@@ -5741,7 +5741,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
                 title="octocat approved these changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -5766,7 +5766,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
                 title="gitify-app requested changes"
               >
                 <button
-                  class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                  class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                   type="button"
                 >
                   <svg
@@ -5791,10 +5791,10 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </div>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Done"
             type="button"
           >
@@ -5815,7 +5815,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-red-500"
+            class="h-full hover:text-red-500 focus:outline-none"
             title="Unsubscribe from Thread"
             type="button"
           >
@@ -5836,7 +5836,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
             </svg>
           </button>
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark as Read"
             type="button"
           >
@@ -5866,7 +5866,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
       id="138661096"
     >
       <div
-        class="flex justify-center items-center mr-3 w-5 text-green-500"
+        class="mr-3 flex w-5 items-center justify-center text-green-500"
         title="Open Issue"
       >
         <svg
@@ -5889,17 +5889,17 @@ 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 overflow-hidden overflow-ellipsis whitespace-nowrap"
       >
         <div
-          class="mb-1 text-sm truncate cursor-pointer"
+          class="mb-1 cursor-pointer truncate text-sm"
           role="main"
           title="I am a robot and this is a test!"
         >
           I am a robot and this is a test!
         </div>
         <div
-          class="flex flex-wrap items-center text-xs text-capitalize gap-1"
+          class="flex flex-wrap items-center gap-1 text-xs capitalize"
         >
           <div>
             <svg
@@ -5932,7 +5932,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               title="octocat approved these changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -5957,7 +5957,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
               title="gitify-app requested changes"
             >
               <button
-                class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+                class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
                 type="button"
               >
                 <svg
@@ -5982,10 +5982,10 @@ exports[`components/NotificationRow.tsx should render itself & its children with
         </div>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Done"
           type="button"
         >
@@ -6006,7 +6006,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-red-500"
+          class="h-full hover:text-red-500 focus:outline-none"
           title="Unsubscribe from Thread"
           type="button"
         >
@@ -6027,7 +6027,7 @@ exports[`components/NotificationRow.tsx should render itself & its children with
           </svg>
         </button>
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark as Read"
           type="button"
         >
diff --git a/src/components/__snapshots__/Oops.test.tsx.snap b/src/components/__snapshots__/Oops.test.tsx.snap
index ea0bc4ef2..72fcf0b44 100644
--- a/src/components/__snapshots__/Oops.test.tsx.snap
+++ b/src/components/__snapshots__/Oops.test.tsx.snap
@@ -6,20 +6,20 @@ exports[`components/Oops.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"
+        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
       >
         <h1
-          class="text-5xl mb-5"
+          class="mb-5 text-5xl"
         >
           🔥
         </h1>
         <h2
-          class="font-semibold text-xl mb-2 text-semibold"
+          class="mb-2 text-xl font-semibold"
         >
           Error title
         </h2>
         <div
-          class="text-center mb-2"
+          class="mb-2 text-center"
         >
           Error description
         </div>
@@ -28,20 +28,20 @@ exports[`components/Oops.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"
+      class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
     >
       <h1
-        class="text-5xl mb-5"
+        class="mb-5 text-5xl"
       >
         🔥
       </h1>
       <h2
-        class="font-semibold text-xl mb-2 text-semibold"
+        class="mb-2 text-xl font-semibold"
       >
         Error title
       </h2>
       <div
-        class="text-center mb-2"
+        class="mb-2 text-center"
       >
         Error description
       </div>
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index 74b3cd8f3..d2e19b9de 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -6,14 +6,14 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
+        class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
         >
           <img
             alt="gitify-app/notifications-test's avatar"
-            class="rounded w-5 h-5"
+            class="size-5 rounded"
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
@@ -23,10 +23,10 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           </span>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Done"
             type="button"
           >
@@ -50,7 +50,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
             class="w-[14px]"
           />
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Read"
             type="button"
           >
@@ -82,14 +82,14 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
+      class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
       >
         <img
           alt="gitify-app/notifications-test's avatar"
-          class="rounded w-5 h-5"
+          class="size-5 rounded"
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
@@ -99,10 +99,10 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         </span>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark Repository as Done"
           type="button"
         >
@@ -126,7 +126,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
           class="w-[14px]"
         />
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark Repository as Read"
           type="button"
         >
@@ -215,10 +215,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
   "baseElement": <body>
     <div>
       <div
-        class="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
+        class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
       >
         <div
-          class="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
+          class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
         >
           <svg
             aria-hidden="true"
@@ -241,10 +241,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
           </span>
         </div>
         <div
-          class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+          class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
         >
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Done"
             type="button"
           >
@@ -268,7 +268,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
             class="w-[14px]"
           />
           <button
-            class="focus:outline-none h-full hover:text-green-500"
+            class="h-full hover:text-green-500 focus:outline-none"
             title="Mark Repository as Read"
             type="button"
           >
@@ -300,10 +300,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
   </body>,
   "container": <div>
     <div
-      class="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
+      class="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white"
     >
       <div
-        class="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
+        class="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium"
       >
         <svg
           aria-hidden="true"
@@ -326,10 +326,10 @@ exports[`components/Repository.tsx should use default repository icon when avata
         </span>
       </div>
       <div
-        class="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
+        class="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80"
       >
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark Repository as Done"
           type="button"
         >
@@ -353,7 +353,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
           class="w-[14px]"
         />
         <button
-          class="focus:outline-none h-full hover:text-green-500"
+          class="h-full hover:text-green-500 focus:outline-none"
           title="Mark Repository as Read"
           type="button"
         >
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 887d0fb44..6ef542d27 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto"
+        class="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar"
       >
         <div
-          class="flex flex-col flex-1 items-center py-4"
+          class="flex flex-1 flex-col items-center py-4"
         >
           <button
-            class="w-5 my-3 mx-auto cursor-pointer outline-none"
+            class="mx-auto my-3 w-5 cursor-pointer outline-none"
             data-testid="gitify-logo"
             title="Open Gitify on GitHub"
             type="button"
@@ -63,7 +63,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
           </button>
           <button
-            class="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
+            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
             title="4 Unread Notifications"
             type="button"
           >
@@ -86,7 +86,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </button>
         </div>
         <div
-          class="py-4 px-3"
+          class="px-3 py-4"
         >
           <button
             aria-label="Quit Gitify"
@@ -116,13 +116,13 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
   </body>,
   "container": <div>
     <div
-      class="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto"
+      class="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar"
     >
       <div
-        class="flex flex-col flex-1 items-center py-4"
+        class="flex flex-1 flex-col items-center py-4"
       >
         <button
-          class="w-5 my-3 mx-auto cursor-pointer outline-none"
+          class="mx-auto my-3 w-5 cursor-pointer outline-none"
           data-testid="gitify-logo"
           title="Open Gitify on GitHub"
           type="button"
@@ -173,7 +173,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
         </button>
         <button
-          class="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
+          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
           title="4 Unread Notifications"
           type="button"
         >
@@ -196,7 +196,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         </button>
       </div>
       <div
-        class="py-4 px-3"
+        class="px-3 py-4"
       >
         <button
           aria-label="Quit Gitify"
@@ -283,13 +283,13 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto"
+        class="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar"
       >
         <div
-          class="flex flex-col flex-1 items-center py-4"
+          class="flex flex-1 flex-col items-center py-4"
         >
           <button
-            class="w-5 my-3 mx-auto cursor-pointer outline-none"
+            class="mx-auto my-3 w-5 cursor-pointer outline-none"
             data-testid="gitify-logo"
             title="Open Gitify on GitHub"
             type="button"
@@ -340,7 +340,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
           </button>
           <button
-            class="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
+            class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
             title="4 Unread Notifications"
             type="button"
           >
@@ -363,7 +363,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </button>
         </div>
         <div
-          class="py-4 px-3"
+          class="px-3 py-4"
         >
           <button
             aria-label="Quit Gitify"
@@ -393,13 +393,13 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
   </body>,
   "container": <div>
     <div
-      class="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto"
+      class="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar"
     >
       <div
-        class="flex flex-col flex-1 items-center py-4"
+        class="flex flex-1 flex-col items-center py-4"
       >
         <button
-          class="w-5 my-3 mx-auto cursor-pointer outline-none"
+          class="mx-auto my-3 w-5 cursor-pointer outline-none"
           data-testid="gitify-logo"
           title="Open Gitify on GitHub"
           type="button"
@@ -450,7 +450,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
         </button>
         <button
-          class="flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer text-green-500"
+          class="my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold text-green-500"
           title="4 Unread Notifications"
           type="button"
         >
@@ -473,7 +473,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         </button>
       </div>
       <div
-        class="py-4 px-3"
+        class="px-3 py-4"
       >
         <button
           aria-label="Quit Gitify"
diff --git a/src/components/buttons/PillButton.tsx b/src/components/buttons/PillButton.tsx
index a9207a858..fcdc4495d 100644
--- a/src/components/buttons/PillButton.tsx
+++ b/src/components/buttons/PillButton.tsx
@@ -16,7 +16,7 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
     <span title={props.title}>
       <button
         type="button"
-        className="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"
+        className="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
       >
         <props.icon
           size={12}
diff --git a/src/components/buttons/__snapshots__/PillButton.test.tsx.snap b/src/components/buttons/__snapshots__/PillButton.test.tsx.snap
index 000c3b996..78c044350 100644
--- a/src/components/buttons/__snapshots__/PillButton.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/PillButton.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/buttons/PillButton.tsx should render 1`] = `
         title="Mock Pill"
       >
         <button
-          class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+          class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
           type="button"
         >
           <svg
@@ -37,7 +37,7 @@ exports[`components/buttons/PillButton.tsx should render 1`] = `
       title="Mock Pill"
     >
       <button
-        class="rounded-full text-xss px-1 m-0.5 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+        class="m-0.5 rounded-full bg-gray-100 px-1 text-xss hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
         type="button"
       >
         <svg
diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx
index 554699fde..c39873be2 100644
--- a/src/components/fields/Checkbox.tsx
+++ b/src/components/fields/Checkbox.tsx
@@ -13,20 +13,20 @@ export interface ICheckbox {
 
 export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
   return (
-    <div className="mt-1 mb-3 text-sm">
+    <div className="mb-3 mt-1 text-sm">
       <div className="flex items-start">
-        <div className="flex items-center h-5">
+        <div className="flex h-5 items-center">
           <input
             type="checkbox"
             id={props.name}
-            className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            className="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
             checked={props.checked}
             onChange={props.onChange}
             disabled={props.disabled}
           />
         </div>
 
-        <div className="ml-3 ">
+        <div className="ml-3">
           <label
             htmlFor={props.name}
             className="font-medium text-gray-700 dark:text-gray-200"
@@ -43,7 +43,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
       </div>
 
       {props.helpText && (
-        <div className="text-xs mt-1 italic text-gray-500 dark:text-gray-300">
+        <div className="mt-1 text-xs italic text-gray-500 dark:text-gray-300">
           {props.helpText}
         </div>
       )}
diff --git a/src/components/fields/FieldInput.tsx b/src/components/fields/FieldInput.tsx
index c70ae2e2f..edffd1820 100644
--- a/src/components/fields/FieldInput.tsx
+++ b/src/components/fields/FieldInput.tsx
@@ -23,7 +23,7 @@ export const FieldInput: FC<IFieldInput> = ({
       {({ input, meta: { touched, error } }) => (
         <div className="mb-4">
           <label
-            className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+            className="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
             htmlFor={input.name}
           >
             {label}
@@ -31,7 +31,7 @@ export const FieldInput: FC<IFieldInput> = ({
 
           <input
             type={type}
-            className="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+            className="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
             id={input.name}
             placeholder={placeholder}
             required={required}
@@ -39,13 +39,13 @@ export const FieldInput: FC<IFieldInput> = ({
           />
 
           {helpText && (
-            <div className="mt-3 text-gray-700 dark:text-gray-200 text-xs">
+            <div className="mt-3 text-xs text-gray-700 dark:text-gray-200">
               {helpText}
             </div>
           )}
 
           {touched && error && (
-            <div className="mt-2 text-red-500 text-xs italic">{error}</div>
+            <div className="mt-2 text-xs italic text-red-500">{error}</div>
           )}
         </div>
       )}
diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx
index c143b75b5..3ea7fe774 100644
--- a/src/components/fields/RadioGroup.tsx
+++ b/src/components/fields/RadioGroup.tsx
@@ -13,12 +13,12 @@ export interface IRadioGroup {
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className="mt-1 mb-3 text-sm">
+    <div className="mb-3 mt-1 text-sm">
       <div className="flex items-start">
         <div className="mr-3 py-1">
           <label
             htmlFor={props.name}
-            className="font-medium text-gray-700 dark:text-gray-200 "
+            className="font-medium text-gray-700 dark:text-gray-200"
             style={
               props.disabled ? { textDecoration: 'line-through' } : undefined
             }
@@ -35,12 +35,12 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           {props.options.map((item) => {
             return (
               <div
-                className="flex mt-1"
+                className="mt-1 flex"
                 key={`radio_item_${item.value.toLowerCase()}`}
               >
                 <input
                   type="radio"
-                  className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                  className="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                   id={`${props.name}_${item.value.toLowerCase()}`}
                   name={props.name}
                   value={item.value}
@@ -61,7 +61,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
       </div>
 
       {props.helpText && (
-        <div className="text-xs mt-1 italic text-gray-500 dark:text-gray-300">
+        <div className="mt-1 text-xs italic text-gray-500 dark:text-gray-300">
           {props.helpText}
         </div>
       )}
diff --git a/src/components/fields/Tooltip.tsx b/src/components/fields/Tooltip.tsx
index fa4e55171..fd83a9c14 100644
--- a/src/components/fields/Tooltip.tsx
+++ b/src/components/fields/Tooltip.tsx
@@ -17,10 +17,10 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
     >
-      <QuestionIcon className="text-blue-500 ml-1" />
+      <QuestionIcon className="ml-1 text-blue-500" />
       {showTooltip && (
-        <div className="absolute bg-white dark:bg-gray-sidebar border border-gray-300 rounded p-2 shadow z-10">
-          <div className="text-gray-700 dark:text-white text-xs text-left">
+        <div className="absolute z-10 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar">
+          <div className="text-left text-xs text-gray-700 dark:text-white">
             {props.tooltip}
           </div>
         </div>
diff --git a/src/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
index 8d0e7fc1f..b2d9b1c0c 100644
--- a/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -6,23 +6,23 @@ exports[`components/fields/Checkbox.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="appearance"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -33,7 +33,7 @@ exports[`components/fields/Checkbox.tsx should render 1`] = `
           </div>
         </div>
         <div
-          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+          class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
         >
           This is some helper text
         </div>
@@ -42,23 +42,23 @@ exports[`components/fields/Checkbox.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="mt-1 mb-3 text-sm"
+      class="mb-3 mt-1 text-sm"
     >
       <div
         class="flex items-start"
       >
         <div
-          class="flex items-center h-5"
+          class="flex h-5 items-center"
         >
           <input
             checked=""
-            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
             id="appearance"
             type="checkbox"
           />
         </div>
         <div
-          class="ml-3 "
+          class="ml-3"
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200"
@@ -69,7 +69,7 @@ exports[`components/fields/Checkbox.tsx should render 1`] = `
         </div>
       </div>
       <div
-        class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+        class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
       >
         This is some helper text
       </div>
diff --git a/src/components/fields/__snapshots__/FieldInput.test.tsx.snap b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
index 8338ba73f..7914038d9 100644
--- a/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
+++ b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
@@ -10,13 +10,13 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
           class="mb-4"
         >
           <label
-            class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+            class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
             for="appearance"
           >
             Appearance
           </label>
           <input
-            class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+            class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
             id="appearance"
             name="appearance"
             placeholder="This is some placeholder text"
@@ -24,7 +24,7 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
             value=""
           />
           <div
-            class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+            class="mt-3 text-xs text-gray-700 dark:text-gray-200"
           >
             This is some helper text
           </div>
@@ -38,13 +38,13 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
         class="mb-4"
       >
         <label
-          class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+          class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
           for="appearance"
         >
           Appearance
         </label>
         <input
-          class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+          class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
           id="appearance"
           name="appearance"
           placeholder="This is some placeholder text"
@@ -52,7 +52,7 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
           value=""
         />
         <div
-          class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+          class="mt-3 text-xs text-gray-700 dark:text-gray-200"
         >
           This is some helper text
         </div>
diff --git a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index b8996bf54..231943115 100644
--- a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
@@ -15,7 +15,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
             class="mr-3 py-1"
           >
             <label
-              class="font-medium text-gray-700 dark:text-gray-200 "
+              class="font-medium text-gray-700 dark:text-gray-200"
               for="appearance"
             >
               Appearance
@@ -27,10 +27,10 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
             role="group"
           >
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 id="appearance_one"
                 name="appearance"
                 type="radio"
@@ -44,11 +44,11 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
               </label>
             </div>
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
                 checked=""
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 id="appearance_two"
                 name="appearance"
                 type="radio"
@@ -64,7 +64,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
           </div>
         </div>
         <div
-          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+          class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
         >
           This is some helper text
         </div>
@@ -73,7 +73,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="mt-1 mb-3 text-sm"
+      class="mb-3 mt-1 text-sm"
     >
       <div
         class="flex items-start"
@@ -82,7 +82,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
           class="mr-3 py-1"
         >
           <label
-            class="font-medium text-gray-700 dark:text-gray-200 "
+            class="font-medium text-gray-700 dark:text-gray-200"
             for="appearance"
           >
             Appearance
@@ -94,10 +94,10 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
           role="group"
         >
           <div
-            class="flex mt-1"
+            class="mt-1 flex"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+              class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="appearance_one"
               name="appearance"
               type="radio"
@@ -111,11 +111,11 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
             </label>
           </div>
           <div
-            class="flex mt-1"
+            class="mt-1 flex"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+              class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="appearance_two"
               name="appearance"
               type="radio"
@@ -131,7 +131,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
         </div>
       </div>
       <div
-        class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+        class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
       >
         This is some helper text
       </div>
@@ -197,7 +197,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
@@ -206,7 +206,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
             class="mr-3 py-1"
           >
             <label
-              class="font-medium text-gray-700 dark:text-gray-200 "
+              class="font-medium text-gray-700 dark:text-gray-200"
               for="appearance"
               style="text-decoration: line-through;"
             >
@@ -219,10 +219,10 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
             role="group"
           >
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 disabled=""
                 id="appearance_one"
                 name="appearance"
@@ -237,11 +237,11 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
               </label>
             </div>
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
                 checked=""
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 disabled=""
                 id="appearance_two"
                 name="appearance"
@@ -258,7 +258,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
           </div>
         </div>
         <div
-          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+          class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
         >
           This is some helper text
         </div>
@@ -267,7 +267,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
   </body>,
   "container": <div>
     <div
-      class="mt-1 mb-3 text-sm"
+      class="mb-3 mt-1 text-sm"
     >
       <div
         class="flex items-start"
@@ -276,7 +276,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
           class="mr-3 py-1"
         >
           <label
-            class="font-medium text-gray-700 dark:text-gray-200 "
+            class="font-medium text-gray-700 dark:text-gray-200"
             for="appearance"
             style="text-decoration: line-through;"
           >
@@ -289,10 +289,10 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
           role="group"
         >
           <div
-            class="flex mt-1"
+            class="mt-1 flex"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+              class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
               disabled=""
               id="appearance_one"
               name="appearance"
@@ -307,11 +307,11 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
             </label>
           </div>
           <div
-            class="flex mt-1"
+            class="mt-1 flex"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+              class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
               disabled=""
               id="appearance_two"
               name="appearance"
@@ -328,7 +328,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
         </div>
       </div>
       <div
-        class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
+        class="mt-1 text-xs italic text-gray-500 dark:text-gray-300"
       >
         This is some helper text
       </div>
diff --git a/src/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/components/fields/__snapshots__/Tooltip.test.tsx.snap
index d8c4bad3e..b650726ab 100644
--- a/src/components/fields/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/components/fields/__snapshots__/Tooltip.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`components/fields/Tooltip.tsx should display on mouse enter / leave 1`]
 >
   <svg
     aria-hidden="true"
-    class="text-blue-500 ml-1"
+    class="ml-1 text-blue-500"
     fill="currentColor"
     focusable="false"
     height="16"
@@ -21,10 +21,10 @@ exports[`components/fields/Tooltip.tsx should display on mouse enter / leave 1`]
     />
   </svg>
   <div
-    class="absolute bg-white dark:bg-gray-sidebar border border-gray-300 rounded p-2 shadow z-10"
+    class="absolute z-10 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar"
   >
     <div
-      class="text-gray-700 dark:text-white text-xs text-left"
+      class="text-left text-xs text-gray-700 dark:text-white"
     >
       This is some tooltip text
     </div>
@@ -40,7 +40,7 @@ exports[`components/fields/Tooltip.tsx should display on mouse enter / leave 2`]
 >
   <svg
     aria-hidden="true"
-    class="text-blue-500 ml-1"
+    class="ml-1 text-blue-500"
     fill="currentColor"
     focusable="false"
     height="16"
@@ -67,7 +67,7 @@ exports[`components/fields/Tooltip.tsx should render 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="text-blue-500 ml-1"
+          class="ml-1 text-blue-500"
           fill="currentColor"
           focusable="false"
           height="16"
@@ -90,7 +90,7 @@ exports[`components/fields/Tooltip.tsx should render 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="text-blue-500 ml-1"
+        class="ml-1 text-blue-500"
         fill="currentColor"
         focusable="false"
         height="16"
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 99a84413e..616f152fd 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -44,10 +44,10 @@ export const AccountsRoute: FC = () => {
 
   return (
     <div
-      className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
+      className="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
       data-testid="accounts"
     >
-      <div className="flex justify-between items-center mt-2 py-2 mx-8">
+      <div className="mx-8 mt-2 flex items-center justify-between py-2">
         <button
           type="button"
           className="focus:outline-none"
@@ -65,24 +65,24 @@ export const AccountsRoute: FC = () => {
       </div>
 
       <div className="flex-grow overflow-x-auto px-8">
-        <div className="flex flex-col mt-4 text-sm">
+        <div className="mt-4 flex flex-col text-sm">
           {auth.accounts.map((account) => (
             <div
               key={getAccountUUID(account)}
-              className="flex justify-between items-center bg-gray-100 dark:bg-gray-900 rounded-md p-1 mb-4"
+              className="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
             >
               <div className="ml-2 text-xs">
                 <div>
                   <button
                     type="button"
-                    className="cursor-pointer font-semibold mb-1 text-sm"
+                    className="mb-1 cursor-pointer text-sm font-semibold"
                     title="Open Profile"
                     onClick={() => openAccountProfile(account)}
                   >
                     @{account.user.login}
                     <span
                       hidden={!account.user?.name}
-                      className="pl-1 font-medium text-xs italic"
+                      className="pl-1 text-xs font-medium italic"
                     >
                       - {account.user?.name}
                     </span>
@@ -91,7 +91,7 @@ export const AccountsRoute: FC = () => {
                 <div>
                   <button
                     type="button"
-                    className="cursor-pointer mb-1 ml-1 align-middle"
+                    className="mb-1 ml-1 cursor-pointer align-middle"
                     title="Open Host"
                     onClick={() => openHost(account.hostname)}
                   >
@@ -102,7 +102,7 @@ export const AccountsRoute: FC = () => {
                 <div>
                   <button
                     type="button"
-                    className="cursor-pointer ml-1 align-middle"
+                    className="ml-1 cursor-pointer align-middle"
                     title="Open Developer Settings"
                     onClick={() => openDeveloperSettings(account)}
                   >
@@ -129,7 +129,7 @@ export const AccountsRoute: FC = () => {
         </div>
       </div>
 
-      <div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8 text-sm">
+      <div className="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker">
         <div className="font-semibold italic">Add new account</div>
         <div>
           <button
@@ -139,7 +139,7 @@ export const AccountsRoute: FC = () => {
             onClick={loginWithPersonalAccessToken}
           >
             <KeyIcon size={18} aria-label="Login with Personal Access Token" />
-            <PlusIcon size={10} className="ml-1 mb-2" />
+            <PlusIcon size={10} className="mb-2 ml-1" />
           </button>
           <button
             type="button"
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index a1f80c232..7ca17af87 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -27,14 +27,14 @@ export const LoginRoute: FC = () => {
   }, []); */
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark dark:text-white">
-      <Logo className="w-16 h-16" isDark />
+    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 dark:bg-gray-dark dark:text-white">
+      <Logo className="h-16 w-16" isDark />
 
-      <div className="my-4 px-2.5 py-1.5 font-semibold text-center">
+      <div className="my-4 px-2.5 py-1.5 text-center font-semibold">
         GitHub Notifications <br /> on your menu bar.
       </div>
 
-      <div className="font-semibold text-center text-sm italic">Login with</div>
+      <div className="text-center text-sm font-semibold italic">Login with</div>
       {
         // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
         /*    
@@ -52,14 +52,14 @@ export const LoginRoute: FC = () => {
         name="Personal Access Token"
         icon={KeyIcon}
         label="Login with Personal Access Token"
-        className="py-2 mt-2"
+        className="mt-2 py-2"
         onClick={() => navigate('/login-personal-access-token')}
       />
       <Button
         name="OAuth App"
         icon={PersonIcon}
         label="Login with OAuth App"
-        className="py-2 mt-2"
+        className="mt-2 py-2"
         onClick={() => navigate('/login-oauth-app')}
       />
     </div>
diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index 1bf4282d7..07f0c9d7a 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/src/routes/LoginWithOAuthApp.tsx
@@ -92,7 +92,7 @@ export const LoginWithOAuthApp: FC = () => {
           placeholder="ABC123DEF456"
         />
 
-        <div className="flex justify-between items-end">
+        <div className="flex items-end justify-between">
           <Button
             name="Docs"
             label="GitHub Docs"
@@ -105,7 +105,7 @@ export const LoginWithOAuthApp: FC = () => {
           <Button
             name="Login"
             label="Login"
-            className="px-4 py-2 mt-2 !text-sm"
+            className="mt-2 px-4 py-2 !text-sm"
             icon={SignInIcon}
             size={16}
             disabled={submitting || pristine}
@@ -126,7 +126,7 @@ export const LoginWithOAuthApp: FC = () => {
 
   return (
     <div className="flex-1 bg-white dark:bg-gray-dark dark:text-white">
-      <div className="flex justify-between items-center mt-4 py-2 mx-8">
+      <div className="mx-8 mt-4 flex items-center justify-between py-2">
         <button
           type="button"
           className="focus:outline-none"
@@ -140,7 +140,7 @@ export const LoginWithOAuthApp: FC = () => {
           />
         </button>
 
-        <h3 className="text-lg font-semibold justify-center">
+        <h3 className="justify-center text-lg font-semibold">
           <PersonIcon size={20} className="mr-2" />
           Login with OAuth App
         </h3>
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index 1ce3e446b..46b85f927 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -61,7 +61,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
           label="Hostname"
           placeholder="github.company.com"
           helpText={
-            <div className="italic mt-1">
+            <div className="mt-1 italic">
               Change only if you are using GitHub Enterprise Server.
             </div>
           }
@@ -84,7 +84,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
                 />
                 <span className="mx-1">on GitHub and paste above.</span>
               </div>
-              <div className="italic mt-1">
+              <div className="mt-1 italic">
                 The required scopes will be selected for you.
               </div>
             </div>
@@ -92,12 +92,12 @@ export const LoginWithPersonalAccessToken: FC = () => {
         />
 
         {!isValidToken && (
-          <div className="mt-4 text-red-500 text-sm font-medium">
+          <div className="mt-4 text-sm font-medium text-red-500">
             This token could not be validated with {values.hostname}.
           </div>
         )}
 
-        <div className="flex justify-between items-end">
+        <div className="flex items-end justify-between">
           <Button
             name="Docs"
             label="GitHub Docs"
@@ -109,7 +109,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
           <Button
             name="Login"
             label="Login"
-            className="px-4 py-2 mt-2 !text-sm"
+            className="mt-2 px-4 py-2 !text-sm"
             icon={SignInIcon}
             size={16}
             disabled={submitting || pristine}
@@ -134,7 +134,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
 
   return (
     <div className="flex-1 bg-white dark:bg-gray-dark dark:text-white">
-      <div className="flex justify-between items-center mt-4 py-2 mx-8">
+      <div className="mx-8 mt-4 flex items-center justify-between py-2">
         <button
           type="button"
           className="focus:outline-none"
@@ -148,7 +148,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
           />
         </button>
 
-        <h3 className="text-lg font-semibold justify-center">
+        <h3 className="justify-center text-lg font-semibold">
           <KeyIcon size={18} className="mr-2" />
           Login with Personal Access Token
         </h3>
diff --git a/src/routes/Notifications.tsx b/src/routes/Notifications.tsx
index 13e0dbd47..d99a5a57c 100644
--- a/src/routes/Notifications.tsx
+++ b/src/routes/Notifications.tsx
@@ -33,7 +33,7 @@ export const NotificationsRoute: FC = () => {
   }
 
   return (
-    <div className="flex flex-col flex-1 bg-white dark:bg-gray-dark">
+    <div className="flex flex-1 flex-col bg-white dark:bg-gray-dark">
       {notifications.map((accountNotifications) => (
         <AccountNotifications
           key={getAccountUUID(accountNotifications.account)}
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 8266860e7..c13fed871 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -51,10 +51,10 @@ export const SettingsRoute: FC = () => {
 
   return (
     <div
-      className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
+      className="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
       data-testid="settings"
     >
-      <div className="flex justify-between items-center mt-2 py-2 mx-8">
+      <div className="mx-8 mt-2 flex items-center justify-between py-2">
         <button
           type="button"
           className="focus:outline-none"
@@ -73,7 +73,7 @@ export const SettingsRoute: FC = () => {
 
       <div className="flex-grow overflow-x-auto px-8">
         <fieldset className="mb-3">
-          <legend id="appearance" className="font-semibold mt-2 mb-1">
+          <legend id="appearance" className="mb-1 mt-2 font-semibold">
             Appearance
           </legend>
           <RadioGroup
@@ -156,7 +156,7 @@ export const SettingsRoute: FC = () => {
         </fieldset>
 
         <fieldset className="mb-3">
-          <legend id="notifications" className="font-semibold mt-2 mb-1">
+          <legend id="notifications" className="mb-1 mt-2 font-semibold">
             Notifications
           </legend>
           <Checkbox
@@ -171,7 +171,7 @@ export const SettingsRoute: FC = () => {
                 See
                 <button
                   type="button"
-                  className="text-blue-500 mx-1"
+                  className="mx-1 text-blue-500"
                   title="Open GitHub documentation for participating and watching notifications"
                   onClick={(event: MouseEvent<HTMLElement>) => {
                     // Don't trigger onClick of parent element.
@@ -233,7 +233,7 @@ export const SettingsRoute: FC = () => {
         </fieldset>
 
         <fieldset className="mb-3">
-          <legend id="system" className="font-semibold mt-2 mb-1">
+          <legend id="system" className="mb-1 mt-2 font-semibold">
             System
           </legend>
           {isMacOS() && (
@@ -276,10 +276,10 @@ export const SettingsRoute: FC = () => {
         </fieldset>
       </div>
 
-      <div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8 text-sm">
+      <div className="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker">
         <button
           type="button"
-          className="font-semibold cursor-pointer"
+          className="cursor-pointer font-semibold"
           title="View release notes"
           onClick={() => openGitifyReleaseNotes(appVersion)}
         >
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index 61108dfb1..a09b2d085 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
 <div
-  class="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
+  class="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
   data-testid="accounts"
 >
   <div
-    class="flex justify-between items-center mt-2 py-2 mx-8"
+    class="mx-8 mt-2 flex items-center justify-between py-2"
   >
     <button
       class="focus:outline-none"
@@ -39,24 +39,24 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
     class="flex-grow overflow-x-auto px-8"
   >
     <div
-      class="flex flex-col mt-4 text-sm"
+      class="mt-4 flex flex-col text-sm"
     >
       <div
-        class="flex justify-between items-center bg-gray-100 dark:bg-gray-900 rounded-md p-1 mb-4"
+        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
       >
         <div
           class="ml-2 text-xs"
         >
           <div>
             <button
-              class="cursor-pointer font-semibold mb-1 text-sm"
+              class="mb-1 cursor-pointer text-sm font-semibold"
               title="Open Profile"
               type="button"
             >
               @
               octocat
               <span
-                class="pl-1 font-medium text-xs italic"
+                class="pl-1 text-xs font-medium italic"
               >
                 - 
                 Mona Lisa Octocat
@@ -65,7 +65,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
           <div>
             <button
-              class="cursor-pointer mb-1 ml-1 align-middle"
+              class="mb-1 ml-1 cursor-pointer align-middle"
               title="Open Host"
               type="button"
             >
@@ -95,7 +95,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
           <div>
             <button
-              class="cursor-pointer ml-1 align-middle"
+              class="ml-1 cursor-pointer align-middle"
               title="Open Developer Settings"
               type="button"
             >
@@ -147,21 +147,21 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="flex justify-between items-center bg-gray-100 dark:bg-gray-900 rounded-md p-1 mb-4"
+        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
       >
         <div
           class="ml-2 text-xs"
         >
           <div>
             <button
-              class="cursor-pointer font-semibold mb-1 text-sm"
+              class="mb-1 cursor-pointer text-sm font-semibold"
               title="Open Profile"
               type="button"
             >
               @
               octocat
               <span
-                class="pl-1 font-medium text-xs italic"
+                class="pl-1 text-xs font-medium italic"
               >
                 - 
                 Mona Lisa Octocat
@@ -170,7 +170,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
           <div>
             <button
-              class="cursor-pointer mb-1 ml-1 align-middle"
+              class="mb-1 ml-1 cursor-pointer align-middle"
               title="Open Host"
               type="button"
             >
@@ -200,7 +200,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
           <div>
             <button
-              class="cursor-pointer ml-1 align-middle"
+              class="ml-1 cursor-pointer align-middle"
               title="Open Developer Settings"
               type="button"
             >
@@ -252,21 +252,21 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="flex justify-between items-center bg-gray-100 dark:bg-gray-900 rounded-md p-1 mb-4"
+        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
       >
         <div
           class="ml-2 text-xs"
         >
           <div>
             <button
-              class="cursor-pointer font-semibold mb-1 text-sm"
+              class="mb-1 cursor-pointer text-sm font-semibold"
               title="Open Profile"
               type="button"
             >
               @
               octocat
               <span
-                class="pl-1 font-medium text-xs italic"
+                class="pl-1 text-xs font-medium italic"
               >
                 - 
                 Mona Lisa Octocat
@@ -275,7 +275,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
           <div>
             <button
-              class="cursor-pointer mb-1 ml-1 align-middle"
+              class="mb-1 ml-1 cursor-pointer align-middle"
               title="Open Host"
               type="button"
             >
@@ -305,7 +305,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           </div>
           <div>
             <button
-              class="cursor-pointer ml-1 align-middle"
+              class="ml-1 cursor-pointer align-middle"
               title="Open Developer Settings"
               type="button"
             >
@@ -359,7 +359,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    class="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8 text-sm"
+    class="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker"
   >
     <div
       class="font-semibold italic"
@@ -389,7 +389,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </svg>
         <svg
           aria-hidden="true"
-          class="ml-1 mb-2"
+          class="mb-2 ml-1"
           fill="currentColor"
           focusable="false"
           height="10"
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index dd01dee95..95ec0dc20 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark dark:text-white"
+        class="flex flex-1 flex-col items-center justify-center bg-white p-4 dark:bg-gray-dark dark:text-white"
       >
         <svg
           aria-label="Gitify Logo"
-          class="w-16 h-16"
+          class="h-16 w-16"
           role="img"
           viewBox="0 0 500 500"
           xmlns="http://www.w3.org/2000/svg"
@@ -53,20 +53,20 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
           </g>
         </svg>
         <div
-          class="my-4 px-2.5 py-1.5 font-semibold text-center"
+          class="my-4 px-2.5 py-1.5 text-center font-semibold"
         >
           GitHub Notifications 
           <br />
            on your menu bar.
         </div>
         <div
-          class="font-semibold text-center text-sm italic"
+          class="text-center text-sm font-semibold italic"
         >
           Login with
         </div>
         <button
           aria-label="Login with Personal Access Token"
-          class="py-2 mt-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+          class="mt-2 py-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
           title="Login with Personal Access Token"
           type="button"
         >
@@ -88,7 +88,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
         </button>
         <button
           aria-label="Login with OAuth App"
-          class="py-2 mt-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+          class="mt-2 py-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
           title="Login with OAuth App"
           type="button"
         >
@@ -113,11 +113,11 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark dark:text-white"
+      class="flex flex-1 flex-col items-center justify-center bg-white p-4 dark:bg-gray-dark dark:text-white"
     >
       <svg
         aria-label="Gitify Logo"
-        class="w-16 h-16"
+        class="h-16 w-16"
         role="img"
         viewBox="0 0 500 500"
         xmlns="http://www.w3.org/2000/svg"
@@ -160,20 +160,20 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
         </g>
       </svg>
       <div
-        class="my-4 px-2.5 py-1.5 font-semibold text-center"
+        class="my-4 px-2.5 py-1.5 text-center font-semibold"
       >
         GitHub Notifications 
         <br />
          on your menu bar.
       </div>
       <div
-        class="font-semibold text-center text-sm italic"
+        class="text-center text-sm font-semibold italic"
       >
         Login with
       </div>
       <button
         aria-label="Login with Personal Access Token"
-        class="py-2 mt-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+        class="mt-2 py-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
         title="Login with Personal Access Token"
         type="button"
       >
@@ -195,7 +195,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
       </button>
       <button
         aria-label="Login with OAuth App"
-        class="py-2 mt-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+        class="mt-2 py-2 rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
         title="Login with OAuth App"
         type="button"
       >
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index 2cca26a89..0cc9a182c 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
         class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
       >
         <div
-          class="flex justify-between items-center mt-4 py-2 mx-8"
+          class="mx-8 mt-4 flex items-center justify-between py-2"
         >
           <button
             class="focus:outline-none"
@@ -33,7 +33,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             </svg>
           </button>
           <h3
-            class="text-lg font-semibold justify-center"
+            class="justify-center text-lg font-semibold"
           >
             <svg
               aria-hidden="true"
@@ -60,13 +60,13 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
                 for="hostname"
               >
                 Hostname
               </label>
               <input
-                class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+                class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
                 id="hostname"
                 name="hostname"
                 placeholder="github.company.com"
@@ -74,7 +74,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 value=""
               />
               <div
-                class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+                class="mt-3 text-xs text-gray-700 dark:text-gray-200"
               >
                 <div
                   class="mb-1"
@@ -120,13 +120,13 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
                 for="clientId"
               >
                 Client ID
               </label>
               <input
-                class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+                class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
                 id="clientId"
                 name="clientId"
                 placeholder="123456789"
@@ -138,13 +138,13 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
                 for="clientSecret"
               >
                 Client Secret
               </label>
               <input
-                class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+                class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
                 id="clientSecret"
                 name="clientSecret"
                 placeholder="ABC123DEF456"
@@ -153,7 +153,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               />
             </div>
             <div
-              class="flex justify-between items-end"
+              class="flex items-end justify-between"
             >
               <button
                 aria-label="GitHub Docs"
@@ -179,7 +179,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               </button>
               <button
                 aria-label="Login"
-                class="px-4 py-2 mt-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+                class="mt-2 px-4 py-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
                 disabled=""
                 title="Login"
                 type="submit"
@@ -211,7 +211,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
       class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
     >
       <div
-        class="flex justify-between items-center mt-4 py-2 mx-8"
+        class="mx-8 mt-4 flex items-center justify-between py-2"
       >
         <button
           class="focus:outline-none"
@@ -235,7 +235,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           </svg>
         </button>
         <h3
-          class="text-lg font-semibold justify-center"
+          class="justify-center text-lg font-semibold"
         >
           <svg
             aria-hidden="true"
@@ -262,13 +262,13 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
               for="hostname"
             >
               Hostname
             </label>
             <input
-              class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
               id="hostname"
               name="hostname"
               placeholder="github.company.com"
@@ -276,7 +276,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               value=""
             />
             <div
-              class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+              class="mt-3 text-xs text-gray-700 dark:text-gray-200"
             >
               <div
                 class="mb-1"
@@ -322,13 +322,13 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
               for="clientId"
             >
               Client ID
             </label>
             <input
-              class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
               id="clientId"
               name="clientId"
               placeholder="123456789"
@@ -340,13 +340,13 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
               for="clientSecret"
             >
               Client Secret
             </label>
             <input
-              class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
               id="clientSecret"
               name="clientSecret"
               placeholder="ABC123DEF456"
@@ -355,7 +355,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             />
           </div>
           <div
-            class="flex justify-between items-end"
+            class="flex items-end justify-between"
           >
             <button
               aria-label="GitHub Docs"
@@ -381,7 +381,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             </button>
             <button
               aria-label="Login"
-              class="px-4 py-2 mt-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+              class="mt-2 px-4 py-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
               disabled=""
               title="Login"
               type="submit"
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index c0ca85e81..575eaffbb 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
         class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
       >
         <div
-          class="flex justify-between items-center mt-4 py-2 mx-8"
+          class="mx-8 mt-4 flex items-center justify-between py-2"
         >
           <button
             class="focus:outline-none"
@@ -33,7 +33,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             </svg>
           </button>
           <h3
-            class="text-lg font-semibold justify-center"
+            class="justify-center text-lg font-semibold"
           >
             <svg
               aria-hidden="true"
@@ -60,13 +60,13 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
                 for="hostname"
               >
                 Hostname
               </label>
               <input
-                class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+                class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
                 id="hostname"
                 name="hostname"
                 placeholder="github.company.com"
@@ -74,10 +74,10 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                 value="github.com"
               />
               <div
-                class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+                class="mt-3 text-xs text-gray-700 dark:text-gray-200"
               >
                 <div
-                  class="italic mt-1"
+                  class="mt-1 italic"
                 >
                   Change only if you are using GitHub Enterprise Server.
                 </div>
@@ -87,13 +87,13 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
                 for="token"
               >
                 Token
               </label>
               <input
-                class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+                class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
                 id="token"
                 name="token"
                 placeholder="The 40 characters token generated on GitHub"
@@ -101,7 +101,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                 value=""
               />
               <div
-                class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+                class="mt-3 text-xs text-gray-700 dark:text-gray-200"
               >
                 <div>
                   <div>
@@ -134,7 +134,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                     </span>
                   </div>
                   <div
-                    class="italic mt-1"
+                    class="mt-1 italic"
                   >
                     The required scopes will be selected for you.
                   </div>
@@ -142,7 +142,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               </div>
             </div>
             <div
-              class="flex justify-between items-end"
+              class="flex items-end justify-between"
             >
               <button
                 aria-label="GitHub Docs"
@@ -168,7 +168,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               </button>
               <button
                 aria-label="Login"
-                class="px-4 py-2 mt-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+                class="mt-2 px-4 py-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
                 disabled=""
                 title="Login"
                 type="submit"
@@ -200,7 +200,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
       class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
     >
       <div
-        class="flex justify-between items-center mt-4 py-2 mx-8"
+        class="mx-8 mt-4 flex items-center justify-between py-2"
       >
         <button
           class="focus:outline-none"
@@ -224,7 +224,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
           </svg>
         </button>
         <h3
-          class="text-lg font-semibold justify-center"
+          class="justify-center text-lg font-semibold"
         >
           <svg
             aria-hidden="true"
@@ -251,13 +251,13 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
               for="hostname"
             >
               Hostname
             </label>
             <input
-              class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
               id="hostname"
               name="hostname"
               placeholder="github.company.com"
@@ -265,10 +265,10 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               value="github.com"
             />
             <div
-              class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+              class="mt-3 text-xs text-gray-700 dark:text-gray-200"
             >
               <div
-                class="italic mt-1"
+                class="mt-1 italic"
               >
                 Change only if you are using GitHub Enterprise Server.
               </div>
@@ -278,13 +278,13 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
+              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
               for="token"
             >
               Token
             </label>
             <input
-              class="appearance-none block w-full dark:text-gray-800 bg-gray-100 border border-red rounded py-1.5 px-4 mb-2 focus:bg-gray-200 focus:outline-none text-sm"
+              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
               id="token"
               name="token"
               placeholder="The 40 characters token generated on GitHub"
@@ -292,7 +292,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               value=""
             />
             <div
-              class="mt-3 text-gray-700 dark:text-gray-200 text-xs"
+              class="mt-3 text-xs text-gray-700 dark:text-gray-200"
             >
               <div>
                 <div>
@@ -325,7 +325,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                   </span>
                 </div>
                 <div
-                  class="italic mt-1"
+                  class="mt-1 italic"
                 >
                   The required scopes will be selected for you.
                 </div>
@@ -333,7 +333,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="flex justify-between items-end"
+            class="flex items-end justify-between"
           >
             <button
               aria-label="GitHub Docs"
@@ -359,7 +359,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             </button>
             <button
               aria-label="Login"
-              class="px-4 py-2 mt-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
+              class="mt-2 px-4 py-2 !text-sm rounded bg-gray-300 font-semibold text-xs text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer px-2 py-1"
               disabled=""
               title="Login"
               type="submit"
diff --git a/src/routes/__snapshots__/Notifications.test.tsx.snap b/src/routes/__snapshots__/Notifications.test.tsx.snap
index 08e37f8d4..63be48e5e 100644
--- a/src/routes/__snapshots__/Notifications.test.tsx.snap
+++ b/src/routes/__snapshots__/Notifications.test.tsx.snap
@@ -420,7 +420,7 @@ exports[`routes/Notifications.tsx should render itself & its children (show acco
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col flex-1 bg-white dark:bg-gray-dark"
+        class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
       >
         <p>
           AccountNotifications
@@ -430,7 +430,7 @@ exports[`routes/Notifications.tsx should render itself & its children (show acco
   </body>,
   "container": <div>
     <div
-      class="flex flex-col flex-1 bg-white dark:bg-gray-dark"
+      class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
     >
       <p>
         AccountNotifications
@@ -497,7 +497,7 @@ exports[`routes/Notifications.tsx should render itself & its children (with noti
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col flex-1 bg-white dark:bg-gray-dark"
+        class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
       >
         <p>
           AccountNotifications
@@ -510,7 +510,7 @@ exports[`routes/Notifications.tsx should render itself & its children (with noti
   </body>,
   "container": <div>
     <div
-      class="flex flex-col flex-1 bg-white dark:bg-gray-dark"
+      class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
     >
       <p>
         AccountNotifications
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index fc5aab5fe..976a9548e 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`routes/Settings.tsx General should render itself & its children 1`] = `
 <div
-  class="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white"
+  class="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
   data-testid="settings"
 >
   <div
-    class="flex justify-between items-center mt-2 py-2 mx-8"
+    class="mx-8 mt-2 flex items-center justify-between py-2"
   >
     <button
       class="focus:outline-none"
@@ -42,13 +42,13 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
       class="mb-3"
     >
       <legend
-        class="font-semibold mt-2 mb-1"
+        class="mb-1 mt-2 font-semibold"
         id="appearance"
       >
         Appearance
       </legend>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
@@ -57,7 +57,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
             class="mr-3 py-1"
           >
             <label
-              class="font-medium text-gray-700 dark:text-gray-200 "
+              class="font-medium text-gray-700 dark:text-gray-200"
               for="theme"
             >
               Theme:
@@ -69,11 +69,11 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
             role="group"
           >
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
                 checked=""
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 id="theme_system"
                 name="theme"
                 type="radio"
@@ -87,10 +87,10 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               </label>
             </div>
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 id="theme_light"
                 name="theme"
                 type="radio"
@@ -104,10 +104,10 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               </label>
             </div>
             <div
-              class="flex mt-1"
+              class="mt-1 flex"
             >
               <input
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
+                class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
                 id="theme_dark"
                 name="theme"
                 type="radio"
@@ -124,23 +124,23 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="detailedNotifications"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -154,7 +154,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="text-blue-500 ml-1"
+                  class="ml-1 text-blue-500"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -172,23 +172,23 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="showPills"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -202,7 +202,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="text-blue-500 ml-1"
+                  class="ml-1 text-blue-500"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -220,22 +220,22 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="showAccountHostname"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -251,28 +251,28 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
       class="mb-3"
     >
       <legend
-        class="font-semibold mt-2 mb-1"
+        class="mb-1 mt-2 font-semibold"
         id="notifications"
       >
         Notifications
       </legend>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="showOnlyParticipating"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -286,7 +286,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="text-blue-500 ml-1"
+                  class="ml-1 text-blue-500"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -304,23 +304,23 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="showBots"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -334,7 +334,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="text-blue-500 ml-1"
+                  class="ml-1 text-blue-500"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -352,22 +352,22 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="markAsDoneOnOpen"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -379,22 +379,22 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="delayNotificationState"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -408,7 +408,7 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="text-blue-500 ml-1"
+                  class="ml-1 text-blue-500"
                   fill="currentColor"
                   focusable="false"
                   height="16"
@@ -430,28 +430,28 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
       class="mb-3"
     >
       <legend
-        class="font-semibold mt-2 mb-1"
+        class="mb-1 mt-2 font-semibold"
         id="system"
       >
         System
       </legend>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="showNotificationsCountInTray"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -463,23 +463,23 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="showNotifications"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -491,23 +491,23 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
               checked=""
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="playSound"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -519,22 +519,22 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mt-1 mb-3 text-sm"
+        class="mb-3 mt-1 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="flex items-center h-5"
+            class="flex h-5 items-center"
           >
             <input
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
               id="openAtStartUp"
               type="checkbox"
             />
           </div>
           <div
-            class="ml-3 "
+            class="ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -548,10 +548,10 @@ exports[`routes/Settings.tsx General should render itself & its children 1`] = `
     </fieldset>
   </div>
   <div
-    class="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8 text-sm"
+    class="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker"
   >
     <button
-      class="font-semibold cursor-pointer"
+      class="cursor-pointer font-semibold"
       title="View release notes"
       type="button"
     >
@@ -611,17 +611,17 @@ exports[`routes/Settings.tsx Notifications section should be able to toggle the
   class="flex items-start"
 >
   <div
-    class="flex items-center h-5"
+    class="flex h-5 items-center"
   >
     <input
       checked=""
-      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+      class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
       id="showBots"
       type="checkbox"
     />
   </div>
   <div
-    class="ml-3 "
+    class="ml-3"
   >
     <label
       class="font-medium text-gray-700 dark:text-gray-200"
@@ -635,7 +635,7 @@ exports[`routes/Settings.tsx Notifications section should be able to toggle the
       >
         <svg
           aria-hidden="true"
-          class="text-blue-500 ml-1"
+          class="ml-1 text-blue-500"
           fill="currentColor"
           focusable="false"
           height="16"
@@ -658,18 +658,18 @@ exports[`routes/Settings.tsx Notifications section should not be able to toggle
   class="flex items-start"
 >
   <div
-    class="flex items-center h-5"
+    class="flex h-5 items-center"
   >
     <input
       checked=""
-      class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+      class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
       disabled=""
       id="showBots"
       type="checkbox"
     />
   </div>
   <div
-    class="ml-3 "
+    class="ml-3"
   >
     <label
       class="font-medium text-gray-700 dark:text-gray-200"
@@ -684,7 +684,7 @@ exports[`routes/Settings.tsx Notifications section should not be able to toggle
       >
         <svg
           aria-hidden="true"
-          class="text-blue-500 ml-1"
+          class="ml-1 text-blue-500"
           fill="currentColor"
           focusable="false"
           height="16"
diff --git a/src/utils/api/graphql/discussions.ts b/src/utils/api/graphql/discussions.ts
index ab34a9001..b5ce239af 100644
--- a/src/utils/api/graphql/discussions.ts
+++ b/src/utils/api/graphql/discussions.ts
@@ -23,12 +23,12 @@ const FRAGMENT_COMMENTS = gql`
 
 export const QUERY_SEARCH_DISCUSSIONS = gql`
   query fetchDiscussions(
-    $queryStatement: String!,
-    $firstDiscussions: Int,
-    $lastComments: Int,
+    $queryStatement: String!
+    $firstDiscussions: Int
+    $lastComments: Int
     $lastReplies: Int
   ) {
-    search(query:$queryStatement, type: DISCUSSION, first: $firstDiscussions) {
+    search(query: $queryStatement, type: DISCUSSION, first: $firstDiscussions) {
       nodes {
         ... on Discussion {
           title
@@ -38,7 +38,7 @@ export const QUERY_SEARCH_DISCUSSIONS = gql`
           author {
             ...AuthorFields
           }
-          comments(last: $lastComments){
+          comments(last: $lastComments) {
             totalCount
             nodes {
               ...CommentFields