diff --git a/src/components/DeprecatedIcon.astro b/src/components/DeprecatedIcon.astro
index d8e01717d..0ad18cee3 100644
--- a/src/components/DeprecatedIcon.astro
+++ b/src/components/DeprecatedIcon.astro
@@ -10,7 +10,7 @@ import { Icon } from "@astrojs/starlight/components";
       <Icon name="warning" />
     </div>
   </span>
-  <span class="group-hover:block hidden">
+  <span class="hidden group-hover:block">
     <b>[DEPRECATED]</b>
   </span>
 </span>
diff --git a/src/components/Modal.astro b/src/components/Modal.astro
index d36c25105..7deeffd59 100644
--- a/src/components/Modal.astro
+++ b/src/components/Modal.astro
@@ -14,7 +14,7 @@ const modalId = `modal-${Math.random().toString(36).slice(2)}`;
 <div>
   <label
     for={modalId}
-    class="cursor-pointer bg-accent-600 dark:bg-accent-200 text-white dark:text-gray-900 px-4 py-2 rounded-lg flex items-center justify-center"
+    class="flex items-center justify-center px-4 py-2 text-white rounded-lg cursor-pointer bg-accent-600 dark:bg-accent-200 dark:text-gray-900"
   >
     <b>{button}</b>
     <Icon name={icon} class="w-6 h-6" />
@@ -25,7 +25,7 @@ const modalId = `modal-${Math.random().toString(36).slice(2)}`;
   <input
     type="checkbox"
     id={modalId}
-    class="peer fixed appearance-none opacity-0"
+    class="fixed opacity-0 appearance-none peer"
   />
 
   <label
@@ -33,9 +33,9 @@ const modalId = `modal-${Math.random().toString(36).slice(2)}`;
     class="pointer-events-none invisible fixed inset-0 flex cursor-pointer items-center justify-center overflow-hidden overscroll-contain backdrop-blur-md bg-gray-800/90 opacity-0 transition-all duration-200 ease-in-out peer-checked:pointer-events-auto peer-checked:visible peer-checked:opacity-100 peer-checked:[&>*]:translate-y-0 peer-checked:[&>*]:scale-100 z-50"
   >
     <div
-      class="bg-white dark:bg-gray-900 border dark:border-gray-700 border-gray-300 p-4 shadow-lg w-5/6 transform -translate-y-4 scale-95 transition-all duration-200 ease-in-out"
+      class="w-5/6 p-4 bg-white border border-gray-300 shadow-lg dark:bg-gray-900 dark:border-gray-700 transform -translate-y-4 scale-95 transition-all duration-200 ease-in-out"
     >
-      <h2 class="text-xl font-bold mb-4">{title}</h2>
+      <h2 class="mb-4 text-xl font-bold">{title}</h2>
       <slot />
     </div>
   </label>
diff --git a/src/components/PluginCard.astro b/src/components/PluginCard.astro
index d1f476ef6..9a32fb04d 100644
--- a/src/components/PluginCard.astro
+++ b/src/components/PluginCard.astro
@@ -19,7 +19,7 @@ const deprecated = plugin.description.includes("[DEPRECATED]");
 <div
   class="relative p-4 border border-gray-300 dark:border-gray-700 not-content"
 >
-  <div class="flex justify-between items-center mb-4">
+  <div class="flex items-center justify-between mb-4">
     <h3>{plugin.name}</h3>
     {deprecated && <DeprecatedIcon />}
   </div>
diff --git a/src/components/SponsorCard.astro b/src/components/SponsorCard.astro
index 84b018e13..d471b1b2f 100644
--- a/src/components/SponsorCard.astro
+++ b/src/components/SponsorCard.astro
@@ -14,22 +14,22 @@ const {
 ---
 
 <a
-  class="relative p-4 border border-gray-300 dark:border-gray-700 flex items-center flex-col not-content text-inherit no-underline hover:bg-gray-200 dark:hover:bg-gray-800"
+  class="relative flex flex-col items-center p-4 no-underline border border-gray-300 dark:border-gray-700 not-content text-inherit hover:bg-gray-200 dark:hover:bg-gray-800"
   href={`https://opencollective.com/${collectiveSlug}`}
 >
-  <div class="flex items-center flex-col text-center">
+  <div class="flex flex-col items-center text-center">
     <img class="w-16 h-16 rounded-full" src={image} alt={name} />
     {
       isAdmin && (
-        <div class="px-2 py-1 mt-2 text-xs font-semibold bg-accent-600 dark:bg-accent-200 text-white dark:text-gray-900 rounded-full">
+        <div class="px-2 py-1 mt-2 text-xs font-semibold text-white rounded-full bg-accent-600 dark:bg-accent-200 dark:text-gray-900">
           Admin
         </div>
       )
     }
     <p class="font-semibold">{name}</p>
   </div>
-  <p class="text-sm text-center mb-8">{publicMessage}</p>
-  <p class="font-semibold text-center absolute bottom-2">
+  <p class="mb-8 text-sm text-center">{publicMessage}</p>
+  <p class="absolute font-semibold text-center bottom-2">
     ${totalAmountDonated / 100}
   </p>
 </a>
diff --git a/src/overrides/Sidebar.astro b/src/overrides/Sidebar.astro
index 52d94ae89..f179d0f2e 100644
--- a/src/overrides/Sidebar.astro
+++ b/src/overrides/Sidebar.astro
@@ -64,8 +64,7 @@ const sidebarConfig: [string, boolean, Props][] = Astro.props.sidebar.map(
     cursor: pointer;
     user-select: none;
     margin-bottom: var(--sl-nav-pad-y);
-    width: 100%;
-    height: 2rem;
+    min-height: fit-content;
   }
 
   .__collapse > input::after {
diff --git a/src/overrides/SiteTitle.astro b/src/overrides/SiteTitle.astro
index 2173bc772..23adda772 100644
--- a/src/overrides/SiteTitle.astro
+++ b/src/overrides/SiteTitle.astro
@@ -43,11 +43,11 @@ const links: Link[] = [
       </select>
       <Icon
         name="down-caret"
-        class="h-6 w-6 pointer-events-none end-0 absolute top-1/2 -translate-y-1/2"
+        class="absolute w-6 h-6 pointer-events-none end-0 top-1/2 -translate-y-1/2"
       />
     </label>
   </starlight-select>
-  <nav class="hidden md:flex items-center gap-4 ps-4">
+  <nav class="items-center hidden md:flex gap-4 ps-4">
     {
       links.map((link) => (
         <a