feat: more changes and fixes

frontend/src/js/_htmx.js

@@ -38,7 +38,7 @@ htmx.defineExtension('htmx-download', {
                 const mimetype = headers['content-type'] || 'application/octet-stream';
 
                 // Create Blob
-                const blob = new Blob([xhr.response], {type: mimetype});
+                const blob = new Blob([xhr.response], { type: mimetype });
                 const url = URL.createObjectURL(blob);
 
                 // Trigger download

frontend/src/js/_tooltip.js

@@ -14,7 +14,8 @@ function initiateTooltips() {
     }
 
     tippy('[data-tippy-content]', {
-        theme: theme
+        theme: theme,
+        zIndex: 1050,
     });
 }
 

frontend/src/styles/_offcanvas.scss

@@ -5,7 +5,7 @@
 @use "sass:map";
 
 // Variables
-$offcanvas-z-index: 1045 !default;
+$offcanvas-z-index: 1090 !default;
 $offcanvas-backdrop-z-index: 1040 !default;
 $offcanvas-width: 400px !default;
 $offcanvas-height: 30vh !default;
@@ -67,8 +67,8 @@ $breakpoints: (
     --offcanvas-padding-y: #{$offcanvas-padding};
     --offcanvas-color: var(--color-base-content);
     --offcanvas-bg: var(--color-base-300);
-    --offcanvas-border-width: 1px;
-    --offcanvas-border-color: var(--color-base-300);
+    --offcanvas-border-width: var(--border);
+    --offcanvas-border-color: var(--color-base-100);
     --offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
     --offcanvas-transition: transform #{$offcanvas-transition-duration} ease-in-out;
     --offcanvas-title-line-height: 1.5;

frontend/src/styles/_transitions.scss

@@ -24,14 +24,14 @@ $transition-collapse-width: width 0.35s ease !default;
     }
 }
 
-// Collapse transitions
-.collapse {
+// // Collapse transitions
+.bs.collapse {
     &:not(.show) {
         display: none;
     }
 }
 
-.collapsing {
+.bs.collapsing {
     height: 0;
     overflow: hidden;
     transition: $transition-collapse;

frontend/src/styles/style.scss

@@ -78,4 +78,30 @@ select {
 
 div:where(.swal2-container) {
   z-index: 1100 !important;
+}
+
+.logo {
+  /* Set the background-color to DaisyUI CSS variable */
+  background-color: var(--color-primary);
+
+  /* Use SVG file as the mask */
+  mask-image: url('/static/img/logo-icon.svg');
+  -webkit-mask-image: url('/static/img/logo-icon.svg');
+
+  /* Set mask properties to size it correctly */
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+
+  /* Give the element a size */
+  width: 30px;
+  height: 30px;
+
+  &.mobile {
+    width: 40px;
+    height: 40px;
+  }
 }

frontend/src/styles/tailwind.css

@@ -96,7 +96,7 @@
         background-color: oklch(from var(--color-primary) l c h / 15%);
     }
 
-    
+
     .bg-root {
         background-color: var(--root-bg) !important;
     }
@@ -208,22 +208,9 @@
         @apply lg:ml-16 transition-all duration-100;
     }
 
-    .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) {
+    .sidebar-floating .sidebar-item span {
         /* 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,
@@ -280,8 +267,6 @@
         @apply text-wrap lg:text-nowrap ;
     }
 
-
-    /* --- STATE 2: Fixed (Permanently Expanded) --- */
     .sidebar-fixed {
         /* Sets the fixed, expanded width for the container */
         @apply lg:w-[17%] transition-all duration-100;