@necrolab/dashboard 0.5.23 → 0.5.25

package/index.html

@@ -14,6 +14,20 @@
         <meta name="description" content="Necro Lab - dashboard" />
         <meta name="darkreader-lock" />
         <meta name="color-scheme" content="dark" />
+        <meta name="supported-color-schemes" content="dark" />
+        <!-- Prevent Noir and other dark mode extensions from modifying the site -->
+        <meta name="noir" content="disabled" />
+        <meta name="nighteye" content="disabled" />
+        <style>
+            /* Lock color scheme to prevent iOS extensions from overriding */
+            :root {
+                color-scheme: dark only;
+                -webkit-color-scheme: dark;
+            }
+            html, body {
+                color-scheme: dark only !important;
+            }
+        </style>
         <title>Necro Lab - Dashboard</title>
         <!-- DNS prefetch for external resources -->
         <link rel="dns-prefetch" href="https://fonts.googleapis.com" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.23",
+    "version": "0.5.25",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",
@@ -9,7 +9,9 @@
         "expose": "node dev-server.js",
         "postinstall": "node postinstall.js",
         "preview": "vite preview",
-        "lint": "npx eslint src/ --fix"
+        "lint": "npx eslint src/ --fix",
+        "release": "npm version patch && npm i && npm publish",
+        "release:minor": "npm version minor && npm i && npm publish"
     },
     "dependencies": {
         "@msgpack/msgpack": "^3.0.0-beta2",

package/src/App.vue

@@ -18,8 +18,8 @@
                 <ReconnectIndicator :message="ui.spinnerMessage" />
             </div>
             <div v-else key="main-components" class="flex">
-                <Navbar v-if="layout == 'dashboard'" class="fixed" />
-                <div class="router-wrapper w-full">
+                <Navbar v-if="layout == 'dashboard'" ref="navbarRef" class="fixed" />
+                <div class="router-wrapper w-full" :style="routerWrapperStyle">
                     <router-view v-slot="{ Component, route }">
                         <transition name="page-transition" mode="out-in">
                             <component
@@ -36,7 +36,7 @@
 
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, computed } from "vue";
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
@@ -50,6 +50,8 @@ const ui = useUIStore();
 const { showSpinner: spinner } = storeToRefs(ui);
 const router = useRouter();
 const isLoading = ref(false);
+const navbarRef = ref(null);
+let navbarResizeObserver = null;
 
 // Initialize zoom prevention (all browsers)
 const { KEY_CODES } = useZoomPrevention();
@@ -78,6 +80,71 @@ document.onkeydown = function (evt) {
 if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
 const layout = computed(() => router.currentRoute.value.meta.layout);
+const routerWrapperStyle = computed(() => ({
+    paddingTop: layout.value === "dashboard" ? "var(--dashboard-navbar-height, 80px)" : "0px",
+    paddingLeft: "var(--safe-area-left, 0px)",
+    paddingRight: "var(--safe-area-right, 0px)",
+    paddingBottom: "var(--safe-area-bottom, 0px)"
+}));
+
+const updateNavbarHeight = () => {
+    if (layout.value !== "dashboard") {
+        document.documentElement.style.setProperty("--dashboard-navbar-height", "0px");
+        return;
+    }
+
+    const navbarElement = navbarRef.value?.$el;
+    if (!navbarElement) return;
+
+    const height = Math.ceil(navbarElement.getBoundingClientRect().height);
+    if (height > 0) {
+        document.documentElement.style.setProperty("--dashboard-navbar-height", `${height}px`);
+    }
+};
+
+const scheduleNavbarHeightUpdate = () => {
+    requestAnimationFrame(updateNavbarHeight);
+};
+
+const syncNavbarObserver = () => {
+    if (!navbarResizeObserver) return;
+
+    navbarResizeObserver.disconnect();
+    const navbarElement = navbarRef.value?.$el;
+    if (layout.value === "dashboard" && navbarElement) {
+        navbarResizeObserver.observe(navbarElement);
+    }
+};
+
+watch(
+    [layout, () => navbarRef.value?.$el],
+    () => {
+        nextTick(() => {
+            syncNavbarObserver();
+            scheduleNavbarHeightUpdate();
+        });
+    },
+    { immediate: true }
+);
+
+onMounted(() => {
+    scheduleNavbarHeightUpdate();
+    window.addEventListener("resize", scheduleNavbarHeightUpdate, { passive: true });
+    window.visualViewport?.addEventListener("resize", scheduleNavbarHeightUpdate);
+
+    if (typeof ResizeObserver !== "undefined") {
+        navbarResizeObserver = new ResizeObserver(scheduleNavbarHeightUpdate);
+        syncNavbarObserver();
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener("resize", scheduleNavbarHeightUpdate);
+    window.visualViewport?.removeEventListener("resize", scheduleNavbarHeightUpdate);
+    navbarResizeObserver?.disconnect();
+    navbarResizeObserver = null;
+    document.documentElement.style.setProperty("--dashboard-navbar-height", "0px");
+});
 </script>
 
 <style lang="scss">
@@ -148,7 +215,6 @@ const layout = computed(() => router.currentRoute.value.meta.layout);
 
 /* Router wrapper */
 .router-wrapper {
-    @apply pt-16 lg:pt-20;
     z-index: 0;
 }
 

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

@@ -5,14 +5,21 @@
 
 .page-header {
     @apply flex items-center justify-between;
-    padding-top: 1.5rem;
+    padding-top: 0.75rem;
     padding-bottom: 0.5rem;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
 
     .page-header-card {
         @apply flex items-center gap-2.5 rounded-lg;
         padding: 0.375rem 0.75rem;
         background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
         border: 1px solid var(--color-border-light);
+        flex: 0 1 auto;
+        min-width: 0;
+        max-width: 60%;
+        white-space: nowrap;
+        overflow: hidden;
 
         svg, img {
             width: 17px;
@@ -74,8 +81,6 @@
     }
 
     @screen sm {
-        padding-top: 1rem;
-
         .page-header-card {
             gap: 0.625rem;
             padding: 0.5rem 0.875rem;
@@ -111,9 +116,3 @@
         }
     }
 }
-
-@media (display-mode: standalone) {
-    .page-header {
-        padding-top: 3.5rem !important;
-    }
-}

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

@@ -11,6 +11,7 @@
     background: var(--color-bg-input);
     transition: all 0.15s ease;
     display: flex;
+    position: relative;
 
     .tag-toggle,
     .dropdown,
@@ -33,18 +34,65 @@
     .tag-toggle {
         padding: 0;
         border: 0 !important;
+        flex-shrink: 0 !important;
+        min-width: max-content !important;
     }
 
     .tag-toggle button {
         font-size: 0.875rem;
         padding: 0.5rem 0.75rem;
-        min-width: fit-content;
+        min-width: fit-content !important;
         border: 0 !important;
+        white-space: nowrap;
+        flex-shrink: 0 !important;
+    }
+
+    /* iPad - prevent TagToggle from being compressed */
+    @media (min-width: 768px) and (max-width: 1024px) {
+        .tag-toggle {
+            flex-shrink: 0 !important;
+            min-width: max-content !important;
+        }
+
+        .tag-toggle button {
+            padding: 0.375rem 0.5rem;
+            font-size: 0.75rem;
+            flex-shrink: 0 !important;
+        }
+
+        input {
+            flex: 0 1 auto;
+            min-width: 100px !important;
+        }
     }
 
     .dropdown {
         width: 120px !important;
         min-width: 120px !important;
+        overflow: visible !important;
+        position: static !important;
+
+        /* iPad responsive - ensure arrow is visible */
+        @media (min-width: 768px) and (max-width: 1024px) {
+            width: 140px !important;
+            min-width: 140px !important;
+            flex-shrink: 0;
+        }
+
+        /* Mobile - more flexible */
+        @media (max-width: 767px) {
+            width: auto !important;
+            min-width: 90px !important;
+            max-width: 110px !important;
+            flex-shrink: 1;
+        }
+    }
+
+    /* Ensure dropdown menu portal isn't clipped */
+    .dropdown-menu-portal,
+    .dropdown-content-portal {
+        overflow: visible !important;
+        z-index: 9999 !important;
     }
 
     .dropdown:not(.transparent):focus-within,

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

@@ -78,43 +78,22 @@
 /* Console main container with responsive heights */
 .console-main {
     @apply relative overflow-x-auto overflow-y-auto rounded border-2 border-dark-550 bg-dark-400 p-2 font-mono text-white;
-    height: calc(100vh - 20rem);
-    max-height: calc(100vh - 20rem);
     scroll-padding: 0.5rem;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     min-height: 12rem !important;
     touch-action: pan-y pan-up pan-down;
 
-    @screen md {
-        height: calc(100vh - 18rem);
-        max-height: calc(100vh - 18rem);
-    }
-
     @screen lg {
-        height: calc(100vh - 16rem);
-        max-height: calc(100vh - 16rem);
         padding: 1.25rem;
     }
 
     @screen mobile-portrait {
-        height: calc(100vh - 22rem);
-        max-height: calc(100vh - 22rem);
         overflow: auto;
         padding: 0.25rem;
         font-size: 0.75rem;
         line-height: 1rem;
     }
-
-    @media (orientation: landscape) and (max-width: 1023px) {
-        height: calc(100vh - 12rem);
-        max-height: calc(100vh - 12rem);
-    }
-
-    @media (max-width: 767px) and (orientation: landscape) {
-        height: auto;
-        max-height: 65vh;
-    }
 }
 
 /* FilterBuilder action button */

package/src/assets/css/main.scss

@@ -22,6 +22,13 @@
    BODY LAYOUT & BACKGROUND
    ========================================================================== */
 
+:root {
+    --safe-area-top: 0px;
+    --safe-area-right: 0px;
+    --safe-area-bottom: 0px;
+    --safe-area-left: 0px;
+}
+
 html {
     @apply bg-dark-300;
     min-height: 100vh;

package/src/components/Console/ConsoleToolbar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div class="mb-2 flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
             <div class="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
                 <div class="w-full md:w-64">
                     <Dropdown
@@ -79,7 +79,7 @@
                 </button>
             </div>
         </div>
-        <div class="mb-6 mt-4 flex justify-between md:hidden mobile-portrait:mb-16 mobile-portrait:mt-6">
+        <div class="mb-2 mt-2 flex justify-between gap-2 md:hidden">
             <button class="flex h-10 items-center justify-center gap-3 rounded border border-dark-650 bg-dark-400 px-2 shadow-sm">
                 <h3 class="text-sm text-white">Hide Monitors</h3>
                 <Switch class="scale-75" :model-value="filteredLogs" @update:model-value="$emit('update:filteredLogs', $event)" />

package/src/components/Editors/Account/Account.vue

@@ -30,7 +30,7 @@
             </h4>
         </div>
 
-        <div class="col-span-1 flex">
+        <div class="col-span-1 flex items-center justify-center">
             <ActionButtonGroup>
                 <li>
                     <button @click="edit">

package/src/components/Editors/AdminFileEditor.vue

@@ -2,18 +2,19 @@
     <div class="admin-editor-section" :class="{ 'landscape-hidden': isHidden }" v-if="!isHidden">
         <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
         <div class="flex items-center gap-2 w-full">
-            <div class="unified-search-group flex flex-1 dropdown-container z-dropdown-high lg:flex-initial lg:min-w-64">
-                <Dropdown
-                    class="admin-file-dropdown flex-1"
-                    default="Select a file"
-                    :onClick="loadFile"
-                    :options="availableFiles"
-                    :allowDefault="false"
-                    :includeAdjacentButtons="true"
-                    rightAmount="right-1" />
+            <div class="admin-file-selector flex-1 lg:flex-initial lg:w-64 dropdown-container z-dropdown-high">
+                <div class="relative min-w-0 flex-grow">
+                    <Dropdown
+                        class="admin-file-dropdown w-full"
+                        default="Select a file"
+                        :onClick="loadFile"
+                        :options="availableFiles"
+                        :allowDefault="false"
+                        :includeAdjacentButtons="true"
+                        rightAmount="right-1" />
+                </div>
                 <button
-                    class="refresh-button flex items-center justify-center w-9 h-10 flex-shrink-0 text-white bg-dark-400 hover:bg-dark-450"
-                    style="transition: all 0.2s ease"
+                    class="refresh-button"
                     @click="$emit('refresh-files')"
                     title="Refresh file list">
                     <ReloadIcon class="refresh-icon icon-md" />
@@ -180,6 +181,40 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.admin-file-selector {
+    @apply flex items-center overflow-hidden rounded-lg border-2 border-dark-550 bg-dark-500;
+    min-height: 40px;
+    transition: border-color 0.15s ease;
+}
+
+.admin-file-selector:hover {
+    @apply border-dark-650;
+}
+
+.admin-file-selector:focus-within {
+    border-color: var(--color-primary);
+    outline: 1px solid var(--color-primary);
+    outline-offset: 0;
+}
+
+:deep(.admin-file-dropdown.dropdown) {
+    @apply h-10 border-0 rounded-none bg-transparent shadow-none;
+    padding: 0 0.75rem !important;
+}
+
+:deep(.admin-file-dropdown .dropdown-display) {
+    padding: 0;
+}
+
+.refresh-button {
+    @apply flex h-10 w-10 flex-shrink-0 items-center justify-center border-l border-dark-550 bg-dark-400 text-white;
+    transition: all 0.2s ease;
+}
+
+.refresh-button:hover {
+    @apply border-dark-625 bg-dark-450;
+}
+
 .editor-action-btn {
     @apply flex items-center justify-center w-9 h-9 rounded border-2 border-dark-550 bg-dark-400 text-white;
     transition: all 0.2s ease;

package/src/components/Editors/Profile/CreateProfile.vue

@@ -8,8 +8,17 @@
 
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
+                <!-- Country chooser -->
+                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-4 md:col-span-2" noWrapper>
+                    <ProfileCountryChooser
+                        class="h-10"
+                        :value="formProfile.country"
+                        :onClick="chooseCountry"
+                        :disabled="true" />
+                </FormField>
+
                 <!-- Profile tag -->
-                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-12 md:col-span-4" noWrapper>
+                <FormField label="Profile Tag" :icon="TagIcon" z-index="0" class="col-span-8 md:col-span-4" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full`"
                         :default="ui.profile.tags[0]"
@@ -19,7 +28,7 @@
                 </FormField>
 
                 <!-- Card Number -->
-                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-8">
+                <FormField label="Card Number" :icon="CartIcon" :error="errors.includes('cardNumber')" z-index="0" class="col-span-12 md:col-span-6">
                     <input
                         ref="cardNumberInput"
                         placeholder="Enter card number"
@@ -30,15 +39,6 @@
                         @focus="formatCardNumberDisplay" />
                 </FormField>
 
-                <!-- Country chooser -->
-                <FormField label="Country" :icon="StadiumIcon" z-index="0" class="col-span-12 md:col-span-2" noWrapper>
-                    <ProfileCountryChooser
-                        class="h-10"
-                        :value="formProfile.country"
-                        :onClick="chooseCountry"
-                        :disabled="true" />
-                </FormField>
-
                 <!-- Exp Year -->
                 <FormField label="Expiry Year" :icon="TimerIcon" :error="errors.includes('expYear')" z-index="0" class="col-span-6 md:col-span-5" noWrapper>
                     <Dropdown

package/src/components/Editors/TagToggle.vue

@@ -1,8 +1,9 @@
 <template>
     <button
         @click="increase"
-        class="h-10 px-1 text-white bg-dark-500 relative overflow-hidden"
+        class="h-10 px-3 text-white bg-dark-500 relative overflow-hidden"
         :class="noBorder ? 'border-0' : 'border-2 border-dark-550'"
+        style="min-width: max-content;"
     >
         <span v-if="sortOptions[currentOpt % sortOptions.length] === 'Enabled'"
             ><img class="mx-auto" height="16px" width="14px" src="@/assets/img/square_check.svg"

package/src/components/Filter/Filter.vue

@@ -300,7 +300,7 @@ props.filterBuilder.onUpdate(() => {
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-colors duration-200;
+    @apply bg-dark-500 border border-dark-625/30 relative transition-colors duration-200;
 }
 
 .filter-card:hover:not(.expanded-filter) {