@necrolab/dashboard 0.5.12 → 0.5.14

package/src/views/Editor.vue

@@ -10,7 +10,7 @@
             <!-- Admin Editor Section - Hidden when proxy editor is open -->
             <div v-if="ui.profile.admin" class="admin-editor-section" :class="{ 'landscape-hidden': currentProxyList }">
                 <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
-                <div class="flex-responsive-wrap editor-controls-row">
+                <div class="flex flex-wrap items-center gap-3 w-full">
                     <div class="w-full lg:w-64 flex flex-shrink-0 dropdown-container z-dropdown-high">
                         <div class="relative flex-grow">
                             <Dropdown
@@ -30,11 +30,9 @@
                         </button>
                     </div>
                     <!-- Admin editor buttons moved here -->
-                    <div
-                        v-if="textEditorVisible"
-                        class="flex flex-wrap gap-responsive justify-center lg:justify-end editor-buttons-responsive">
+                    <div v-if="textEditorVisible" class="flex gap-1.5 ml-auto">
                         <button
-                            class="btn-action flex-shrink-0"
+                            class="button-default bg-dark-400"
                             @click="format()"
                             v-if="isJsonFile()"
                             title="Format JSON">
@@ -53,9 +51,8 @@
                                 <path d="M21 14H3" />
                                 <path d="M21 18H7" />
                             </svg>
-                            <span class="hidden sm:inline">Format</span>
                         </button>
-                        <button class="btn-action flex-shrink-0" @click="saveAll" title="Save File">
+                        <button class="button-default bg-dark-400" @click="saveAll" title="Save File">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="16"
@@ -70,9 +67,8 @@
                                 <polyline points="17 21 17 13 7 13 7 21" />
                                 <polyline points="7 3 7 8 15 8" />
                             </svg>
-                            <span class="hidden sm:inline">Save File</span>
                         </button>
-                        <button class="btn-action flex-shrink-0" @click="closeFile" title="Close File">
+                        <button class="button-default bg-dark-400" @click="closeFile" title="Close File">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="16"
@@ -86,7 +82,6 @@
                                 <line x1="18" y1="6" x2="6" y2="18"></line>
                                 <line x1="6" y1="6" x2="18" y2="18"></line>
                             </svg>
-                            <span class="hidden sm:inline">Close File</span>
                         </button>
                     </div>
                 </div>
@@ -139,7 +134,7 @@
             <!-- Proxy Editor Section - Hidden when admin editor is open -->
             <div class="proxy-editor-section" :class="{ 'landscape-hidden': textEditorVisible }">
                 <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
-                <div class="flex-responsive-wrap proxy-controls-row mb-1">
+                <div class="flex flex-wrap items-center gap-3 w-full mb-1">
                     <div class="w-full lg:w-64 flex flex-shrink-0 dropdown-container z-dropdown">
                         <div class="relative flex-grow">
                             <Dropdown
@@ -153,10 +148,8 @@
                         </div>
                     </div>
                     <!-- Proxy save button moved here -->
-                    <div
-                        v-if="currentProxyList"
-                        class="flex flex-wrap gap-responsive justify-center lg:justify-end editor-buttons-responsive">
-                        <button class="btn-action flex-shrink-0" @click="saveProxies" title="Save Proxies">
+                    <div v-if="currentProxyList" class="flex gap-1.5 ml-auto">
+                        <button class="button-default bg-dark-400" @click="saveProxies" title="Save Proxies">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="16"
@@ -171,9 +164,8 @@
                                 <polyline points="17 21 17 13 7 13 7 21" />
                                 <polyline points="7 3 7 8 15 8" />
                             </svg>
-                            <span class="hidden sm:inline">Save Proxies</span>
                         </button>
-                        <button class="btn-action flex-shrink-0" @click="closeProxyFile" title="Close File">
+                        <button class="button-default bg-dark-400" @click="closeProxyFile" title="Close File">
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
                                 width="16"
@@ -187,7 +179,6 @@
                                 <line x1="18" y1="6" x2="6" y2="18"></line>
                                 <line x1="6" y1="6" x2="18" y2="18"></line>
                             </svg>
-                            <span class="hidden sm:inline">Close File</span>
                         </button>
                     </div>
                 </div>
@@ -599,27 +590,10 @@ loadProxyLists();
     z-index: 150;
 }
 
-/* ==========================================================================
-   CARD CONTAINER RESPONSIVENESS
-   Component-scoped definition (not global utility)
-   ========================================================================== */
-
-.card-dark {
-    max-height: calc(100vh - 100px) !important;
-    overflow-y: auto !important;
-    -webkit-overflow-scrolling: touch !important;
-    margin-bottom: 0.5rem !important;
-    padding-bottom: 0.5rem !important;
-}
-
 /* ==========================================================================
    ADMIN EDITOR SECTION CONDITIONAL VISIBILITY
    ========================================================================== */
 
-.admin-editor-section {
-    /* Default: always visible */
-}
-
 /* Hide admin editor when proxy editor is open - ALL SCREEN SIZES */
 .admin-editor-section.landscape-hidden {
     display: none !important;
@@ -629,30 +603,15 @@ loadProxyLists();
    PROXY EDITOR SECTION CONDITIONAL VISIBILITY
    ========================================================================== */
 
-.proxy-editor-section {
-    /* Default: always visible */
-}
-
 /* Hide proxy editor when admin editor is open - ALL SCREEN SIZES */
 .proxy-editor-section.landscape-hidden {
     display: none !important;
 }
 
-/* Ensure card has proper bottom margin when sections are hidden */
-.proxy-editor-section.landscape-hidden ~ .card-dark,
-.admin-editor-section.landscape-hidden ~ .card-dark {
-    margin-bottom: 1rem !important;
-}
-
 /* ==========================================================================
    SECTION HEADERS
    ========================================================================== */
 
-.admin-editor-section h5,
-.proxy-editor-section h5 {
-    /* Remove the gradient underline styling */
-}
-
 /* ==========================================================================
    ADMIN FILE DROPDOWN STYLING
    ========================================================================== */
@@ -758,7 +717,6 @@ loadProxyLists();
     color: transparent !important;
     z-index: 2;
     position: relative;
-    background-color: transparent;
     caret-color: #ffffff; /* Keep cursor visible */
 
     /* Selection styling */
@@ -769,7 +727,6 @@ loadProxyLists();
 
 .proxy-editor {
     @apply w-full h-full resize-none focus:outline-none;
-    background-color: transparent;
     color: oklch(0.90 0 0); /* Keep normal text color for proxy editor */
     /* Ensure proxy editor takes full height */
     flex: 1;
@@ -960,21 +917,6 @@ pre[class*="language-"] {
     word-break: break-word;
 }
 
-/* ==========================================================================
-   CONSOLE STYLES
-   ========================================================================== */
-
-.console {
-    @apply bg-dark-400 p-7 rounded relative border-dark-550 border-2;
-
-    textarea {
-        background: transparent;
-        resize: none;
-        height: calc(100vh - 450px);
-        @apply w-full focus:outline-none text-xs text-white;
-    }
-}
-
 /* ==========================================================================
    SECTION DIVIDER
    ========================================================================== */
@@ -1001,21 +943,12 @@ pre[class*="language-"] {
     @apply flex flex-wrap items-center gap-4;
 }
 
+
 /* ==========================================================================
    MOBILE RESPONSIVE STYLES (max-width: 767px)
    ========================================================================== */
 
 @media (max-width: 767px) {
-    /* Card container - increased height to use more available space */
-    .card-dark {
-        max-height: calc(100vh - 100px) !important; /* Increased from 120px */
-        overflow-y: auto !important;
-        -webkit-overflow-scrolling: touch !important;
-        margin-bottom: 0.5rem !important; /* Reduced from 1rem */
-        /* Reduced bottom padding to minimize empty space */
-        padding-bottom: 0.5rem !important; /* Reduced from 1.5rem */
-    }
-
     /* Layout adjustments - almost no gap between dropdown and buttons */
     .flex-responsive-wrap {
         @apply flex-col items-stretch !important;
@@ -1027,32 +960,19 @@ pre[class*="language-"] {
         @apply flex justify-center !important;
     }
 
-    /* Smaller buttons on mobile */
-    .btn-action {
-        height: 32px !important;
-        min-height: 32px !important;
-        padding: 0 8px !important;
-        font-size: 12px !important;
-
-        svg {
-            width: 14px !important;
-            height: 14px !important;
-        }
-    }
-
-    /* Editor container heights - reduced for better mobile experience */
+    /* Editor container heights - fill available space on mobile */
     .editor-container,
     .proxy-editor-container {
-        height: 200px !important; /* Reduced from 280px for better mobile experience */
-        max-height: 30vh !important; /* Reduced from 35vh */
-        min-height: 180px !important; /* Reduced from 220px */
+        height: calc(100vh - 380px) !important; /* Fill viewport minus header/controls */
+        max-height: 60vh !important; /* Allow more height */
+        min-height: 300px !important; /* Ensure minimum usable height */
     }
 
     /* Reduce editor height when JSON error is showing in portrait */
     .editor-container.has-error {
-        height: 160px !important; /* Reduced to make room for error message */
-        max-height: 25vh !important;
-        min-height: 140px !important;
+        height: calc(100vh - 460px) !important; /* Account for error message */
+        max-height: 50vh !important;
+        min-height: 250px !important;
     }
 
     /* Error message spacing on mobile */
@@ -1123,17 +1043,6 @@ pre[class*="language-"] {
    ========================================================================== */
 
 @media (max-height: 500px) and (orientation: landscape) and (min-width: 568px) {
-    /* Make card fit in landscape mode with reduced bottom spacing */
-    .card-dark {
-        max-height: calc(100vh - 80px) !important; /* Increased from 60px to 80px */
-        overflow-y: auto !important;
-        -webkit-overflow-scrolling: touch !important;
-        margin-bottom: 0.5rem !important; /* Reduced from 1rem */
-        padding: 8px !important;
-        /* Reduced bottom padding to minimize empty space */
-        padding-bottom: 0.5rem !important; /* Reduced from 1.5rem */
-    }
-
     /* Truncate card cleanly when admin editor is open */
     .admin-editor-section:not(.landscape-hidden) + .section-divider + .proxy-editor-section.landscape-hidden {
         display: none !important;
@@ -1174,16 +1083,8 @@ pre[class*="language-"] {
         gap: 6px !important;
     }
 
-    /* Compact button styling */
-    .btn-action {
-        min-height: 28px !important;
-        height: 28px !important;
-        padding: 0 6px !important;
-        font-size: 11px !important;
-    }
-
-    /* Hide button text to save space */
-    .btn-action span {
+    /* Hide button text to save space in landscape mode */
+    .button-default span {
         display: none !important;
     }
 
@@ -1273,14 +1174,6 @@ pre[class*="language-"] {
    ========================================================================== */
 
 @media (max-height: 400px) and (orientation: landscape) {
-    .card-dark {
-        max-height: calc(100vh - 70px) !important; /* Increased from 60px */
-        padding: 6px !important;
-        margin-bottom: 0.5rem !important; /* Reduced from 1rem */
-        /* Reduced bottom padding to minimize empty space */
-        padding-bottom: 0.5rem !important; /* Reduced from 1.5rem */
-    }
-
     .editor-container,
     .proxy-editor-container {
         height: 140px !important; /* Increased from 100px */
@@ -1351,21 +1244,38 @@ pre[class*="language-"] {
     }
 }
 
-/* Section divider */
-.section-divider {
-    margin: 12px 0 !important;
-    /* Reduce glow effect in landscape */
-    box-shadow: 0 0 4px rgba(61, 62, 68, 0.2) !important;
+/* ==========================================================================
+   MOBILE & TABLET - COMPACT EDITOR BUTTONS FOR ONE-ROW LAYOUT
+   ========================================================================== */
+
+/* Icon-sized buttons - compact for all screens */
+.button-default {
+    @apply h-7 w-7 p-0; // 28x28px on desktop/tablet
+    min-width: 28px !important;
+    max-width: 28px !important;
+    width: 28px !important;
+    height: 28px !important;
+    padding: 0 !important;
+    border-radius: 6px;
+
+    svg {
+        @apply w-4 h-4; // 16x16px icons
+    }
 }
 
-/* Compact section headers in landscape */
-.admin-editor-section h5,
-.proxy-editor-section h5 {
-    padding-bottom: 4px !important;
+/* Even more compact on mobile */
+@media (max-width: 640px) {
+    .button-default {
+        @apply h-6 w-6; // 24x24px on mobile
+        min-width: 24px !important;
+        max-width: 24px !important;
+        width: 24px !important;
+        height: 24px !important;
 
-    &::after {
-        width: 30px !important;
-        height: 1px !important;
+        svg {
+            @apply w-3.5 h-3.5; // 14x14px icons
+        }
     }
 }
+
 </style>

package/src/views/FilterBuilder.vue

@@ -486,11 +486,6 @@ watch(renderSeats, async () => {
 </script>
 
 <style scoped>
-.slider-dim {
-    width: 60px;
-    height: 30px;
-}
-
 .compact-filter {
     font-size: 0.75rem;
     padding: 0.25rem !important;
@@ -598,22 +593,10 @@ watch(renderSeats, async () => {
     overflow: hidden;
 }
 
-/* Component-scoped definition (not global utility) */
-.card-dark {
-    height: calc(100vh - 175px);
-    min-height: 500px;
-    overflow: hidden;
-}
-
 @media (max-width: 768px) {
     .filter-builder-container {
         overflow: auto;
     }
-
-    .card-dark {
-        height: auto;
-        overflow: auto;
-    }
 }
 
 /* Mobile portrait header spacing fixes */
@@ -630,12 +613,6 @@ watch(renderSeats, async () => {
         min-height: 100vh;
         overflow: auto;
     }
-
-    .card-dark {
-        height: auto;
-        min-height: 500px;
-        overflow: auto;
-    }
 }
 
 /* Desktop: enforce grid column constraints */

package/src/views/Login.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="login-container" v-once>
-        <div class="login-card">
-            <div class="mb-10 flex justify-center">
-                <img src="@/assets/img/logo_trans.png" class="mb-3 h-16 object-cover" alt="Logo: NecroLab" />
+    <div class="login-container flex min-h-screen flex-col items-center px-4 mt-[3vh] landscape:mt-[1vh] landscape:justify-start landscape:min-h-dvh" v-once>
+        <div class="login-card w-full max-w-[420px] rounded-lg border border-dark-650 bg-dark-400 p-7 backdrop-blur-[10px] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)]">
+            <div class="mb-10 flex justify-center landscape:mb-2">
+                <img src="@/assets/img/logo_trans.png" class="mb-3 h-16 object-cover landscape:h-10" alt="Logo: NecroLab" />
             </div>
 
             <LoginForm />
@@ -13,76 +13,27 @@
 import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
-.login-container {
-    @apply flex min-h-screen flex-col items-center px-4;
-    margin-top: 3vh;
-
-    // Mobile devices
-    @media (max-width: 480px) {
+/* Mobile-specific overrides (max-width: 480px) */
+@media (max-width: 480px) {
+    .login-container {
         margin-top: 2vh;
     }
 
-    // Landscape mode
-    @media (orientation: landscape) {
-        margin-top: 1vh;
-        justify-content: flex-start;
-        min-height: 100vh;
-        min-height: 100dvh;
-    }
-}
-
-.login-card {
-    @apply rounded-lg border border-dark-650 bg-dark-400 shadow-xl;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    width: 100%;
-    max-width: 420px;
-    padding: 1.75rem;
-
-    // Mobile devices
-    @media (max-width: 480px) {
+    .login-card {
         max-width: 380px;
         padding: 1.5rem;
     }
 
-    // Landscape mode
-    @media (orientation: landscape) {
-        padding: 1.25rem;
-        margin: 0.25rem 0;
-
-        h2 {
-            @apply mb-2 text-lg;
-        }
-
-        .flex.justify-center {
-            @apply mb-2;
-
-            img {
-                @apply h-10;
-            }
-        }
-    }
-}
-
-// Logo responsive sizing
-.login-card img {
-    @media (max-width: 480px) {
+    .login-card img {
         @apply h-12;
     }
-
-    @media (orientation: landscape) {
-        @apply h-10;
-    }
 }
 
-// Title responsive sizing
-.login-card h2 {
-    @media (max-width: 480px) {
-        @apply mb-3 text-lg;
-    }
-
-    @media (orientation: landscape) {
-        @apply mb-2 text-base;
+/* Landscape overrides */
+@media (orientation: landscape) {
+    .login-card {
+        padding: 1.25rem;
+        margin: 0.25rem 0;
     }
 }
 </style>

package/src/views/Profiles.vue

@@ -117,12 +117,6 @@
     </div>
 </template>
 <style lang="scss" scoped>
-.custom-dropdown-content {
-    top: 2.6rem !important;
-    left: -13px;
-    @apply border border-dark-650;
-}
-
 /* Page buttons styling - match Tasks page */
 button.bg-dark-400,
 button.bg-green-400,
@@ -134,82 +128,6 @@ button.bg-red-400 {
         border-color: oklch(0.72 0.15 145) !important;
     }
 }
-
-/* Unified search component group */
-.unified-search-group {
-    border: 2px solid oklch(0.2809 0 0);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    background: oklch(0.2603 0 0);
-    transition: all 0.15s ease;
-    display: flex;
-
-    :deep(.tag-toggle),
-    :deep(.dropdown),
-    input {
-        border: none !important;
-        border-width: 0 !important;
-        border-radius: 0 !important;
-        height: 40px !important;
-        background: transparent !important;
-        box-shadow: none !important;
-        min-width: fit-content !important;
-    }
-
-    :deep(.tag-toggle) {
-        padding: 0;
-        border: 0 solid transparent !important;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
-    }
-
-    :deep(.tag-toggle button) {
-        font-size: 0.875rem;
-        padding: 0.5rem 0.75rem;
-        min-width: fit-content;
-        border: 0 solid transparent !important;
-        border-top: 0 !important;
-        border-bottom: 0 !important;
-        border-left: 0 !important;
-        border-right: 0 !important;
-    }
-
-    :deep(.dropdown) {
-        width: 120px !important;
-        min-width: 120px !important;
-    }
-
-    :deep(.dropdown-display) {
-        padding: 0 0.75rem;
-        font-size: 0.875rem;
-    }
-
-    input {
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-        flex: 1;
-
-        &::placeholder {
-            color: oklch(0.50 0 0);
-        }
-
-        &:focus {
-            outline: none !important;
-        }
-    }
-
-    &:hover {
-        border-color: oklch(0.30 0 0);
-    }
-
-    &:focus-within {
-        border-color: oklch(0.72 0.15 145);
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-    }
-}
 </style>
 <script setup>
 import { computed, ref, watch } from "vue";

package/src/views/Tasks.vue

@@ -41,11 +41,6 @@
             <div class="mb-1 flex items-center justify-between gap-2 md:hidden">
                 <Stats class="stats-component flex-1" />
                 <div class="flex items-center gap-2">
-                    <div
-                        class="flex h-8 items-center justify-between rounded-md border border-dark-650 bg-dark-400 px-2 text-xs font-medium text-white">
-                        <p class="text-[10px]">Name</p>
-                        <Switch class="scale-75" v-model="preferEventName" />
-                    </div>
                     <PriceSortToggle
                         class="h-8 min-w-20 max-w-28 flex-shrink-0"
                         :options="['All', 'Checkout']"
@@ -138,18 +133,10 @@
 // Add padding in PWA mode to prevent content hiding under navbar
 .tasks-header {
     @media (display-mode: standalone) {
-        padding-top: 3.5rem !important;
+        padding-top: 3.5rem;
     }
 }
 
-// Bottom padding now handled globally in App.vue component-container
-
-.custom-dropdown-content {
-    top: 2.6rem !important;
-    left: -13px;
-    @apply border border-dark-650;
-}
-
 /* ==========================================================================
    TASKS PAGE RESPONSIVE LAYOUT - MOBILE FIRST
    ========================================================================== */
@@ -167,7 +154,7 @@
 .event-dropdown {
     min-width: 0;
     /* Match PriceSortToggle height instead of input-default */
-    height: 40px !important;
+    height: 40px;
 }
 
 .event-dropdown .dropdown-value {
@@ -179,10 +166,6 @@
 
 /* Small mobile screens (portrait) */
 @media (max-width: 480px) and (orientation: portrait) {
-    .event-dropdown {
-        height: 40px !important; /* Match PriceSortToggle height exactly */
-    }
-
     .event-dropdown .dropdown-value {
         max-width: calc(100vw - 140px);
         font-size: 0.875rem;
@@ -195,10 +178,6 @@
 
 /* Extra small screens */
 @media (max-width: 375px) and (orientation: portrait) {
-    .event-dropdown {
-        height: 40px !important; /* Maintain 40px height to match PriceSortToggle */
-    }
-
     .event-dropdown .dropdown-value {
         max-width: calc(100vw - 120px);
         font-size: 0.8rem;
@@ -214,7 +193,7 @@
     }
 
     .pb-2 {
-        padding-top: 1rem !important;
+        padding-top: 1rem;
         padding-bottom: 0.25rem;
         margin-bottom: 0.25rem;
     }