fix sidebar broken from upgrade

src/client/public/css/tailwind.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.10 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -71,7 +71,6 @@
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
-    --blur-sm: 8px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -334,24 +333,6 @@
   .col-span-3 {
     grid-column: span 3 / span 3;
   }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
   .-m-1\.5 {
     margin: calc(var(--spacing) * -1.5);
   }
@@ -376,6 +357,9 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .\!ms-auto {
+    margin-inline-start: auto !important;
+  }
   .ms-0\.5 {
     margin-inline-start: calc(var(--spacing) * 0.5);
   }
@@ -391,15 +375,12 @@
   .ms-auto {
     margin-inline-start: auto;
   }
-  .ms-auto\! {
+  .\!me-1\.5 {
-    margin-inline-start: auto !important;
+    margin-inline-end: calc(var(--spacing) * 1.5) !important;
   }
   .-me-0\.5 {
     margin-inline-end: calc(var(--spacing) * -0.5);
   }
-  .me-1\.5\! {
-    margin-inline-end: calc(var(--spacing) * 1.5) !important;
-  }
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
@@ -642,15 +623,18 @@
       padding-bottom: 0;
     }
   }
+  .\!flex {
+    display: flex !important;
+  }
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
-  .flex\! {
-    display: flex !important;
-  }
   .grid {
     display: grid;
   }
@@ -701,10 +685,6 @@
     width: calc(var(--spacing) * 16);
     height: calc(var(--spacing) * 16);
   }
-  .size-\[16px\] {
-    width: 16px;
-    height: 16px;
-  }
   .size-\[28px\] {
     width: 28px;
     height: 28px;
@@ -721,12 +701,12 @@
     width: 1px;
     height: 1px;
   }
+  .\!h-2\.5 {
+    height: calc(var(--spacing) * 2.5) !important;
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
-  .h-2\.5\! {
-    height: calc(var(--spacing) * 2.5) !important;
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -763,7 +743,7 @@
   .min-h-\[calc\(100\%-3\.5rem\)\] {
     min-height: calc(100% - 3.5rem);
   }
-  .w-2\.5\! {
+  .\!w-2\.5 {
     width: calc(var(--spacing) * 2.5) !important;
   }
   .w-4 {
@@ -918,12 +898,12 @@
   .items-center {
     align-items: center;
   }
+  .\!justify-between {
+    justify-content: space-between !important;
+  }
   .justify-between {
     justify-content: space-between;
   }
-  .justify-between\! {
-    justify-content: space-between !important;
-  }
   .justify-center {
     justify-content: center;
   }
@@ -1035,6 +1015,9 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
+  .\!rounded-sm {
+    border-radius: var(--radius-sm) !important;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -1053,9 +1036,6 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-xs\! {
-    border-radius: var(--radius-xs) !important;
-  }
   .rounded-t-lg {
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
@@ -1084,15 +1064,15 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .\!border-gray-200 {
+    border-color: var(--color-gray-200) !important;
+  }
   .border-current {
     border-color: currentColor;
   }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
-  .border-gray-200\! {
-    border-color: var(--color-gray-200) !important;
-  }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
@@ -1102,6 +1082,9 @@
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .\!bg-white {
+    background-color: var(--color-white) !important;
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -1135,9 +1118,6 @@
   .bg-white {
     background-color: var(--color-white);
   }
-  .bg-white\! {
-    background-color: var(--color-white) !important;
-  }
   .fill-black {
     fill: var(--color-black);
   }
@@ -1177,12 +1157,12 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .\!py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5) !important;
+  }
   .py-0 {
     padding-block: calc(var(--spacing) * 0);
   }
-  .py-0\.5\! {
-    padding-block: calc(var(--spacing) * 0.5) !important;
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1255,6 +1235,10 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .\!text-sm {
+    font-size: var(--text-sm) !important;
+    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1275,10 +1259,6 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-sm\! {
-    font-size: var(--text-sm) !important;
-    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
-  }
   .text-xl {
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
@@ -1290,6 +1270,10 @@
   .text-\[6rem\] {
     font-size: 6rem;
   }
+  .\!font-medium {
+    --tw-font-weight: var(--font-weight-medium) !important;
+    font-weight: var(--font-weight-medium) !important;
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -1298,10 +1282,6 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .font-medium\! {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium) !important;
-  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1377,24 +1357,17 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .outline-hidden {
+    --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
       outline: 2px solid transparent;
       outline-offset: 2px;
     }
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .blur-sm {
-    --tw-blur: blur(var(--blur-sm));
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1628,6 +1601,13 @@
       transition-timing-function: var(--ease-in-out);
     }
   }
+  .before\:content-\[\'\(\'\] {
+    &::before {
+      content: var(--tw-content);
+      --tw-content: '(';
+      content: var(--tw-content);
+    }
+  }
   .after\:content-\[\'\)\'\] {
     &::after {
       content: var(--tw-content);
@@ -1788,6 +1768,7 @@
   }
   .focus\:outline-hidden {
     &:focus {
+      --tw-outline-style: none;
       outline-style: none;
       @media (forced-colors: active) {
         outline: 2px solid transparent;
@@ -2032,6 +2013,11 @@
       border-width: 1px;
     }
   }
+  .dark\:\!border-neutral-700 {
+    &:where(.dark, .dark *) {
+      border-color: var(--color-neutral-700) !important;
+    }
+  }
   .dark\:border-neutral-600 {
     &:where(.dark, .dark *) {
       border-color: var(--color-neutral-600);
@@ -2052,6 +2038,11 @@
       border-color: var(--color-neutral-800);
     }
   }
+  .dark\:\!bg-neutral-800 {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-neutral-800) !important;
+    }
+  }
   .dark\:bg-blue-500 {
     &:where(.dark, .dark *) {
       background-color: var(--color-blue-500);
@@ -2072,11 +2063,6 @@
       background-color: var(--color-neutral-800);
     }
   }
-  .dark\:bg-neutral-800\! {
-    &:where(.dark, .dark *) {
-      background-color: var(--color-neutral-800) !important;
-    }
-  }
   .dark\:bg-neutral-900 {
     &:where(.dark, .dark *) {
       background-color: var(--color-neutral-900);
@@ -2364,14 +2350,14 @@
       opacity: 100%;
     }
   }
-  .hs-overlay-open\:translate-x-0 {
+  .hs-overlay-open\:\!translate-x-0 {
     &.open {
-      --tw-translate-x: calc(var(--spacing) * 0);
+      --tw-translate-x: calc(var(--spacing) * 0) !important;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
     }
     .open & {
-      --tw-translate-x: calc(var(--spacing) * 0);
+      --tw-translate-x: calc(var(--spacing) * 0) !important;
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+      translate: var(--tw-translate-x) var(--tw-translate-y) !important;
     }
   }
   .hs-overlay-open\:scale-100 {
@@ -2396,14 +2382,6 @@
       opacity: 100%;
     }
   }
-  .hs-selected\:block {
-    &.selected {
-      display: block;
-    }
-    .selected & {
-      display: block;
-    }
-  }
   .hs-selected\:bg-gray-100 {
     &.selected {
       background-color: var(--color-gray-100);
@@ -2682,6 +2660,7 @@
     opacity: 80%;
   }
   &:focus {
+    --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
       outline: 2px solid transparent;
@@ -2744,6 +2723,7 @@
     background-color: var(--color-gray-100);
   }
   &:focus {
+    --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
       outline: 2px solid transparent;
@@ -2782,6 +2762,7 @@
     color: var(--color-blue-600);
   }
   &:focus {
+    --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
       outline: 2px solid transparent;
@@ -2894,6 +2875,7 @@
     --tw-ring-color: var(--color-blue-500);
   }
   &:focus {
+    --tw-outline-style: none;
     outline-style: none;
     @media (forced-colors: active) {
       outline: 2px solid transparent;
@@ -2922,6 +2904,7 @@
   }
   &:where(.dark, .dark *) {
     &:focus {
+      --tw-outline-style: none;
       outline-style: none;
       @media (forced-colors: active) {
         outline: 2px solid transparent;
@@ -3068,11 +3051,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;

src/client/views/sidebar.ejs

@@ -10,7 +10,7 @@
 <!-- End Mobile Sidebar Controls -->
 
 <!-- Sidebar -->
-<aside id="layoutSidebarMain" class="sidebar-aside main-sidebar hs-overlay hs-overlay-open:translate-x-0" role="dialog" tabindex="-1">
+<aside id="layoutSidebarMain" class="sidebar-aside main-sidebar hs-overlay hs-overlay-open:!translate-x-0" role="dialog" tabindex="-1">
     <div class="sidebar-container">
         <!-- Sidebar Header -->
         <div class="sidebar-header">
@@ -102,7 +102,7 @@
 <!-- End Sidebar -->
 
 <!-- Guild Sidebar -->
-<aside id="layoutSidebarGuilds" class="sidebar-aside guild-sidebar hs-overlay hs-overlay-open:translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
+<aside id="layoutSidebarGuilds" class="sidebar-aside guild-sidebar hs-overlay hs-overlay-open:!translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
     <div class="sidebar-container">
         <!-- Guild Sidebar Header -->
         <div class="sidebar-header">