@necrolab/dashboard 0.5.13 → 0.5.15

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.13",
+    "version": "0.5.15",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && npx workbox-cli generateSW workbox-config.cjs && vite build",

package/src/assets/css/base/color-fallbacks.scss

@@ -0,0 +1,10 @@
+/* ==========================================================================
+   OKLCH COLOR FALLBACKS FOR CROSS-DEVICE CONSISTENCY
+   Note: iOS 26 Safari renders OKLCH in Display P3, causing color shifts
+   Currently no perfect fix - OKLCH support varies by device/gamut
+   ========================================================================== */
+
+/* Placeholder for future color space fixes */
+:root {
+    color-scheme: dark;
+}

package/src/assets/css/components/headers.scss

@@ -0,0 +1,127 @@
+/* ==========================================================================
+   PAGE HEADERS
+   Ultra-clean, consistent styling for all page headers
+   ========================================================================== */
+
+.page-header {
+    @apply flex items-center justify-between;
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+
+    /* Header card container */
+    .page-header-card {
+        @apply flex items-center gap-2.5 rounded-lg;
+        padding: 0.375rem 0.75rem;
+        background: linear-gradient(135deg, oklch(0.22 0 0) 0%, oklch(0.24 0 0) 100%);
+        border: 1px solid oklch(0.28 0 0);
+
+        /* Icon - static by default */
+        svg, img {
+            width: 17px;
+            height: 17px;
+            color: oklch(0.85 0 0);
+            flex-shrink: 0;
+        }
+
+        /* Clickable icon wrapper - only for Tasks page */
+        .icon-button {
+            @apply flex items-center justify-center rounded;
+            cursor: pointer;
+            margin: -0.125rem 0;
+            padding: 0.125rem;
+            transition: background 0.2s ease;
+
+            svg, img {
+                width: 17px;
+                height: 17px;
+                color: oklch(0.85 0 0);
+                transition: transform 0.4s ease, color 0.2s ease;
+            }
+
+            &:hover {
+                background: oklch(0.26 0 0);
+
+                svg, img {
+                    color: oklch(0.95 0 0);
+                    transform: rotate(90deg);
+                }
+            }
+
+            &:active {
+                background: oklch(0.20 0 0);
+
+                svg, img {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+
+        /* Title text */
+        h4 {
+            @apply font-semibold;
+            font-size: 1rem;
+            line-height: 1.2;
+            color: oklch(0.95 0 0);
+            letter-spacing: -0.01em;
+        }
+
+        /* Count badge - only for Tasks page */
+        .page-header-count {
+            @apply inline-flex items-center justify-center rounded px-1.5 py-0.5 ml-1.5;
+            font-size: 0.6875rem;
+            font-weight: 600;
+            min-width: 20px;
+            background: oklch(0.20 0 0);
+            border: 1px solid oklch(0.26 0 0);
+            color: oklch(0.70 0 0);
+            letter-spacing: 0.01em;
+        }
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 640px) {
+        padding-top: 1rem;
+
+        .page-header-card {
+            gap: 2.5;
+            padding: 0.5rem 0.875rem;
+
+            svg, img {
+                width: 18px;
+                height: 18px;
+            }
+
+            h4 {
+                font-size: 1rem;
+            }
+
+            .page-header-count {
+                font-size: 0.6875rem;
+                padding: 0.125rem 0.375rem;
+                min-width: 20px;
+                margin-left: 0.375rem;
+            }
+        }
+    }
+
+    /* Tablet responsive */
+    @media (min-width: 641px) and (max-width: 1024px) {
+        .page-header-card {
+            svg, img {
+                width: 19px;
+                height: 19px;
+            }
+
+            h4 {
+                font-size: 1.0625rem;
+            }
+        }
+    }
+}
+
+/* PWA mode adjustments */
+@media (display-mode: standalone) {
+    .page-header {
+        padding-top: 3.5rem !important;
+    }
+}

package/src/assets/css/components/search-groups.scss

@@ -22,6 +22,9 @@
         background: transparent !important;
         box-shadow: none !important;
         min-width: fit-content !important;
+        outline: none !important;
+        outline-width: 0 !important;
+        outline-offset: 0 !important;
     }
 
     .tag-toggle {

package/src/assets/css/main.scss

@@ -7,17 +7,25 @@
 @use "base/reset";
 @use "base/scroll";
 @use "base/typography";
+@use "base/color-fallbacks";
 @use "components/buttons";
 @use "components/forms";
 @use "components/toasts";
 @use "components/modals";
 @use "components/tables";
 @use "components/search-groups";
+@use "components/headers";
 
 /* ==========================================================================
    BODY LAYOUT & BACKGROUND
    ========================================================================== */
 
+html {
+    background-color: oklch(0.1822 0 0);
+    min-height: 100vh;
+    min-height: 100dvh;
+}
+
 body {
     background-color: oklch(0.1822 0 0);
     position: relative;

package/src/components/Table/Table.vue

@@ -5,20 +5,75 @@
 </template>
 <style lang="scss">
 .table-component {
-    @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
-    @apply overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y;
+    @apply relative box-border flex flex-col rounded-lg border border-dark-600 bg-dark-500 bg-clip-padding;
+    @apply overflow-x-auto overflow-y-auto;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     overscroll-behavior: auto;
-    max-height: calc(100vh - 200px);
+    max-height: calc(100vh - 300px);
     -webkit-overflow-scrolling: touch;
+    touch-action: pan-x pan-y;
+
+    /* iPad Pro and larger tablets - more space for UTILS */
+    @media (min-width: 768px) and (max-width: 1440px) {
+        max-height: calc(100vh - 400px);
+    }
+
+    /* iPad portrait - even more space needed */
+    @media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
+        max-height: calc(100vh - 450px);
+    }
+
+    /* PWA mode - account for status bar and home indicator */
+    @media (display-mode: standalone) {
+        max-height: calc(100vh - 420px);
+
+        @media (min-width: 768px) and (max-width: 1440px) {
+            max-height: calc(100vh - 480px);
+        }
+
+        /* iPad portrait PWA - maximum space for UTILS */
+        @media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
+            max-height: calc(100vh - 500px);
+        }
+    }
 }
 
-.table-component > .grid {
-    @apply bg-dark-400;
+.table-component > .grid:not(:first-child) {
     border-bottom: 1px solid oklch(0.26 0 0);
     // Only enforce min-width on desktop, allow mobile to fit screen
     @media (min-width: 768px) {
         min-width: 640px;
     }
 }
+
+/* Remove border from last row */
+.table-component > .grid:last-child {
+    border-bottom: none;
+}
+
+/* Odd rows (lighter) */
+.table-component > .grid:nth-child(odd) {
+    @apply bg-dark-300;
+}
+
+/* Even rows (darker) */
+.table-component > .grid:nth-child(even) {
+    @apply bg-dark-400;
+}
+
+/* First grid child (header) keeps its own background */
+.table-component > .grid:first-child {
+    border-bottom: 1px solid oklch(0.26 0 0);
+    @apply rounded-t-lg;
+    overflow: hidden;
+    @media (min-width: 768px) {
+        min-width: 640px;
+    }
+}
+
+/* Last row rounded bottom corners */
+.table-component > .grid:last-child {
+    @apply rounded-b-lg;
+    overflow: hidden;
+}
 </style>

package/src/components/Tasks/Utilities.vue

@@ -24,15 +24,17 @@ const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
 .utilities-wrapper {
+    margin-bottom: 2rem;
+
     // Add extra margin on mobile to prevent buttons from being cut off
     @media (max-width: 768px) {
         margin-top: 1rem;
-        margin-bottom: 1.5rem;
+        margin-bottom: 2.5rem;
     }
 }
 
 .utility-btn {
-    height: 50px;
+    height: 42px;
 
     @media (max-width: 768px) {
         height: 40px;

package/src/components/ui/InfoRow.vue

@@ -78,7 +78,8 @@ const handleCopy = () => {
 
 .info-value {
     @apply text-sm flex-1 text-light-300;
-    @apply break-words;
+    @apply break-words overflow-hidden;
+    min-width: 0; // Allow flex item to shrink below content size
 
     @media (max-width: 768px) {
         @apply text-[13px];
@@ -90,6 +91,7 @@ const handleCopy = () => {
     @apply w-8 h-8 rounded transition-all duration-150;
     @apply bg-transparent text-light-500 hover:text-light-300 hover:bg-dark-600;
     @apply flex-shrink-0;
+    @apply ml-2; // Ensure spacing from value
 
     &.copied {
         @apply text-accent-green;

package/src/components/ui/Modal.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex pt-14 scrollable overflow-y-auto" role="dialog" @touchmove.stop>
-        <div class="component-modal mb-8 mobile-portrait:mb-16" ref="target">
+    <div class="modal-mask fixed inset-0 z-modal bg-overlay-dark backdrop-blur-xs flex scrollable overflow-y-auto" role="dialog" @touchmove.stop>
+        <div class="component-modal" ref="target">
             <div class="modal-header">
                 <slot name="header" />
                 <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
@@ -24,30 +24,16 @@ const target = ref(null);
 
 // Store original body styles
 let originalOverflow = "";
-let originalPosition = "";
-let originalTop = "";
-let scrollY = 0;
 
 onMounted(() => {
-    // Lock body scroll
-    scrollY = window.scrollY;
+    // Lock body scroll - simple overflow approach
     originalOverflow = document.body.style.overflow;
-    originalPosition = document.body.style.position;
-    originalTop = document.body.style.top;
-
     document.body.style.overflow = "hidden";
-    document.body.style.position = "fixed";
-    document.body.style.top = `-${scrollY}px`;
-    document.body.style.width = "100%";
 });
 
 onUnmounted(() => {
     // Restore body scroll
-    document.body.style.overflow = originalOverflow;
-    document.body.style.position = originalPosition;
-    document.body.style.top = originalTop;
-    document.body.style.width = "";
-    window.scrollTo(0, scrollY);
+    document.body.style.overflow = originalOverflow || "";
 });
 
 onClickOutside(target, (event) => {
@@ -59,7 +45,7 @@ onClickOutside(target, (event) => {
     @apply w-screen duration-300 ease-in-out;
     align-items: flex-start;
     justify-content: center;
-    padding: 1rem;
+    padding: 2rem 1rem 4rem 1rem !important; /* More bottom padding for scrollable space */
     height: 100dvh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -89,17 +75,20 @@ onClickOutside(target, (event) => {
     }
 }
 
+/* Desktop - extra bottom padding for scrollable space */
+@media (min-width: 811px) {
+    .modal-mask {
+        padding: 2rem 1rem 6rem 1rem !important;
+    }
+}
+
 @media (max-width: 810px) {
     .modal-mask {
-        align-items: flex-start;
-        justify-content: center;
-        padding: 1rem;
-        padding-top: 3rem;
+        padding: 3rem 1rem !important; /* Mobile: more padding */
     }
 
     .component-modal {
         width: calc(100vw - 2rem);
-        margin-bottom: 3rem;
     }
 
     .modal-body {
@@ -109,10 +98,29 @@ onClickOutside(target, (event) => {
     }
 }
 
-/* iPhone portrait mode - extra spacing for create button */
+/* iPhone portrait mode - extra bottom spacing */
 @media (max-width: 480px) and (orientation: portrait) {
+    .modal-mask {
+        padding-bottom: 4rem !important;
+    }
+
     .component-modal {
         max-height: none;
     }
 }
+
+/* PWA mode - extra spacing for iPhone status bar and home indicator */
+@media (display-mode: standalone) {
+    .modal-mask {
+        padding-top: 3rem !important;
+        padding-bottom: 6rem !important;
+    }
+
+    @media (max-width: 810px) {
+        .modal-mask {
+            padding-top: 4rem !important;
+            padding-bottom: 5rem !important;
+        }
+    }
+}
 </style>

package/src/components/ui/controls/atomic/Dropdown.vue

@@ -13,19 +13,17 @@
                     class="dropdown-menu-portal scrollable"
                     :style="menuStyle"
                     @click.stop
-                    @wheel.stop
-                    @touchmove.stop>
+                    @wheel.stop>
                     <button
                         v-bind:key="f"
                         class="dropdown-item"
                         :class="i !== 0 ? 'border-t border-dark-650' : ''"
                         v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
-                        @mousedown.prevent.stop="chose(f)"
-                        @touchstart.prevent.stop="chose(f)">
+                        @click.prevent.stop="chose(f)">
+                        <CheckmarkIcon v-if="(f || props.default) === currentValue" class="mr-2 flex-shrink-0" />
                         <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
                             {{ f ? f : props.default }}
                         </span>
-                        <CheckmarkIcon v-if="(f || props.default) === currentValue" class="ml-2" />
                     </button>
                 </div>
             </transition>
@@ -68,11 +66,11 @@ const id = Math.random();
 const opened = computed(() => ui.currentDropdown === id);
 
 const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
-    maxHeight: 200,
+    maxHeight: Math.floor(window.innerHeight * 0.85), // 85% of viewport
     includeAdjacentButtons: props.includeAdjacentButtons,
     estimateHeight: () => {
         const optionsCount = !props.allowDefault ? props.options?.length || 0 : (props.options?.length || 0) + 1;
-        return Math.min(optionsCount * 44, 200);
+        return Math.min(optionsCount * 44, Math.floor(window.innerHeight * 0.85));
     }
 });
 
@@ -104,6 +102,39 @@ const toggleOpened = () => {
     } else {
         ui.setCurrentDropdown(id);
         updatePosition();
+        // Set all items to same width only if horizontal scrolling is needed
+        setTimeout(() => {
+            const portal = document.querySelector('.dropdown-menu-portal');
+            const items = portal?.querySelectorAll('.dropdown-item');
+            if (items && items.length > 0) {
+                let maxWidth = 0;
+                // Reset styles first to get accurate measurements
+                items.forEach(item => {
+                    item.style.width = '';
+                    item.style.minWidth = '';
+                });
+                portal.style.overflowX = '';
+
+                // Measure actual content width
+                items.forEach(item => {
+                    const contentWidth = item.scrollWidth;
+                    maxWidth = Math.max(maxWidth, contentWidth);
+                });
+
+                // Only enable horizontal scrolling if content is truly wider than the max allowed width
+                const maxAllowedWidth = Math.min(400, window.innerWidth * 0.9);
+                if (maxWidth > maxAllowedWidth) {
+                    // Enable horizontal scrolling for long items
+                    portal.style.overflowX = 'auto';
+                    items.forEach(item => {
+                        item.style.minWidth = maxWidth + 'px';
+                    });
+                } else {
+                    // Normal display - no horizontal scrolling needed
+                    portal.style.overflowX = 'hidden';
+                }
+            }
+        }, 50);
     }
 };
 
@@ -157,6 +188,7 @@ const chose = (f) => {
 
 .dropdown-value {
     @apply overflow-hidden truncate min-w-0 flex-1 mr-2 text-sm;
+    padding-right: 2rem; /* Extra space to prevent collision with arrow */
 }
 
 @media (min-width: 768px) {
@@ -177,17 +209,22 @@ const chose = (f) => {
 }
 
 .dropdown-menu-portal {
-    @apply rounded-xl shadow-2xl bg-dark-300 border border-dark-600 overflow-x-auto overflow-y-auto touch-pan-x touch-pan-y;
+    @apply rounded-xl shadow-2xl bg-dark-300 border border-dark-600;
     backdrop-filter: blur(12px);
     box-shadow: 0 20px 25px -5px oklch(0 0 0 / 0.4), 0 10px 10px -5px oklch(0 0 0 / 0.2),
         0 0 0 1px oklch(1 0 0 / 0.05);
+    overflow-x: hidden;
+    overflow-y: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
     scrollbar-width: thin;
     scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
     z-index: 1000;
     min-width: 200px;
-    max-width: 90vw;
+    max-width: min(400px, 90vw);
+    display: flex;
+    flex-direction: column;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {
@@ -209,11 +246,16 @@ const chose = (f) => {
 }
 
 .dropdown-item {
-    @apply cursor-pointer text-left w-full text-white transition-all duration-200 flex items-center justify-between;
+    @apply cursor-pointer text-left text-white transition-all duration-200;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     font-weight: 500;
     border-bottom: 1px solid rgba(61, 62, 68, 0.3);
+    display: flex !important;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+    flex-shrink: 0;
 }
 
 .dropdown-item:last-child {
@@ -221,7 +263,7 @@ const chose = (f) => {
 }
 
 .dropdown-item:hover {
-    @apply bg-dark-600;
+    background: oklch(0.2809 0 0) !important; /* Full width background */
     color: oklch(1 0 0);
 }
 
@@ -244,9 +286,10 @@ const chose = (f) => {
 }
 
 .dropdown-item-text {
-    @apply pr-2;
+    @apply pr-2 flex-1;
     white-space: nowrap;
-    overflow: visible;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .dropdown-item svg {

package/src/components/ui/controls/atomic/MultiDropdown.vue

@@ -18,8 +18,7 @@
                     class="dropdown-menu-portal multi scrollable"
                     :style="menuStyle"
                     @click.stop
-                    @wheel.stop
-                    @touchmove.stop>
+                    @wheel.stop>
                     <div class="option-list scrollable">
                         <button
                             v-for="(option, i) in props.options"
@@ -133,6 +132,33 @@ const toggleOpened = () => {
     } else {
         ui.setCurrentDropdown(id);
         updatePosition();
+        // Set all items to same width only if horizontal scrolling is needed
+        setTimeout(() => {
+            const portal = document.querySelector('.dropdown-menu-portal');
+            const items = portal?.querySelectorAll('.dropdown-item');
+            if (items && items.length > 0) {
+                let maxWidth = 0;
+                items.forEach(item => {
+                    item.style.width = 'max-content';
+                    maxWidth = Math.max(maxWidth, item.scrollWidth);
+                });
+
+                // Only set explicit widths if content is wider than container
+                if (maxWidth > portal.offsetWidth) {
+                    // Enable horizontal scrolling for long items
+                    portal.style.overflowX = 'auto';
+                    items.forEach(item => {
+                        item.style.width = maxWidth + 'px';
+                    });
+                } else {
+                    // Disable horizontal scrolling for short items
+                    portal.style.overflowX = 'hidden';
+                    items.forEach(item => {
+                        item.style.width = '100%';
+                    });
+                }
+            }
+        }, 50);
     }
 };
 

package/src/composables/useDropdownPosition.js

@@ -6,7 +6,7 @@ export function useDropdownPosition(dropdownRef, options = {}) {
         offset = { x: -1, y: 4 },
         zIndex = 50000,
         minWidth = null,
-        maxHeight = 160,
+        maxHeight = window.innerHeight * 0.8, // Use 80% of viewport height
         estimateHeight = null,
         includeAdjacentButtons = false,
         containerSelector = null
@@ -24,7 +24,7 @@ export function useDropdownPosition(dropdownRef, options = {}) {
             const menuHeight = estimateHeight ? estimateHeight() : maxHeight;
 
             // Calculate width including adjacent buttons if specified
-            let menuWidth = minWidth || rect.width + 2;
+            let menuWidth = minWidth || rect.width;
 
             if (includeAdjacentButtons) {
                 // Look for parent container with buttons

package/src/views/Accounts.vue

@@ -1,12 +1,9 @@
 <template>
     <div>
-        <div class="flex items-center justify-between pt-5 pb-2">
-            <div class="flex items-center justify-center gap-4">
-                <MailIcon class="cursor-pointer smooth-hover text-white" />
-                <h4 class="text-base font-semibold text-light-300">
-                    Accounts
-                    <span class="text-sm font-medium text-light-400 pl-1">{{ ui.getSelectedAccounts().length }}</span>
-                </h4>
+        <div class="page-header">
+            <div class="page-header-card">
+                <MailIcon />
+                <h4>Accounts</h4>
             </div>
             <ul class="mobile-icons">
                 <li>

package/src/views/Console.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="console-page">
-        <h4 class="mb-2 flex items-center gap-2 pt-5 text-sm font-bold text-white lg:mt-1">
-            Console
-            <ConsoleIcon />
-        </h4>
+        <div class="page-header" style="padding-bottom: 0.75rem;">
+            <div class="page-header-card">
+                <ConsoleIcon />
+                <h4>Console</h4>
+            </div>
+        </div>
 
         <div>
             <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">

package/src/views/Editor.vue

@@ -1,10 +1,12 @@
 <template>
     <div>
         <!-- Heading -->
-        <h4 class="text-white text-xl font-bold mb-5 pt-5 flex gap-2 items-center">
-            Editor
-            <img src="@/assets/img/pencil.svg" />
-        </h4>
+        <div class="page-header" style="padding-bottom: 1.25rem;">
+            <div class="page-header-card">
+                <img src="@/assets/img/pencil.svg" />
+                <h4>Editor</h4>
+            </div>
+        </div>
 
         <div class="bg-dark-400 border border-dark-650 rounded shadow-sm p-2">
             <!-- Admin Editor Section - Hidden when proxy editor is open -->