feat: oh look, more changes

frontend/src/js/_tooltip.js

@@ -1,4 +1,4 @@
-import tippy from 'tippy.js';
+import { delegate } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light-border.css';
 
@@ -13,10 +13,15 @@ function initiateTooltips() {
         theme = 'dark';
     }
 
-    tippy('[data-tippy-content]', {
+    delegate(document.body, {
+        target: '[data-tippy-content]',
         theme: theme,
-        zIndex: 1050,
+        zIndex: 1100,
+        content(reference) {
+            return reference.getAttribute('data-tippy-content');
+        },
     });
 }
 
-window.initiateTooltips = initiateTooltips;
+// Call it once on page load
+initiateTooltips();

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: 0.5rem !default;
+$offcanvas-padding: 1rem !default;
 $offcanvas-transition-duration: 0.3s !default;
 $offcanvas-backdrop-opacity: 0.5 !default;
 
@@ -66,7 +66,7 @@ $breakpoints: (
     --offcanvas-padding-x: #{$offcanvas-padding};
     --offcanvas-padding-y: #{$offcanvas-padding};
     --offcanvas-color: var(--color-base-content);
-    --offcanvas-bg: var(--color-base-300);
+    --offcanvas-bg: var(--root-bg);
     --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);
@@ -323,4 +323,4 @@ $breakpoints: (
 
 .offcanvas-size-sm {
     --offcanvas-width: min(95vw, 250px);
-}
+}

frontend/src/styles/tailwind.css

@@ -148,7 +148,7 @@
 
     /* Card Data Display Styles */
     .card-data-section {
-        @apply space-y-1;
+        @apply space-y-2;
     }
 
     .card-data-row {
@@ -176,6 +176,20 @@
 
 
 @layer components {
+    .card {
+        @apply bg-base-100;
+    }
+
+    .card .card-header {
+        @apply bg-base-200;
+        @apply p-2;
+    }
+
+    .card .card-footer {
+        @apply bg-base-200;
+        @apply p-2;
+    }
+
     .fab {
         @layer daisyui.component {
             > :nth-child(n+7) {