feat: more changes and fixes

frontend/src/js/select.js

@@ -23,10 +23,11 @@ window.TomSelect = function createDynamicTomSelect(element) {
             },
         },
 
-        onInitialize: function () {
+        onDropdownOpen: 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",
@@ -58,11 +59,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
+            this.popper.destroy();
+            this.dropdown.remove();
         }
     };
 

frontend/src/styles/_animations.scss

@@ -81,15 +81,14 @@
   position: relative;
   top: 0;
   min-height: 100px;
-  overflow: hidden;
 
   &::before {
     content: "";
     position: absolute;
-    top: -10px;
-    left: -10px;
-    right: -10px;
-    bottom: -10px;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     backdrop-filter: blur(4px);
     z-index: 100;
     animation: fade-in 0.1s ease-in forwards;
@@ -110,7 +109,7 @@
     animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
     animation-delay: 200ms;
     opacity: 0;
-    z-index: 9999;
+    z-index: 101;
   }
 }
 

frontend/src/styles/_offcanvas.scss

@@ -9,7 +9,7 @@ $offcanvas-z-index: 1090 !default;
 $offcanvas-backdrop-z-index: 1040 !default;
 $offcanvas-width: 400px !default;
 $offcanvas-height: 30vh !default;
-$offcanvas-padding: 1rem !default;
+$offcanvas-padding: 0.5rem !default;
 $offcanvas-transition-duration: 0.3s !default;
 $offcanvas-backdrop-opacity: 0.5 !default;
 

frontend/src/styles/tailwind.css

@@ -168,6 +168,10 @@
         @apply text-base-content/60; /* .hr */
         @apply my-3;
     }
+
+    .table-col-auto {
+        @apply w-1;
+    }
 }
 
 
@@ -244,19 +248,31 @@
     }
 
     .sidebar-submenu-header {
-        @apply flex;
+        @apply flex justify-between;
+    }
+
+    .sidebar-submenu-title {
+        @apply flex items-center;
     }
 
     .sidebar-floating .sidebar-submenu-header {
-        @apply lg:hidden lg:group-hover:flex;
+        @apply lg:justify-center lg:group-hover:justify-between;
     }
 
-    .sidebar-floating .sidebar-submenu-header h5 {
-        @apply lg:invisible lg:group-hover:visible;
+    .sidebar-floating .sidebar-submenu-title {
+        @apply lg:h-8;
+    }
+
+    .sidebar-floating .sidebar-submenu-title i {
+        @apply lg:me-0 lg:group-hover:me-2;
+    }
+
+    .sidebar-floating .sidebar-submenu-title h5 {
+        @apply lg:invisible lg:w-0 lg:h-0 lg:overflow-hidden lg:group-hover:visible lg:group-hover:w-auto lg:group-hover:h-auto;
     }
 
     .sidebar-floating .sidebar-submenu-header button {
-        @apply lg:hidden lg:group-hover:inline;
+        @apply lg:hidden! lg:group-hover:flex!;
     }
 
     .sidebar-floating .list-unstyled {
@@ -267,6 +283,10 @@
         @apply text-wrap lg:text-nowrap ;
     }
 
+    .sidebar-floating .sidebar-item-list {
+        @apply overflow-y-auto lg:overflow-y-hidden lg:group-hover:overflow-y-auto overflow-x-hidden;
+    }
+
     .sidebar-fixed {
         /* Sets the fixed, expanded width for the container */
         @apply lg:w-[17%] transition-all duration-100;
@@ -277,6 +297,10 @@
         @apply lg:w-[17%] transition-all duration-100;
     }
 
+    .sidebar-fixed .sidebar-item-list {
+        @apply overflow-y-auto overflow-x-hidden;
+    }
+
     .sidebar-fixed + main {
         /* Adjusts the main content margin to account for the expanded sidebar */
         @apply lg:ml-[17%] transition-all duration-100;
@@ -314,7 +338,19 @@
 
     .sidebar-fixed .sidebar-submenu-header {
         /* Ensures menu headers are always visible */
-        @apply lg:flex;
+        @apply lg:flex lg:justify-between;
+    }
+
+    .sidebar-fixed .sidebar-submenu-title i {
+        @apply me-2!;
+    }
+
+    .sidebar-fixed .sidebar-submenu-title h5 {
+        @apply lg:block;
+    }
+
+    .sidebar-fixed .sidebar-submenu-header button {
+        @apply lg:inline;
     }
 
     .sidebar-fixed .list-unstyled  {