fixing a lot of alignment issues

static/css/main.css

@@ -36,6 +36,8 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -50,6 +52,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -313,6 +316,9 @@
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
+  .m-8 {
+    margin: calc(var(--spacing) * 8);
+  }
   .m-300 {
     margin: calc(var(--spacing) * 300);
   }
@@ -449,6 +455,10 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
@@ -661,6 +671,9 @@
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -744,6 +757,9 @@
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
+  .self-center {
+    align-self: center;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -770,6 +786,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -886,6 +905,9 @@
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
@@ -982,6 +1004,12 @@
   .align-text-bottom {
     vertical-align: text-bottom;
   }
+  .align-text-top {
+    vertical-align: text-top;
+  }
+  .align-top {
+    vertical-align: top;
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -1005,6 +1033,10 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -1285,6 +1317,11 @@
       border-width: 0px;
     }
   }
+  .file\:bg-gray-500 {
+    &::file-selector-button {
+      background-color: var(--color-gray-500);
+    }
+  }
   .file\:bg-neutral-500 {
     &::file-selector-button {
       background-color: var(--color-neutral-500);
@@ -1312,6 +1349,11 @@
       font-weight: var(--font-weight-semibold);
     }
   }
+  .file\:text-gray-100 {
+    &::file-selector-button {
+      color: var(--color-gray-100);
+    }
+  }
   .file\:text-neutral-100 {
     &::file-selector-button {
       color: var(--color-neutral-100);
@@ -1364,6 +1406,13 @@
       }
     }
   }
+  .hover\:bg-blue-900 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-900);
+      }
+    }
+  }
   .hover\:bg-gray-200 {
     &:hover {
       @media (hover: hover) {
@@ -1466,6 +1515,24 @@
       }
     }
   }
+  .hover\:file\:bg-blue-300 {
+    &:hover {
+      @media (hover: hover) {
+        &::file-selector-button {
+          background-color: var(--color-blue-300);
+        }
+      }
+    }
+  }
+  .hover\:file\:text-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        &::file-selector-button {
+          color: var(--color-blue-500);
+        }
+      }
+    }
+  }
   .hover\:file\:ring-2 {
     &:hover {
       @media (hover: hover) {
@@ -1476,6 +1543,15 @@
       }
     }
   }
+  .hover\:file\:ring-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        &::file-selector-button {
+          --tw-ring-color: var(--color-blue-500);
+        }
+      }
+    }
+  }
   .hover\:file\:ring-offset-2 {
     &:hover {
       @media (hover: hover) {
@@ -1495,6 +1571,11 @@
       }
     }
   }
+  .focus\:bg-blue-900 {
+    &:focus {
+      background-color: var(--color-blue-900);
+    }
+  }
   .focus\:ring {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1512,6 +1593,11 @@
       --tw-ring-color: var(--color-blue-500);
     }
   }
+  .focus\:ring-blue-700 {
+    &:focus {
+      --tw-ring-color: var(--color-blue-700);
+    }
+  }
   .focus\:ring-white {
     &:focus {
       --tw-ring-color: var(--color-white);
@@ -1643,6 +1729,11 @@
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
   }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .sm\:flex-col {
     @media (width >= 40rem) {
       flex-direction: column;
@@ -1739,6 +1830,16 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .md\:grid-cols-5 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
@@ -1822,11 +1923,21 @@
       flex-basis: 100%;
     }
   }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .lg\:grid-cols-5 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);