feat: another batch of fixes

frontend/src/select.js

@@ -9,7 +9,6 @@ window.TomSelect = function createDynamicTomSelect(element) {
     const config = {
         plugins: {},
         maxOptions: null,
-        dropdownParent: 'body',
 
         // Extract 'create' option from data attribute
         create: element.dataset.create === 'true',
@@ -25,8 +24,12 @@ window.TomSelect = function createDynamicTomSelect(element) {
         },
 
         onInitialize: function () {
+            // Move dropdown to body to escape stacking context issues
+            document.body.appendChild(this.dropdown);
+
             this.popper = Popper.createPopper(this.control, this.dropdown, {
                 placement: "bottom-start",
+                strategy: "fixed",
                 modifiers: [
                     {
                         name: "sameWidth",
@@ -43,6 +46,13 @@ window.TomSelect = function createDynamicTomSelect(element) {
                             fallbackPlacements: ['top-start'],
                         },
                     },
+                    {
+                        name: 'preventOverflow',
+                        options: {
+                            boundary: 'viewport',
+                            padding: 8,
+                        },
+                    },
                 ]
 
             });
@@ -50,6 +60,9 @@ window.TomSelect = function createDynamicTomSelect(element) {
         },
         onDropdownOpen: function () {
             this.popper.update();
+        },
+        onDropdownClose: function () {
+            // Optional: move back to wrapper to keep DOM clean, but not necessary
         }
     };
 

frontend/src/styles/_tom-select.scss

@@ -195,12 +195,12 @@
 
     /* Dropdown */
     .ts-dropdown {
-        position: absolute;
-        top: 100%;
+        position: fixed;
+        top: 0;
         left: 0;
-        width: 100%;
+        width: auto;
         z-index: 1100;
-        margin: 0.25rem 0 0;
+        margin: 0;
 
         /* DaisyUI dropdown styling */
         background-color: var(--color-base-100);

frontend/src/styles/tailwind.css

@@ -119,7 +119,7 @@
 @layer components {
     /* === Sidebar styles === */
     .sidebar-active {
-        @apply text-primary-content bg-primary;
+        @apply text-primary-content bg-primary rounded-box;
     }
 
     .sidebar-item:not(.sidebar-active) {
@@ -145,9 +145,28 @@
         @apply lg:ml-16 transition-all duration-100;
     }
 
-    .sidebar-floating .sidebar-item span {
+    .sidebar-floating .sidebar-item {
+        /* Maintains consistent height when collapsed */
+        @apply lg:min-h-[2.3rem];
+    }
+
+    .sidebar-floating .sidebar-item i {
+        /* Centers icon when collapsed by adding auto margins */
+        @apply lg:mx-auto lg:group-hover:mx-0;
+    }
+
+    .sidebar-floating .sidebar-item span,
+    .sidebar-floating .sidebar-item i:not(:first-child) {
         /* Hides the text labels and reveals them only on hover */
         @apply lg:invisible lg:group-hover:visible;
+        /* Position absolute to remove from layout when invisible */
+        @apply lg:absolute lg:group-hover:static;
+    }
+
+    .htmx-swapping .sidebar-floating,
+    .htmx-settling .sidebar-floating {
+        pointer-events: none;
+        @apply lg:w-16!;
     }
 
     .sidebar-floating .sidebar-invisible {