diff --git a/__snapshots__/navbar.test.js.snap b/__snapshots__/navbar.test.js.snap
index 5589c76..c6945ce 100644
--- a/__snapshots__/navbar.test.js.snap
+++ b/__snapshots__/navbar.test.js.snap
@@ -23,7 +23,7 @@ exports[`Navbar Default smoke-test 1`] = `
           </a>
         </div>
         <div class="navbar-end gap-4">
-          <div class="h-8 skeleton w-20">
+          <div class="skeleton h-8 w-20">
           </div>
         </div>
       </div>
@@ -55,17 +55,19 @@ exports[`Navbar Logged in smoke-test 1`] = `
           </a>
         </div>
         <div class="navbar-end gap-4">
-          <div class="flex my-2">
-            <div class="avatar flex-none">
-              <div class="w-8 h-8 rounded">
-                <img class="my-0"
-                     src="../test-profile-image.jpg"
-                     alt="DanConwayDev"
-                >
+          <div>
+            <div class="my-2 text-md flex items-center">
+              <div class="avatar flex-none">
+                <div class="rounded h-8 w-8">
+                  <img class="my-0"
+                       src="../test-profile-image.jpg"
+                       alt="DanConwayDev"
+                  >
+                </div>
+              </div>
+              <div class="pl-3 flex-auto m-auto">
+                DanConwayDev
               </div>
-            </div>
-            <div class="flex-auto pl-3 m-auto">
-              DanConwayDev
             </div>
           </div>
         </div>
@@ -98,7 +100,7 @@ exports[`Navbar NIP07 Loading smoke-test 1`] = `
           </a>
         </div>
         <div class="navbar-end gap-4">
-          <div class="h-8 skeleton w-20">
+          <div class="skeleton h-8 w-20">
           </div>
         </div>
       </div>
@@ -130,7 +132,7 @@ exports[`Navbar NIP07Exists smoke-test 1`] = `
           </a>
         </div>
         <div class="navbar-end gap-4">
-          <button class="btn normal-case btn-sm btn-ghost">
+          <button class="btn btn-ghost btn-sm normal-case">
             Login
           </button>
         </div>
@@ -163,7 +165,7 @@ exports[`Navbar NoNIP07 smoke-test 1`] = `
           </a>
         </div>
         <div class="navbar-end gap-4">
-          <button class="btn normal-case btn-sm btn-ghost">
+          <button class="btn btn-ghost btn-sm normal-case">
             Sign up
           </button>
         </div>
diff --git a/__snapshots__/prs-header.test.js.snap b/__snapshots__/prs-header.test.js.snap
index 3c38985..6eb578c 100644
--- a/__snapshots__/prs-header.test.js.snap
+++ b/__snapshots__/prs-header.test.js.snap
@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PRs/Header Author Loading smoke-test 1`] = `
-<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
+<div class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content">
   <div class="mx-auto lg:container">
     <div class="px-3">
-      <div class="text-lg text-base-content mb-2">
+      <div class="mb-2 text-lg text-base-content">
         short title
       </div>
       <div class="pt-1">
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           <div tabindex="0"
                role="button"
                class="btn btn-success btn-sm align-middle cursor-default"
           >
             <svg xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 18 18"
-                 class="h-5 w-5 pt-1 flex-none fill-success-content"
+                 class="h-5 w-5 flex-none fill-success-content pt-1"
             >
               <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
               </path>
@@ -23,11 +23,11 @@ exports[`PRs/Header Author Loading smoke-test 1`] = `
             Open
           </div>
         </div>
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           opened 3 months ago
         </div>
         <div class="inline align-middle">
-          <div class="skeleton h-3 pb-2 w-20 inline-block">
+          <div class="skeleton inline-block h-3 w-20 pb-2">
           </div>
         </div>
       </div>
@@ -37,21 +37,21 @@ exports[`PRs/Header Author Loading smoke-test 1`] = `
 `;
 
 exports[`PRs/Header Long Details smoke-test 1`] = `
-<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
+<div class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content">
   <div class="mx-auto lg:container">
     <div class="px-3">
-      <div class="text-lg text-base-content mb-2">
+      <div class="mb-2 text-lg text-base-content">
         rather long title that goes on and on and on and on and on and on...
       </div>
       <div class="pt-1">
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           <div tabindex="0"
                role="button"
                class="btn btn-success btn-sm align-middle cursor-default"
           >
             <svg xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 18 18"
-                 class="h-5 w-5 pt-1 flex-none fill-success-content"
+                 class="h-5 w-5 flex-none fill-success-content pt-1"
             >
               <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
               </path>
@@ -59,7 +59,7 @@ exports[`PRs/Header Long Details smoke-test 1`] = `
             Open
           </div>
         </div>
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           opened a minute ago
         </div>
         <div class="inline align-middle">
@@ -72,21 +72,21 @@ exports[`PRs/Header Long Details smoke-test 1`] = `
 `;
 
 exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
-<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
+<div class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content">
   <div class="mx-auto lg:container">
     <div class="px-3">
-      <div class="text-lg text-base-content mb-2">
+      <div class="mb-2 text-lg text-base-content">
         LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
       </div>
       <div class="pt-1">
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           <div tabindex="0"
                role="button"
                class="btn btn-success btn-sm align-middle cursor-default"
           >
             <svg xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 18 18"
-                 class="h-5 w-5 pt-1 flex-none fill-success-content"
+                 class="h-5 w-5 flex-none fill-success-content pt-1"
             >
               <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
               </path>
@@ -94,7 +94,7 @@ exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
             Open
           </div>
         </div>
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           opened 3 months ago
         </div>
         <div class="inline align-middle">
@@ -107,21 +107,21 @@ exports[`PRs/Header Long and No Spaces smoke-test 1`] = `
 `;
 
 exports[`PRs/Header Short Details smoke-test 1`] = `
-<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
+<div class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content">
   <div class="mx-auto lg:container">
     <div class="px-3">
-      <div class="text-lg text-base-content mb-2">
+      <div class="mb-2 text-lg text-base-content">
         short title
       </div>
       <div class="pt-1">
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           <div tabindex="0"
                role="button"
                class="btn btn-success btn-sm align-middle cursor-default"
           >
             <svg xmlns="http://www.w3.org/2000/svg"
                  viewbox="0 0 18 18"
-                 class="h-5 w-5 pt-1 flex-none fill-success-content"
+                 class="h-5 w-5 flex-none fill-success-content pt-1"
             >
               <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
               </path>
@@ -129,7 +129,7 @@ exports[`PRs/Header Short Details smoke-test 1`] = `
             Open
           </div>
         </div>
-        <div class="inline mr-3 align-middle">
+        <div class="mr-3 inline align-middle">
           opened 7 days ago
         </div>
         <div class="inline align-middle">
@@ -142,18 +142,18 @@ exports[`PRs/Header Short Details smoke-test 1`] = `
 `;
 
 exports[`PRs/Header loading smoke-test 1`] = `
-<div class="overflow-hidden grow text-xs text-neutral-content bg-base-200 border-b border-accent-content pt-2 pb-4">
+<div class="grow overflow-hidden border-b border-accent-content bg-base-200 pb-4 pt-2 text-xs text-neutral-content">
   <div class="mx-auto lg:container">
     <div class="px-3">
       <div>
-        <div class="h-7 w-60 pt-1 skeleton">
+        <div class="skeleton h-7 w-60 pt-1">
         </div>
         <div class>
-          <div class="h-8 w-20 mt-3 skeleton align-middle inline-block">
+          <div class="skeleton mt-3 inline-block h-8 w-20 align-middle">
           </div>
-          <div class="h-3 w-28 ml-3 mt-5 align-middle skeleton inline-block">
+          <div class="skeleton ml-3 mt-5 inline-block h-3 w-28 align-middle">
           </div>
-          <div class="h-3 w-28 ml-3 mt-5 align-middle skeleton inline-block">
+          <div class="skeleton ml-3 mt-5 inline-block h-3 w-28 align-middle">
           </div>
         </div>
       </div>
diff --git a/__snapshots__/prs-list-item.test.js.snap b/__snapshots__/prs-list-item.test.js.snap
index 54a7540..1262229 100644
--- a/__snapshots__/prs-list-item.test.js.snap
+++ b/__snapshots__/prs-list-item.test.js.snap
@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PRs/List/Item Author Loading smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-success"
+       class="h-5 w-5 flex-none fill-success pt-1"
   >
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       short title
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -26,11 +26,11 @@ exports[`PRs/List/Item Author Loading smoke-test 1`] = `
         </svg>
         1
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 3 months ago
       </li>
       <li class="inline">
-        <div class="skeleton h-3 pb-2 w-20 inline-block">
+        <div class="skeleton inline-block h-3 w-20 pb-2">
         </div>
       </li>
     </ul>
@@ -39,22 +39,22 @@ exports[`PRs/List/Item Author Loading smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Long Details smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-success"
+       class="h-5 w-5 flex-none fill-success pt-1"
   >
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       rather long title that goes on and on and on and on and on and on...
     </div>
     <ul class="pt-2">
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened a minute ago
       </li>
       <li class="inline">
@@ -66,24 +66,24 @@ exports[`PRs/List/Item Long Details smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-success"
+       class="h-5 w-5 flex-none fill-success pt-1"
   >
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -91,7 +91,7 @@ exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
         </svg>
         1
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 3 months ago
       </li>
       <li class="inline">
@@ -103,24 +103,24 @@ exports[`PRs/List/Item Long and No Spaces smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Short Details smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-success"
+       class="h-5 w-5 flex-none fill-success pt-1"
   >
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       short title
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -128,7 +128,7 @@ exports[`PRs/List/Item Short Details smoke-test 1`] = `
         </svg>
         2
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 7 days ago
       </li>
       <li class="inline">
@@ -140,24 +140,24 @@ exports[`PRs/List/Item Short Details smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Status Closed smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-neutral-content"
+       class="h-5 w-5 flex-none fill-neutral-content pt-1"
   >
     <path d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1m9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75m-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97l.97-.97a.748.748 0 0 1 1.265.332a.75.75 0 0 1-.205.729l-.97.97l.97.97a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018l-.97-.97l-.97.97a.749.749 0 0 1-1.275-.326a.749.749 0 0 1 .215-.734l.97-.97l-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M3.25 12a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m9.5 0a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       short title
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -165,7 +165,7 @@ exports[`PRs/List/Item Status Closed smoke-test 1`] = `
         </svg>
         2
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 7 days ago
       </li>
       <li class="inline">
@@ -177,24 +177,24 @@ exports[`PRs/List/Item Status Closed smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Status Draft smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-neutral-content"
+       class="h-5 w-5 flex-none fill-neutral-content pt-1"
   >
     <path d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1m9.5 14a2.25 2.25 0 1 1 0-4.5a2.25 2.25 0 0 1 0 4.5M2.5 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M3.25 12a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m9.5 0a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5M14 7.5a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m0-4.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       short title
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -202,7 +202,7 @@ exports[`PRs/List/Item Status Draft smoke-test 1`] = `
         </svg>
         2
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 7 days ago
       </li>
       <li class="inline">
@@ -214,19 +214,19 @@ exports[`PRs/List/Item Status Draft smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Status Loading smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
-  <div class="h-5 w-5 pt-1 flex-none skeleton">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
+  <div class="skeleton h-5 w-5 flex-none pt-1">
   </div>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       short title
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -234,7 +234,7 @@ exports[`PRs/List/Item Status Loading smoke-test 1`] = `
         </svg>
         2
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 7 days ago
       </li>
       <li class="inline">
@@ -246,24 +246,24 @@ exports[`PRs/List/Item Status Loading smoke-test 1`] = `
 `;
 
 exports[`PRs/List/Item Status Merged smoke-test 1`] = `
-<li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+<li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-primary"
+       class="h-5 w-5 flex-none fill-primary pt-1"
   >
     <path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218M4.25 13.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m8.5-4.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M5 3.25a.75.75 0 1 0 0 .005z">
     </path>
   </svg>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
     <div class="text-sm text-base-content">
       short title
     </div>
     <ul class="pt-2">
-      <li class="align-middle inline mr-3">
+      <li class="mr-3 inline align-middle">
         <svg xmlns="http://www.w3.org/2000/svg"
-             class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+             class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
              viewbox="0 0 16 16"
         >
           <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -271,7 +271,7 @@ exports[`PRs/List/Item Status Merged smoke-test 1`] = `
         </svg>
         2
       </li>
-      <li class="inline mr-3">
+      <li class="mr-3 inline">
         opened 7 days ago
       </li>
       <li class="inline">
@@ -284,14 +284,14 @@ exports[`PRs/List/Item Status Merged smoke-test 1`] = `
 
 exports[`PRs/List/Item loading smoke-test 1`] = `
 <li class="flex p-2 pt-4 ">
-  <div class="h-5 w-5 pt-1 flex-none skeleton">
+  <div class="skeleton h-5 w-5 flex-none pt-1">
   </div>
   <a href="/repo//pr/"
-     class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+     class="ml-3 grow overflow-hidden text-xs text-neutral-content"
   >
-    <div class="h-5 w-60 pt-1 flex-none skeleton">
+    <div class="skeleton h-5 w-60 flex-none pt-1">
     </div>
-    <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
+    <div class="skeleton mb-1 mt-3 h-3 w-40 flex-none">
     </div>
   </a>
 </li>
diff --git a/__snapshots__/prs-list-list.test.js.snap b/__snapshots__/prs-list-list.test.js.snap
index dc4dd9a..68f1885 100644
--- a/__snapshots__/prs-list-list.test.js.snap
+++ b/__snapshots__/prs-list-list.test.js.snap
@@ -8,24 +8,24 @@ exports[`PRs/List/List Default smoke-test 1`] = `
     </h4>
   </div>
   <ul class="divide-y divide-neutral-600">
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           short title
         </div>
         <ul class="pt-2">
-          <li class="align-middle inline mr-3">
+          <li class="mr-3 inline align-middle">
             <svg xmlns="http://www.w3.org/2000/svg"
-                 class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+                 class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
                  viewbox="0 0 16 16"
             >
               <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -33,7 +33,7 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             </svg>
             2
           </li>
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened 7 days ago
           </li>
           <li class="inline">
@@ -42,22 +42,22 @@ exports[`PRs/List/List Default smoke-test 1`] = `
         </ul>
       </a>
     </li>
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           rather long title that goes on and on and on and on and on and on...
         </div>
         <ul class="pt-2">
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened a minute ago
           </li>
           <li class="inline">
@@ -66,24 +66,24 @@ exports[`PRs/List/List Default smoke-test 1`] = `
         </ul>
       </a>
     </li>
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           LongNameLongNameLongNameLongNameLongNameLongNameLongNameLongNameL...
         </div>
         <ul class="pt-2">
-          <li class="align-middle inline mr-3">
+          <li class="mr-3 inline align-middle">
             <svg xmlns="http://www.w3.org/2000/svg"
-                 class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+                 class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
                  viewbox="0 0 16 16"
             >
               <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -91,7 +91,7 @@ exports[`PRs/List/List Default smoke-test 1`] = `
             </svg>
             1
           </li>
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened 3 months ago
           </li>
           <li class="inline">
@@ -128,38 +128,38 @@ exports[`PRs/List/List Loading smoke-test 1`] = `
   </div>
   <ul class="divide-y divide-neutral-600">
     <li class="flex p-2 pt-4 ">
-      <div class="h-5 w-5 pt-1 flex-none skeleton">
+      <div class="skeleton h-5 w-5 flex-none pt-1">
       </div>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
-        <div class="h-5 w-60 pt-1 flex-none skeleton">
+        <div class="skeleton h-5 w-60 flex-none pt-1">
         </div>
-        <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
+        <div class="skeleton mb-1 mt-3 h-3 w-40 flex-none">
         </div>
       </a>
     </li>
     <li class="flex p-2 pt-4 ">
-      <div class="h-5 w-5 pt-1 flex-none skeleton">
+      <div class="skeleton h-5 w-5 flex-none pt-1">
       </div>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
-        <div class="h-5 w-60 pt-1 flex-none skeleton">
+        <div class="skeleton h-5 w-60 flex-none pt-1">
         </div>
-        <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
+        <div class="skeleton mb-1 mt-3 h-3 w-40 flex-none">
         </div>
       </a>
     </li>
     <li class="flex p-2 pt-4 ">
-      <div class="h-5 w-5 pt-1 flex-none skeleton">
+      <div class="skeleton h-5 w-5 flex-none pt-1">
       </div>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
-        <div class="h-5 w-60 pt-1 flex-none skeleton">
+        <div class="skeleton h-5 w-60 flex-none pt-1">
         </div>
-        <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
+        <div class="skeleton mb-1 mt-3 h-3 w-40 flex-none">
         </div>
       </a>
     </li>
@@ -170,24 +170,24 @@ exports[`PRs/List/List Loading smoke-test 1`] = `
 exports[`PRs/List/List No Title smoke-test 1`] = `
 <div class>
   <ul class="divide-y divide-neutral-600">
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           short title
         </div>
         <ul class="pt-2">
-          <li class="align-middle inline mr-3">
+          <li class="mr-3 inline align-middle">
             <svg xmlns="http://www.w3.org/2000/svg"
-                 class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+                 class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
                  viewbox="0 0 16 16"
             >
               <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -195,7 +195,7 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
             </svg>
             2
           </li>
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened 7 days ago
           </li>
           <li class="inline">
@@ -204,22 +204,22 @@ exports[`PRs/List/List No Title smoke-test 1`] = `
         </ul>
       </a>
     </li>
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           rather long title that goes on and on and on and on and on and on...
         </div>
         <ul class="pt-2">
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened a minute ago
           </li>
           <li class="inline">
@@ -240,24 +240,24 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
     </h4>
   </div>
   <ul class="divide-y divide-neutral-600">
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           short title
         </div>
         <ul class="pt-2">
-          <li class="align-middle inline mr-3">
+          <li class="mr-3 inline align-middle">
             <svg xmlns="http://www.w3.org/2000/svg"
-                 class="h-3 w-3 pt-0 flex-none fill-base-content inline-block"
+                 class="inline-block h-3 w-3 flex-none fill-base-content pt-0"
                  viewbox="0 0 16 16"
             >
               <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z">
@@ -265,7 +265,7 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
             </svg>
             2
           </li>
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened 7 days ago
           </li>
           <li class="inline">
@@ -274,22 +274,22 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
         </ul>
       </a>
     </li>
-    <li class="flex p-2 pt-4 hover:bg-neutral-700 cursor-pointer">
+    <li class="flex p-2 pt-4 cursor-pointer hover:bg-neutral-700">
       <svg xmlns="http://www.w3.org/2000/svg"
            viewbox="0 0 16 16"
-           class="h-5 w-5 pt-1 flex-none fill-success"
+           class="h-5 w-5 flex-none fill-success pt-1"
       >
         <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
         </path>
       </svg>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
         <div class="text-sm text-base-content">
           rather long title that goes on and on and on and on and on and on...
         </div>
         <ul class="pt-2">
-          <li class="inline mr-3">
+          <li class="mr-3 inline">
             opened a minute ago
           </li>
           <li class="inline">
@@ -299,14 +299,14 @@ exports[`PRs/List/List Partially Loaded smoke-test 1`] = `
       </a>
     </li>
     <li class="flex p-2 pt-4 ">
-      <div class="h-5 w-5 pt-1 flex-none skeleton">
+      <div class="skeleton h-5 w-5 flex-none pt-1">
       </div>
       <a href="/repo//pr/"
-         class="ml-3 overflow-hidden grow text-xs text-neutral-content"
+         class="ml-3 grow overflow-hidden text-xs text-neutral-content"
       >
-        <div class="h-5 w-60 pt-1 flex-none skeleton">
+        <div class="skeleton h-5 w-60 flex-none pt-1">
         </div>
-        <div class="h-3 w-40 mt-3 mb-1 flex-none skeleton">
+        <div class="skeleton mb-1 mt-3 h-3 w-40 flex-none">
         </div>
       </a>
     </li>
diff --git a/__snapshots__/prs-status.test.js.snap b/__snapshots__/prs-status.test.js.snap
index a31d0cb..e3b762d 100644
--- a/__snapshots__/prs-status.test.js.snap
+++ b/__snapshots__/prs-status.test.js.snap
@@ -7,7 +7,7 @@ exports[`PRs/Status Closed smoke-test 1`] = `
 >
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-neutral-content"
+       class="h-5 w-5 flex-none fill-neutral-content pt-1"
   >
     <path d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1m9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75m-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97l.97-.97a.748.748 0 0 1 1.265.332a.75.75 0 0 1-.205.729l-.97.97l.97.97a.751.751 0 0 1-.018 1.042a.751.751 0 0 1-1.042.018l-.97-.97l-.97.97a.749.749 0 0 1-1.275-.326a.749.749 0 0 1 .215-.734l.97-.97l-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M3.25 12a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m9.5 0a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5">
     </path>
@@ -23,7 +23,7 @@ exports[`PRs/Status Draft smoke-test 1`] = `
 >
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-neutral-content"
+       class="h-5 w-5 flex-none fill-neutral-content pt-1"
   >
     <path d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1m9.5 14a2.25 2.25 0 1 1 0-4.5a2.25 2.25 0 0 1 0 4.5M2.5 3.25a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0M3.25 12a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m9.5 0a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5M14 7.5a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0m0-4.25a1.25 1.25 0 1 1-2.5 0a1.25 1.25 0 0 1 2.5 0">
     </path>
@@ -33,7 +33,7 @@ exports[`PRs/Status Draft smoke-test 1`] = `
 `;
 
 exports[`PRs/Status Loading smoke-test 1`] = `
-<div class="skeleton w-24 h-8 rounded-md inline-block align-middle">
+<div class="skeleton inline-block h-8 w-24 rounded-md align-middle">
 </div>
 `;
 
@@ -44,7 +44,7 @@ exports[`PRs/Status Merged smoke-test 1`] = `
 >
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 16 16"
-       class="h-5 w-5 pt-1 flex-none fill-primary-content"
+       class="h-5 w-5 flex-none fill-primary-content pt-1"
   >
     <path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218M4.25 13.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5m8.5-4.5a.75.75 0 1 0 0-1.5a.75.75 0 0 0 0 1.5M5 3.25a.75.75 0 1 0 0 .005z">
     </path>
@@ -60,7 +60,7 @@ exports[`PRs/Status Open Edit Mode smoke-test 1`] = `
 >
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 18 18"
-       class="h-5 w-5 pt-1 flex-none fill-success-content"
+       class="h-5 w-5 flex-none fill-success-content pt-1"
   >
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
@@ -85,7 +85,7 @@ exports[`PRs/Status Open smoke-test 1`] = `
 >
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 18 18"
-       class="h-5 w-5 pt-1 flex-none fill-success-content"
+       class="h-5 w-5 flex-none fill-success-content pt-1"
   >
     <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25m5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354M3.75 2.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m0 9.5a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5m8.25.75a.75.75 0 1 0 1.5 0a.75.75 0 0 0-1.5 0">
     </path>
diff --git a/__snapshots__/repo-details.test.js.snap b/__snapshots__/repo-details.test.js.snap
index 187c097..24e0b3e 100644
--- a/__snapshots__/repo-details.test.js.snap
+++ b/__snapshots__/repo-details.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repo/Details Long Details smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis nisl eget turpis congue molestie. Nulla vitae purus nec augue accumsan facilisis sed sed ligula. Vestibulum sed risus lacinia risus lacinia molestie. Ut lorem quam, consequat eget tempus in, rhoncus vel nunc. Duis efficitur a leo vel sodales. Nam id fermentum lacus. Etiam nec placerat velit. Praesent ac consectetur est. Aenean iaculis commodo enim.
  Lorem ipsum dolor sit amet, con...
   </p>
@@ -29,7 +29,7 @@ exports[`Repo/Details Long Details smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -38,43 +38,49 @@ exports[`Repo/Details Long Details smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -82,13 +88,13 @@ exports[`Repo/Details Long Details smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -96,11 +102,11 @@ exports[`Repo/Details Long Details smoke-test 1`] = `
 `;
 
 exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     LoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsumLoremipsum
   </p>
   <div>
@@ -123,7 +129,7 @@ exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -132,43 +138,49 @@ exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -176,13 +188,13 @@ exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -190,7 +202,7 @@ exports[`Repo/Details Long and No Spaces smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Description smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <div>
   </div>
   <div>
@@ -213,7 +225,7 @@ exports[`Repo/Details No Description smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -222,43 +234,49 @@ exports[`Repo/Details No Description smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -266,13 +284,13 @@ exports[`Repo/Details No Description smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -280,11 +298,11 @@ exports[`Repo/Details No Description smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Git Server smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -309,43 +327,49 @@ exports[`Repo/Details No Git Server smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -353,13 +377,13 @@ exports[`Repo/Details No Git Server smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -367,11 +391,11 @@ exports[`Repo/Details No Git Server smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Maintainers or Relays smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -394,7 +418,7 @@ exports[`Repo/Details No Maintainers or Relays smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -411,11 +435,11 @@ exports[`Repo/Details No Maintainers or Relays smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Maintainers smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -438,7 +462,7 @@ exports[`Repo/Details No Maintainers smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -451,13 +475,13 @@ exports[`Repo/Details No Maintainers smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -465,7 +489,7 @@ exports[`Repo/Details No Maintainers smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Name or Description smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <div>
   </div>
   <div>
@@ -488,7 +512,7 @@ exports[`Repo/Details No Name or Description smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -497,43 +521,49 @@ exports[`Repo/Details No Name or Description smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -541,13 +571,13 @@ exports[`Repo/Details No Name or Description smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -555,11 +585,11 @@ exports[`Repo/Details No Name or Description smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Relays smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -582,7 +612,7 @@ exports[`Repo/Details No Relays smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -591,43 +621,49 @@ exports[`Repo/Details No Relays smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -639,11 +675,11 @@ exports[`Repo/Details No Relays smoke-test 1`] = `
 `;
 
 exports[`Repo/Details No Tags smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -654,7 +690,7 @@ exports[`Repo/Details No Tags smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -663,43 +699,49 @@ exports[`Repo/Details No Tags smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="bob"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="bob"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          bob
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        bob
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -707,13 +749,13 @@ exports[`Repo/Details No Tags smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -721,11 +763,11 @@ exports[`Repo/Details No Tags smoke-test 1`] = `
 `;
 
 exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -748,7 +790,7 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -757,39 +799,45 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded bg-neutral">
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8 bg-neutral">
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          npub18669...
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        npub18669...
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -797,13 +845,13 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -811,11 +859,11 @@ exports[`Repo/Details One Maintainer's Profile Has No displayName or Name smoke-
 `;
 
 exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -838,7 +886,7 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -847,40 +895,46 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded skeleton">
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8 skeleton">
+          </div>
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        <div class="w-24 h-4 skeleton">
+        <div class="pl-3 flex-auto m-auto">
+          <div class="skeleton w-24 h-4">
+          </div>
         </div>
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -888,13 +942,13 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -902,11 +956,11 @@ exports[`Repo/Details One Maintainer's Profile Not Loaded smoke-test 1`] = `
 `;
 
 exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -929,7 +983,7 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -938,43 +992,49 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
     <h4>
       maintainers
     </h4>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="carole"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="carole"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          carole
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        carole
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="DanConwayDev"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="DanConwayDev"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          DanConwayDev
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        DanConwayDev
       </div>
     </div>
-    <div class="flex my-2">
-      <div class="avatar flex-none">
-        <div class="w-8 h-8 rounded">
-          <img class="my-0"
-               src="../test-profile-image.jpg"
-               alt="steve"
-          >
+    <div>
+      <div class="my-2 text-md flex items-center">
+        <div class="avatar flex-none">
+          <div class="rounded h-8 w-8">
+            <img class="my-0"
+                 src="../test-profile-image.jpg"
+                 alt="steve"
+            >
+          </div>
+        </div>
+        <div class="pl-3 flex-auto m-auto">
+          steve
         </div>
-      </div>
-      <div class="flex-auto pl-3 m-auto">
-        steve
       </div>
     </div>
   </div>
@@ -982,13 +1042,13 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -996,11 +1056,11 @@ exports[`Repo/Details One Maintainer's Profile Only Has displayName But No Name
 `;
 
 exports[`Repo/Details Short Details smoke-test 1`] = `
-<div class="max-w-md prose w-full">
+<div class="prose w-full max-w-md">
   <h4>
     description
   </h4>
-  <p class="text-sm my-2 break-words">
+  <p class="my-2 break-words text-sm">
     short description
   </p>
   <div>
@@ -1023,7 +1083,7 @@ exports[`Repo/Details Short Details smoke-test 1`] = `
     </h4>
     <a href="github.com/example/example"
        target="_blank"
-       class="link link-primary break-words my-2"
+       class="link link-primary my-2 break-words"
     >
       github.com/example/example
     </a>
@@ -1036,13 +1096,13 @@ exports[`Repo/Details Short Details smoke-test 1`] = `
     <h4>
       relays
     </h4>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.damus.io
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relay.snort.social
     </div>
-    <div class="badge badge-secondary block my-2">
+    <div class="badge badge-secondary my-2 block">
       relayable.org
     </div>
   </div>
@@ -1050,12 +1110,12 @@ exports[`Repo/Details Short Details smoke-test 1`] = `
 `;
 
 exports[`Repo/Details loading smoke-test 1`] = `
-<div class="max-w-md prose w-full">
-  <div class="h-5 my-3 skeleton w-20">
+<div class="prose w-full max-w-md">
+  <div class="skeleton my-3 h-5 w-20">
   </div>
-  <div class="h-4 my-2 skeleton">
+  <div class="skeleton my-2 h-4">
   </div>
-  <div class="h-4 my-2 mb-3 w-2/3 skeleton">
+  <div class="skeleton my-2 mb-3 h-4 w-2/3">
   </div>
   <div>
     <div class="badge skeleton w-20">
@@ -1064,25 +1124,25 @@ exports[`Repo/Details loading smoke-test 1`] = `
     </div>
   </div>
   <div>
-    <div class="h-5 my-3 skeleton w-20">
+    <div class="skeleton my-3 h-5 w-20">
     </div>
-    <div class="badge skeleton my-2 w-60 block">
+    <div class="badge skeleton my-2 block w-60">
     </div>
   </div>
   <div>
-    <div class="h-5 my-3 skeleton w-20">
+    <div class="skeleton my-3 h-5 w-20">
     </div>
-    <div class="badge skeleton my-2 w-60 block">
+    <div class="badge skeleton my-2 block w-60">
     </div>
-    <div class="badge skeleton my-2 w-40 block">
+    <div class="badge skeleton my-2 block w-40">
     </div>
   </div>
   <div>
-    <div class="h-5 my-3 skeleton w-20">
+    <div class="skeleton my-3 h-5 w-20">
     </div>
-    <div class="badge skeleton my-2 w-60 block">
+    <div class="badge skeleton my-2 block w-60">
     </div>
-    <div class="badge skeleton my-2 w-40 block">
+    <div class="badge skeleton my-2 block w-40">
     </div>
   </div>
 </div>
diff --git a/__snapshots__/repo-header.test.js.snap b/__snapshots__/repo-header.test.js.snap
index bb9659d..44d7b92 100644
--- a/__snapshots__/repo-header.test.js.snap
+++ b/__snapshots__/repo-header.test.js.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repo/Header Long Name smoke-test 1`] = `
-<div class="bg-base-300 border-b border-accent-content">
+<div class="border-b border-accent-content bg-base-300">
   <div class="mx-auto lg:container">
     <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
-       class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
+       class="strong btn btn-ghost mb-0 mt-0 break-words px-3 text-sm"
     >
       Long Name that goes on and on and on and on a...
     </a>
@@ -13,10 +13,10 @@ exports[`Repo/Header Long Name smoke-test 1`] = `
 `;
 
 exports[`Repo/Header No Name smoke-test 1`] = `
-<div class="bg-base-300 border-b border-accent-content">
+<div class="border-b border-accent-content bg-base-300">
   <div class="mx-auto lg:container">
     <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
-       class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
+       class="strong btn btn-ghost mb-0 mt-0 break-words px-3 text-sm"
     >
       Untitled
     </a>
@@ -25,10 +25,10 @@ exports[`Repo/Header No Name smoke-test 1`] = `
 `;
 
 exports[`Repo/Header Short Name smoke-test 1`] = `
-<div class="bg-base-300 border-b border-accent-content">
+<div class="border-b border-accent-content bg-base-300">
   <div class="mx-auto lg:container">
     <a href="/repo/9ee507fc4357d7ee16a5d8901bedcd103f23c17d"
-       class="btn btn-ghost text-sm break-words strong mt-0 mb-0 px-3"
+       class="strong btn btn-ghost mb-0 mt-0 break-words px-3 text-sm"
     >
       Short Name
     </a>
@@ -37,10 +37,10 @@ exports[`Repo/Header Short Name smoke-test 1`] = `
 `;
 
 exports[`Repo/Header loading smoke-test 1`] = `
-<div class="bg-base-300 border-b border-accent-content">
+<div class="border-b border-accent-content bg-base-300">
   <div class="mx-auto lg:container">
     <div class="p-3">
-      <div class="h-6 skeleton w-28 bg-base-200">
+      <div class="skeleton h-6 w-28 bg-base-200">
       </div>
     </div>
   </div>
diff --git a/__snapshots__/repo-summary-card.test.js.snap b/__snapshots__/repo-summary-card.test.js.snap
index 14c812f..be17e8f 100644
--- a/__snapshots__/repo-summary-card.test.js.snap
+++ b/__snapshots__/repo-summary-card.test.js.snap
@@ -1,61 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Repo/Summary/Card Long Details smoke-test 1`] = `
-<div class="p-4 bg-base-200 my-2 rounded-lg">
+<div class="my-2 rounded-lg bg-base-200 p-4">
   <a class="link-primary break-words"
      href="/repo/"
   >
     Long Name that goes on and on and on and on a...
   </a>
-  <p class="text-sm text-muted break-words">
+  <p class="text-muted break-words text-sm">
     Lorem ipsum dolor sit amet, consectetur adipi...
   </p>
 </div>
 `;
 
 exports[`Repo/Summary/Card Long and No Spaces smoke-test 1`] = `
-<div class="p-4 bg-base-200 my-2 rounded-lg">
+<div class="my-2 rounded-lg bg-base-200 p-4">
   <a class="link-primary break-words"
      href="/repo/"
   >
     LongNameLongNameLongNameLongNameLongNameLongN...
   </a>
-  <p class="text-sm text-muted break-words">
+  <p class="text-muted break-words text-sm">
     LoremipsumLoremipsumLoremipsumLoremipsumLorem...
   </p>
 </div>
 `;
 
 exports[`Repo/Summary/Card No Details smoke-test 1`] = `
-<div class="p-4 bg-base-200 my-2 rounded-lg">
+<div class="my-2 rounded-lg bg-base-200 p-4">
   <a class="link-primary break-words"
      href="/repo/"
   >
     Untitled
   </a>
-  <p class="text-sm text-muted break-words">
+  <p class="text-muted break-words text-sm">
   </p>
 </div>
 `;
 
 exports[`Repo/Summary/Card Short Details smoke-test 1`] = `
-<div class="p-4 bg-base-200 my-2 rounded-lg">
+<div class="my-2 rounded-lg bg-base-200 p-4">
   <a class="link-primary break-words"
      href="/repo/"
   >
     Short Name
   </a>
-  <p class="text-sm text-muted break-words">
+  <p class="text-muted break-words text-sm">
     short description
   </p>
 </div>
 `;
 
 exports[`Repo/Summary/Card loading smoke-test 1`] = `
-<div class="p-4 bg-base-200 my-2 rounded-lg">
-  <div class="h-5 mb-2 skeleton w-40">
+<div class="my-2 rounded-lg bg-base-200 p-4">
+  <div class="skeleton mb-2 h-5 w-40">
   </div>
-  <div class="h-4 skeleton w-100">
+  <div class="w-100 skeleton h-4">
   </div>
 </div>
 `;
diff --git a/__snapshots__/repo-summary-list.test.js.snap b/__snapshots__/repo-summary-list.test.js.snap
index 5723972..f806a37 100644
--- a/__snapshots__/repo-summary-list.test.js.snap
+++ b/__snapshots__/repo-summary-list.test.js.snap
@@ -8,33 +8,33 @@ exports[`Repo/Summary/List Default smoke-test 1`] = `
     </h3>
   </div>
   <div class>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         Short Name
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         short description
       </p>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         Long Name that goes on and on and on and on a...
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         LongNameLongNameLongNameLongNameLongNameLongN...
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         LoremipsumLoremipsumLoremipsumLoremipsumLorem...
       </p>
     </div>
@@ -63,22 +63,22 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
     </h3>
   </div>
   <div class>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
-      <div class="h-5 mb-2 skeleton w-40">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
+      <div class="skeleton mb-2 h-5 w-40">
       </div>
-      <div class="h-4 skeleton w-100">
+      <div class="w-100 skeleton h-4">
       </div>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
-      <div class="h-5 mb-2 skeleton w-40">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
+      <div class="skeleton mb-2 h-5 w-40">
       </div>
-      <div class="h-4 skeleton w-100">
+      <div class="w-100 skeleton h-4">
       </div>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
-      <div class="h-5 mb-2 skeleton w-40">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
+      <div class="skeleton mb-2 h-5 w-40">
       </div>
-      <div class="h-4 skeleton w-100">
+      <div class="w-100 skeleton h-4">
       </div>
     </div>
   </div>
@@ -88,23 +88,23 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
 exports[`Repo/Summary/List No Title smoke-test 1`] = `
 <div class="min-width">
   <div class>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         Short Name
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         short description
       </p>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         Long Name that goes on and on and on and on a...
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
@@ -120,30 +120,30 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
     </h3>
   </div>
   <div class>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         Short Name
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         short description
       </p>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
       <a class="link-primary break-words"
          href="/repo/"
       >
         Long Name that goes on and on and on and on a...
       </a>
-      <p class="text-sm text-muted break-words">
+      <p class="text-muted break-words text-sm">
         Lorem ipsum dolor sit amet, consectetur adipi...
       </p>
     </div>
-    <div class="p-4 bg-base-200 my-2 rounded-lg">
-      <div class="h-5 mb-2 skeleton w-40">
+    <div class="my-2 rounded-lg bg-base-200 p-4">
+      <div class="skeleton mb-2 h-5 w-40">
       </div>
-      <div class="h-4 skeleton w-100">
+      <div class="w-100 skeleton h-4">
       </div>
     </div>
   </div>