@necrolab/dashboard 0.5.10 → 0.5.12

package/package.json

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

package/src/App.vue

@@ -737,17 +737,31 @@ body {
 
 // iPhone landscape lock overlay
 .iphone-landscape-lock {
-    display: none;
     position: fixed;
     inset: 0;
     background: oklch(0.1822 0 0);
     z-index: 99999;
     align-items: center;
     justify-content: center;
+    display: flex;
+    opacity: 1;
+    transition: opacity 0.1s ease-out;
+
+    // Hide in portrait mode
+    @media (max-device-width: 430px) and (orientation: portrait) {
+        opacity: 0;
+        pointer-events: none;
+    }
 
-    // Only show on iPhone (not iPad) in landscape
+    // Show immediately in landscape
     @media (max-device-width: 430px) and (orientation: landscape) {
-        display: flex;
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    // Hide completely on iPad and desktop
+    @media (min-device-width: 431px) {
+        display: none;
     }
 
     .rotate-message {

package/src/assets/css/main.scss

@@ -20,6 +20,8 @@
 body {
     background-color: oklch(0.1822 0 0);
     position: relative;
+    min-height: 100vh;
+    min-height: 100dvh;
 
     &::before {
         content: "";
@@ -38,6 +40,14 @@ body {
         will-change: transform;
         -webkit-transform: translateZ(0);
         transform: translateZ(0);
+
+        // Extend into safe areas only in PWA mode
+        @media (display-mode: standalone) {
+            top: -50px;
+            left: -50px;
+            right: -50px;
+            bottom: -50px;
+        }
     }
 }
 
@@ -98,6 +108,23 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     stroke: oklch(0.60 0.20 25) !important;
 }
 
+/* ==========================================================================
+   PWA MODE FIXES
+   ========================================================================== */
+
+// Add padding to all page headers in PWA mode to prevent hiding under navbar
+@media (display-mode: standalone) {
+    // Accounts page header
+    .flex.items-center.justify-between.pt-5.pb-2 {
+        padding-top: 3.5rem !important;
+    }
+
+    // Console page header
+    h4.mb-2.flex.items-center.gap-2.pt-5 {
+        padding-top: 3.5rem !important;
+    }
+}
+
 /* ==========================================================================
    COMPONENT UTILITIES
    ========================================================================== */

package/src/components/Tasks/QuickSettings.vue

@@ -38,7 +38,7 @@
             />
         </div>
 
-                    <div class="input-container relative-positioned z-dropdown">
+        <div class="input-container relative-positioned z-dropdown">
             <span class="w-1/3 text-light-300 font-medium text-xs">Queue Proxies</span>
             <Dropdown
                 class="!w-2/3"
@@ -228,6 +228,12 @@
     -webkit-overflow-scrolling: touch !important;
     border: 1px solid oklch(0.26 0 0) !important;
     background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%) !important;
+    width: calc(100vw - 4rem) !important;
+    max-width: 600px !important;
+
+    @media (min-width: 700px) {
+        width: 600px !important;
+    }
 }
 
 :deep(.dropdown-item) {

package/src/components/ui/Modal.vue

@@ -56,7 +56,7 @@ onClickOutside(target, (event) => {
 </script>
 <style lang="scss" scoped>
 .modal-mask {
-    @apply fixed left-0 top-0 flex h-screen w-screen duration-300 ease-in-out;
+    @apply fixed left-0 top-0 flex w-screen duration-300 ease-in-out;
     z-index: 25000;
     align-items: flex-start;
     justify-content: center;
@@ -64,19 +64,25 @@ onClickOutside(target, (event) => {
     padding-top: 3.5rem;
     background-color: rgba(17, 17, 17, 0.85);
     backdrop-filter: blur(4px);
+    height: 100dvh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    // Prevent zoom in modals
     touch-action: pan-y !important;
+
+    @supports not (height: 100dvh) {
+        height: 100vh;
+    }
 }
 
 .component-modal {
     width: 640px;
-    margin-bottom: 10rem;
+    margin-bottom: 20rem;
     overflow-y: visible;
     @apply flex flex-col rounded-lg bg-dark-300 px-5 py-5;
-    // Prevent zoom in modal content
-    touch-action: pan-y !important;
+
+    @media (max-width: 480px) {
+        margin-bottom: 25rem;
+    }
 
     .modal-header {
         @apply flex font-bold text-white;
@@ -94,16 +100,16 @@ onClickOutside(target, (event) => {
 
 @media (max-width: 810px) {
     .modal-mask {
-        align-items: flex-start; // Start from top on mobile
+        align-items: flex-start;
         justify-content: center;
         padding: 1rem;
         padding-top: 3rem;
-        padding-bottom: 2rem; // Ensure bottom space
+        padding-bottom: 15rem !important;
     }
 
     .component-modal {
         width: calc(100vw - 2rem);
-        margin-bottom: 6rem; // Increased bottom margin for better button access
+        margin-bottom: 10rem;
     }
 
     .modal-body {

package/src/stores/sampleData.js

@@ -157,8 +157,9 @@ export default {
             active: true,
             email: "suphathrphrnb@gmail.com",
             password: "PrthYTpNPk1hfm3",
-            status: "Waiting for Stock",
-            statusColor: "white",
+            status: "Checked out! #123467",
+            statusColor: "green",
+            orderNumber: "#123456",
             manual: false,
             quickQueue: false,
             loginAfterCart: false,

package/src/views/Console.vue

@@ -7,7 +7,7 @@
 
         <div>
             <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-                <div class="flex flex-col gap-3 md:flex-row md:items-center md:flex-1">
+                <div class="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
                     <div class="w-full md:w-64">
                         <Dropdown
                             class="console-dropdown input-default w-full border-2 border-dark-550 bg-dark-500"
@@ -22,8 +22,8 @@
                                     .sort((a, b) => a.localeCompare(b))
                             " />
                     </div>
-                    <div class="flex items-center gap-2 flex-1">
-                        <div class="input-default flex items-center flex-1 md:max-w-64">
+                    <div class="flex flex-1 items-center gap-2">
+                        <div class="input-default flex flex-1 items-center md:max-w-64">
                             <input
                                 v-model="searchQuery"
                                 type="text"
@@ -52,7 +52,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="flex items-center gap-3 hidden md:flex">
+                <div class="flex hidden items-center gap-3 md:flex">
                     <!-- Hide Monitors and Auto buttons only on desktop -->
                     <div class="hidden items-center gap-3 md:flex">
                         <button
@@ -72,7 +72,7 @@
                     </div>
                     <!-- Scroll buttons - desktop only (mobile has them inline with search) -->
                     <button
-                        class="hidden md:flex h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200"
+                        class="hidden h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
                         @mousedown="startScrolling('up')"
                         @mouseup="stopScrolling"
                         @mouseleave="stopScrolling"
@@ -81,7 +81,7 @@
                         <UpIcon class="pointer-events-none h-5 w-5" />
                     </button>
                     <button
-                        class="hidden md:flex h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200"
+                        class="hidden h-10 w-10 items-center justify-center rounded border border-dark-650 bg-dark-400 shadow-sm transition-colors duration-150 hover:bg-dark-300 active:bg-dark-200 md:flex"
                         @mousedown="startScrolling('down')"
                         @mouseup="stopScrolling"
                         @mouseleave="stopScrolling"
@@ -94,7 +94,7 @@
 
             <Smoothie
                 :weight="0.2"
-                class="console scrollable smooth-scroll overflow-y-auto overflow-x-auto font-mono text-white"
+                class="console scrollable smooth-scroll overflow-x-auto overflow-y-auto font-mono text-white"
                 style="min-height: 12rem !important"
                 ref="$autoscroll"
                 @wheel.stop
@@ -118,7 +118,7 @@
                     v-bind:key="`log-${index}`"
                     :style="{ '--index': index }"><code class="md:text-sm lg:text-base" v-html="line"></code></pre>
             </Smoothie>
-            <div class="console-switches mt-4 mb-6 flex justify-between md:hidden">
+            <div class="console-switches mb-6 mt-4 flex justify-between 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>
@@ -261,7 +261,8 @@
     border-color: oklch(0.2809 0 0);
     transition: all 0.15s ease;
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
         border-color: oklch(0.72 0.15 145) !important;
         outline: 1px solid oklch(0.72 0.15 145);
         outline-offset: 0;
@@ -525,7 +526,7 @@ window.startDebugConsoleMessages = () => {
     setInterval(() => {
         var taskId = Math.round(Math.random() * 10);
         const log = {
-            log: `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${taskId}]\u001b[00m TEST TEST TEST TEST TEST TEST TEST`,
+            log: `\u001b[96m[12:16:02.273]\u001b[00m \u001b[96m[TASK-${taskId}]\u001b[00m TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST`,
             metadata: {
                 taskId: taskId,
                 siteId: "TM_US",

package/src/views/Tasks.vue

@@ -1,161 +1,153 @@
 <template>
-  <div class="tasks-page">
-    <div class="flex items-center justify-between pb-2" style="padding-top: 1.5rem">
-      <div class="flex items-center justify-center gap-4">
-        <GearIcon
-          class="w-5 cursor-pointer smooth-hover"
-          @click="ui.toggleModal('quick-settings')"
-        />
-        <h4 class="text-base font-semibold text-light-300">
-          Tasks
-          <span class="text-sm font-medium text-light-400 pl-1">{{ taskCount }}</span>
-        </h4>
-      </div>
-      <ul class="mobile-icons mobile-header-controls">
-        <li>
-          <button @click="ui.startTasks()"><PlayIcon class="w-4 h-4" /></button>
-        </li>
-        <li>
-          <button @click="ui.stopTasks()"><PauseIcon class="w-4 h-4" /></button>
-        </li>
-        <li>
-          <button
-            class="text-sm"
-            :disabled="ui.disabledButtons['add-tasks']"
-            @click="ui.toggleModal('create-task')"
-          >
-            <PlusIcon class="w-4 h-4" />
-          </button>
-        </li>
-        <li>
-          <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
-        </li>
-      </ul>
-    </div>
-
-    <div class="controls-wrapper">
-      <div class="controls-wrapper lg:mb-3">
-        <DesktopControls
-          class="desktop-controls-hide"
-          @stopAll="ui.stopTasks()"
-          @startAll="ui.startTasks()"
-          @deleteAll="ui.deleteTasks()"
-        />
-      </div>
-
-      <div class="flex md:hidden items-center justify-between gap-2 mb-1">
-        <Stats class="stats-component flex-1" />
-        <div class="flex gap-2 items-center">
-          <div class="bg-dark-400 border border-dark-650 justify-between px-2 flex text-white text-xs font-medium items-center rounded-md h-8">
-            <p class="text-[10px]">Name</p>
-            <Switch class="scale-75" v-model="preferEventName" />
-          </div>
-          <PriceSortToggle
-            class="min-w-20 max-w-28 flex-shrink-0 h-8"
-            :options="['All', 'Checkout']"
-            :darker="true"
-            :current="ui.taskFilter"
-            @change="(e) => ui.setTaskFilter(e)"
-          />
-        </div>
-      </div>
-
-      <div class="hidden md:flex items-center gap-2 lg:mb-2 mb-1">
-        <div
-          v-if="uniqEventIds.length > 1"
-          class="w-52 flex-shrink-0"
-        >
-          <Dropdown
-            :onClick="(f) => ui.setCurrentEvent(f)"
-            default="All events"
-            :chosen="ui.currentEvent"
-            :options="uniqEventIds"
-            :allowDefault="true"
-            class="input-default w-full hover:bg-dark-400 event-dropdown"
-            rightAmount="right-2"
-          />
-        </div>
-        <div class="w-52 flex-shrink-0">
-          <div class="input-default flex items-center">
-            <input
-              v-model="taskSearchQuery"
-              type="text"
-              placeholder="Search tasks..."
-              class="h-full w-full bg-transparent text-sm text-white outline-none"
-            />
-            <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
-          </div>
-        </div>
-        <div class="bg-dark-400 border border-dark-650 justify-between px-3 w-32 flex text-white text-xs font-medium items-center rounded-md h-10">
-          <p>Name</p>
-          <Switch class="scale-75" v-model="preferEventName" />
+    <div class="tasks-page">
+        <div class="tasks-header flex items-center justify-between pb-2" style="padding-top: 1.5rem">
+            <div class="flex items-center justify-center gap-4">
+                <GearIcon class="smooth-hover w-5 cursor-pointer" @click="ui.toggleModal('quick-settings')" />
+                <h4 class="text-base font-semibold text-light-300">
+                    Tasks
+                    <span class="pl-1 text-sm font-medium text-light-400">{{ taskCount }}</span>
+                </h4>
+            </div>
+            <ul class="mobile-icons mobile-header-controls">
+                <li>
+                    <button @click="ui.startTasks()"><PlayIcon class="h-4 w-4" /></button>
+                </li>
+                <li>
+                    <button @click="ui.stopTasks()"><PauseIcon class="h-4 w-4" /></button>
+                </li>
+                <li>
+                    <button
+                        class="text-sm"
+                        :disabled="ui.disabledButtons['add-tasks']"
+                        @click="ui.toggleModal('create-task')">
+                        <PlusIcon class="h-4 w-4" />
+                    </button>
+                </li>
+                <li>
+                    <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
+                </li>
+            </ul>
         </div>
-        <PriceSortToggle
-          class="min-w-24 max-w-28 flex-shrink-0"
-          :options="['All', 'Checkout']"
-          :darker="true"
-          :current="ui.taskFilter"
-          @change="(e) => ui.setTaskFilter(e)"
-        />
-        <Stats class="stats-component ml-auto" />
-      </div>
-
-      <div class="flex md:hidden flex-col gap-2 mb-1">
-        <div
-          v-if="uniqEventIds.length > 1"
-          class="w-full"
-        >
-          <Dropdown
-            :onClick="(f) => ui.setCurrentEvent(f)"
-            default="All events"
-            :chosen="ui.currentEvent"
-            :options="uniqEventIds"
-            :allowDefault="true"
-            class="input-default w-full hover:bg-dark-400 event-dropdown"
-            rightAmount="right-2"
-          />
-        </div>
-        <div class="w-full">
-          <div class="input-default flex items-center">
-            <input
-              v-model="taskSearchQuery"
-              type="text"
-              placeholder="Search tasks..."
-              class="h-full w-full bg-transparent text-sm text-white outline-none"
-            />
-            <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
-          </div>
+
+        <div class="controls-wrapper">
+            <div class="controls-wrapper lg:mb-3">
+                <DesktopControls
+                    class="desktop-controls-hide"
+                    @stopAll="ui.stopTasks()"
+                    @startAll="ui.startTasks()"
+                    @deleteAll="ui.deleteTasks()" />
+            </div>
+
+            <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']"
+                        :darker="true"
+                        :current="ui.taskFilter"
+                        @change="(e) => ui.setTaskFilter(e)" />
+                </div>
+            </div>
+
+            <div class="mb-1 hidden items-center gap-2 md:flex lg:mb-2">
+                <div v-if="uniqEventIds.length > 1" class="w-52 flex-shrink-0">
+                    <Dropdown
+                        :onClick="(f) => ui.setCurrentEvent(f)"
+                        default="All events"
+                        :chosen="ui.currentEvent"
+                        :options="uniqEventIds"
+                        :allowDefault="true"
+                        class="input-default event-dropdown w-full hover:bg-dark-400"
+                        rightAmount="right-2" />
+                </div>
+                <div class="w-52 flex-shrink-0">
+                    <div class="input-default flex items-center">
+                        <input
+                            v-model="taskSearchQuery"
+                            type="text"
+                            placeholder="Search tasks..."
+                            class="h-full w-full bg-transparent text-sm text-white outline-none" />
+                        <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+                    </div>
+                </div>
+                <div
+                    class="flex h-10 w-32 items-center justify-between rounded-md border border-dark-650 bg-dark-400 px-3 text-xs font-medium text-white">
+                    <p>Name</p>
+                    <Switch class="scale-75" v-model="preferEventName" />
+                </div>
+                <PriceSortToggle
+                    class="min-w-24 max-w-28 flex-shrink-0"
+                    :options="['All', 'Checkout']"
+                    :darker="true"
+                    :current="ui.taskFilter"
+                    @change="(e) => ui.setTaskFilter(e)" />
+                <Stats class="stats-component ml-auto" />
+            </div>
+
+            <div class="mb-1 flex flex-col gap-2 md:hidden">
+                <div v-if="uniqEventIds.length > 1" class="w-full">
+                    <Dropdown
+                        :onClick="(f) => ui.setCurrentEvent(f)"
+                        default="All events"
+                        :chosen="ui.currentEvent"
+                        :options="uniqEventIds"
+                        :allowDefault="true"
+                        class="input-default event-dropdown w-full hover:bg-dark-400"
+                        rightAmount="right-2" />
+                </div>
+                <div class="w-full">
+                    <div class="input-default flex items-center">
+                        <input
+                            v-model="taskSearchQuery"
+                            type="text"
+                            placeholder="Search tasks..."
+                            class="h-full w-full bg-transparent text-sm text-white outline-none" />
+                        <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+                    </div>
+                </div>
+            </div>
+
+            <TaskView
+                class="mb-2 lg:mb-3"
+                :tasks="ui.tasks"
+                :searchQuery="taskSearchQuery"
+                :preferEventName="preferEventName" />
+
+            <Utilities class="utilities-section" />
         </div>
-      </div>
 
-      <TaskView class="lg:mb-3 mb-2" :tasks="ui.tasks" :searchQuery="taskSearchQuery" :preferEventName="preferEventName" />
+        <ViewTask v-if="ui.activeModal === 'view-task' && ui.selectedTaskForView" :task="ui.selectedTaskForView" />
 
-      <Utilities class="utilities-section" />
+        <transition-group name="fade">
+            <CreateTaskTM v-if="ui.currentModule == 'TM' && activeModal === 'create-task'" @new="ui.addNewTask" />
+            <CreateTaskAXS v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'" @new="ui.addNewTask" />
+            <CheckStock v-if="activeModal === 'check-stock'" />
+            <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
+            <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
+            <QuickSettings v-if="activeModal === 'quick-settings'" />
+        </transition-group>
     </div>
-
-    <ViewTask v-if="ui.activeModal === 'view-task' && ui.selectedTaskForView" :task="ui.selectedTaskForView" />
-
-    <transition-group name="fade">
-      <CreateTaskTM
-        v-if="ui.currentModule == 'TM' && activeModal === 'create-task'"
-        @new="ui.addNewTask"
-      />
-      <CreateTaskAXS
-        v-if="ui.currentModule == 'AXS' && activeModal === 'create-task'"
-        @new="ui.addNewTask"
-      />
-      <CheckStock v-if="activeModal === 'check-stock'" />
-      <ScrapeVenue v-if="activeModal === 'scrape-venue'" />
-      <MassEditPresaleCode v-if="activeModal === 'mass-edit-presale-code'" />
-      <QuickSettings v-if="activeModal === 'quick-settings'" />
-    </transition-group>
-  </div>
 </template>
 <style lang="scss" scoped>
+// Add padding in PWA mode to prevent content hiding under navbar
+.tasks-header {
+    @media (display-mode: standalone) {
+        padding-top: 3.5rem !important;
+    }
+}
+
+// Bottom padding now handled globally in App.vue component-container
+
 .custom-dropdown-content {
-  top: 2.6rem !important;
-  left: -13px;
-  @apply border border-dark-650;
+    top: 2.6rem !important;
+    left: -13px;
+    @apply border border-dark-650;
 }
 
 /* ==========================================================================
@@ -164,79 +156,79 @@
 
 /* Default mobile layout */
 .desktop-controls-hide {
-  display: none;
+    display: none;
 }
 
 .mobile-header-controls {
-  display: flex;
+    display: flex;
 }
 
 /* Event dropdown base styling */
 .event-dropdown {
-  min-width: 0;
-  /* Match PriceSortToggle height instead of input-default */
-  height: 40px !important;
+    min-width: 0;
+    /* Match PriceSortToggle height instead of input-default */
+    height: 40px !important;
 }
 
 .event-dropdown .dropdown-value {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /* 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;
-  }
-
-  .event-dropdown .dropdown-display {
-    padding-right: 2rem;
-  }
+    .event-dropdown {
+        height: 40px !important; /* Match PriceSortToggle height exactly */
+    }
+
+    .event-dropdown .dropdown-value {
+        max-width: calc(100vw - 140px);
+        font-size: 0.875rem;
+    }
+
+    .event-dropdown .dropdown-display {
+        padding-right: 2rem;
+    }
 }
 
 /* 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;
-  }
+    .event-dropdown {
+        height: 40px !important; /* Maintain 40px height to match PriceSortToggle */
+    }
+
+    .event-dropdown .dropdown-value {
+        max-width: calc(100vw - 120px);
+        font-size: 0.8rem;
+    }
 }
 
 /* Mobile landscape - hide non-essential elements */
 @media (max-height: 500px) and (orientation: landscape) {
-  .stats-component,
-  .utilities-section,
-  .filter-controls {
-    display: none;
-  }
-
-  .pb-2 {
-    padding-top: 1rem !important;
-    padding-bottom: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
+    .stats-component,
+    .utilities-section,
+    .filter-controls {
+        display: none;
+    }
+
+    .pb-2 {
+        padding-top: 1rem !important;
+        padding-bottom: 0.25rem;
+        margin-bottom: 0.25rem;
+    }
 }
 
 /* Tablet and small desktop - show desktop controls */
 @media (min-width: 650px) {
-  .desktop-controls-hide {
-    display: flex;
-  }
+    .desktop-controls-hide {
+        display: flex;
+    }
 
-  .mobile-header-controls {
-    display: none;
-  }
+    .mobile-header-controls {
+        display: none;
+    }
 }
 </style>
 <script setup>
@@ -263,55 +255,58 @@ const activeModal = computed(() => ui.activeModal);
 const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
 ui.refreshQueueStats();
 
-const taskSearchQuery = ref('');
+const taskSearchQuery = ref("");
 // Load preference from localStorage, default to true
-const preferEventName = ref(localStorage.getItem('preferEventName') !== 'false');
+const preferEventName = ref(localStorage.getItem("preferEventName") !== "false");
 
 // Persist preference to localStorage when changed
 watch(preferEventName, (newValue) => {
-  localStorage.setItem('preferEventName', String(newValue));
+    localStorage.setItem("preferEventName", String(newValue));
 });
 
 const filteredTaskCount = computed(() => {
-  if (!taskSearchQuery.value.trim()) return '';
-
-  const searchLower = taskSearchQuery.value.toLowerCase().trim();
-  let count = 0;
-
-  Object.values(ui.tasks).forEach(task => {
-    if (task.hidden) return;
-
-    const searchableText = [
-      task.eventId,
-      task.eventName,
-      task.eventVenue,
-      task.email,
-      task.taskId,
-      task.status,
-      task.profileName,
-      task.presaleCode,
-      task.reservedTicketsList
-    ].filter(Boolean).join(' ').toLowerCase();
-
-    if (searchableText.includes(searchLower)) count++;
-  });
-
-  return count;
+    if (!taskSearchQuery.value.trim()) return "";
+
+    const searchLower = taskSearchQuery.value.toLowerCase().trim();
+    let count = 0;
+
+    Object.values(ui.tasks).forEach((task) => {
+        if (task.hidden) return;
+
+        const searchableText = [
+            task.eventId,
+            task.eventName,
+            task.eventVenue,
+            task.email,
+            task.taskId,
+            task.status,
+            task.profileName,
+            task.presaleCode,
+            task.reservedTicketsList
+        ]
+            .filter(Boolean)
+            .join(" ")
+            .toLowerCase();
+
+        if (searchableText.includes(searchLower)) count++;
+    });
+
+    return count;
 });
 
 // Ensure "All events" is always selected on page load
 onMounted(() => {
-  ui.setCurrentEvent("");
+    ui.setCurrentEvent("");
 });
 
 const uniqEventIds = computed(() => {
-  const ids = [
-    ...new Set(
-      Object.values(ui.tasks)
-        .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId?.includes("@"))
-        .map((v) => `${v.eventName} (${v.eventId})`)
-    ),
-  ];
-  return ids;
+    const ids = [
+        ...new Set(
+            Object.values(ui.tasks)
+                .filter((t) => t.siteId === ui.currentCountry.siteId && !t.eventId?.includes("@"))
+                .map((v) => `${v.eventName} (${v.eventId})`)
+        )
+    ];
+    return ids;
 });
 </script>