@necrolab/dashboard 0.5.33 → 0.5.35

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.33",
+    "version": "0.5.35",
     "type": "module",
     "scripts": {
         "build": "node scripts/build.mjs",

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

@@ -7,19 +7,25 @@
     @apply flex items-center justify-between;
     padding-top: 0.75rem;
     padding-bottom: 0.5rem;
-    flex-wrap: nowrap;
+    flex-wrap: nowrap !important;
     gap: 0.5rem;
+    min-height: 0;
 
     .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;
+        flex: 0 0 auto;
         min-width: 0;
-        max-width: 60%;
         white-space: nowrap;
-        overflow: hidden;
+
+        /* Mobile - allow shrinking if needed */
+        @media (max-width: 767px) {
+            flex: 0 1 auto;
+            max-width: calc(100% - 180px);
+            gap: 0.5rem;
+        }
 
         svg, img {
             width: 17px;

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

@@ -38,17 +38,33 @@
 .Toastify__toast-container {
     pointer-events: none;
     --toastify-toast-bd-radius: 6px;
+
+    /* Mobile responsive - prevent overflow and edge-to-edge toasts */
+    @media (max-width: 767px) {
+        width: calc(100vw - 2rem) !important;
+        max-width: 360px;
+        right: 1rem !important;
+        left: auto !important;
+        padding: 0 !important;
+        top: calc(env(safe-area-inset-top) + 1rem) !important;
+    }
 }
 
 .Toastify__toast {
     min-height: 50px !important;
-    height: 50px !important;
+    height: auto !important;
     pointer-events: auto !important;
     margin-bottom: 6px !important;
 
     transition: transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.12s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
     transform: translate3d(0, 0, 0);
 
+    /* Mobile responsive - ensure proper sizing */
+    @media (max-width: 767px) {
+        margin-bottom: 8px !important;
+        border-radius: 6px !important;
+    }
+
     &.Toastify__slide-enter-active {
         animation: slideInRight 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
     }

package/src/assets/css/main.scss

@@ -114,6 +114,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 .mobile-icons {
     @apply ml-auto flex items-center gap-x-2 lg:hidden;
+    flex-shrink: 0;
 
     button {
         @apply flex h-8 w-8 items-center justify-center rounded transition-all duration-150 bg-dark-400;

package/src/components/Tasks/Stats.vue

@@ -1,73 +1,400 @@
 <template>
-    <div class="flex-gap-1 items-center font-bold text-white lg:gap-3" v-if="ui.queueStats.show" :key="key">
+    <div
+        class="queue-stats"
+        :class="[{ 'queue-stats--full': visibleCards === 4 }, $attrs.class]"
+        :style="statsGridStyle"
+        v-if="ui.queueStats.show"
+        :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stat-badge">
-            <h2 class="stat-header">
+            class="stat-badge queue-stats__card queue-stats__card--metric">
+            <h2 class="queue-stats__header">
                 <img width="14px" src="@/assets/img/wildcard.svg" />
-                <span class="hidden md:inline">Total</span>
             </h2>
-            <span class="stat-value">
+            <span class="queue-stats__value">
                 {{ ui.queueStats.total }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stat-badge">
-            <h2 class="stat-header">
+            class="stat-badge queue-stats__card queue-stats__card--metric">
+            <h2 class="queue-stats__header">
                 <SkiIcon />
-                <span class="hidden md:inline">Queued</span>
             </h2>
-            <span class="stat-value">
+            <span class="queue-stats__value">
                 {{ ui.queueStats.queued }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stat-badge">
-            <h2 class="stat-header">
+            class="stat-badge queue-stats__card queue-stats__card--metric">
+            <h2 class="queue-stats__header">
                 <TimerIcon />
-                <span class="hidden md:inline">Sleeping</span>
             </h2>
-            <span class="stat-value">
+            <span class="queue-stats__value">
                 {{ ui.queueStats.sleeping }}
             </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="mb-2 flex h-8 min-w-0 items-center justify-between gap-2 rounded-xl p-2 text-sm lg:mb-5 lg:gap-3 lg:p-3 bg-dark-400 border-2 border-dark-550">
-            <h2 class="stat-header">
-                <CartIcon />
-                <span class="hidden sm:block">Next Passes</span>
-                <span class="block sm:hidden">Pass</span>
+            class="stat-badge queue-stats__card queue-stats__card--passes"
+            :title="ui.queueStats.nextQueuePasses.join(', ')">
+            <h2 class="queue-stats__header">
+                <SandclockIcon />
             </h2>
-            <span class="flex items-center truncate text-right text-xs font-bold text-light-300">
-                {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
+            <span class="queue-stats__value queue-stats__value--passes">
+                <span class="queue-stats__pass-text">{{ queuePassPreviewText }}</span>
+                <button
+                    v-if="hiddenPassCount > 0"
+                    type="button"
+                    class="queue-stats__more-btn"
+                    @click.stop="openPassesOverlay">
+                    +{{ hiddenPassCount }}
+                </button>
             </span>
         </div>
     </div>
+
+    <Teleport to="body">
+        <div
+            v-if="showPassesOverlay"
+            class="queue-pass-overlay"
+            @click.self="closePassesOverlay">
+            <div class="queue-pass-modal">
+                <div class="queue-pass-modal__header">
+                    <h3>Next Queue Passes</h3>
+                    <button
+                        type="button"
+                        class="queue-pass-modal__close"
+                        @click="closePassesOverlay">
+                        Close
+                    </button>
+                </div>
+                <div class="queue-pass-modal__body">
+                    <ul class="queue-pass-modal__list">
+                        <li
+                            v-for="(pass, index) in ui.queueStats.nextQueuePasses"
+                            :key="`${pass}-${index}`"
+                            class="queue-pass-modal__item">
+                            <span>#{{ index + 1 }}</span>
+                            <span>{{ pass }}</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </Teleport>
 </template>
 
 <script setup>
-import { SkiIcon, TimerIcon, CartIcon } from "@/components/icons";
+import { SkiIcon, TimerIcon, SandclockIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
-import { ref, onUnmounted } from "vue";
+import { ref, onUnmounted, computed, onMounted } from "vue";
+
+defineOptions({
+    inheritAttrs: false
+});
 
 const ui = useUIStore();
 
 const getQueuePassAmount = (width) => {
-    if (width > 1024) return 8;
-    if (width > 640) return 3;
+    if (width >= 1536) return 10;
+    if (width >= 1280) return 8;
+    if (width >= 1024) return 6;
+    if (width >= 768) return 4;
+    if (width >= 640) return 2;
     return 1;
 };
+const getQueuePassCharBudget = (width) => {
+    if (width >= 1536) return 56;
+    if (width >= 1280) return 42;
+    if (width >= 1024) return 32;
+    if (width >= 768) return 24;
+    if (width >= 640) return 16;
+    return 10;
+};
+const buildQueuePassPreview = (passes, maxItems, maxChars) => {
+    const values = passes.slice(0, maxItems).map((value) => String(value));
+    if (!values.length) return "";
+
+    let currentLength = 0;
+    const output = [];
+
+    for (const value of values) {
+        const separator = output.length ? 2 : 0;
+        const nextLength = currentLength + separator + value.length;
+        if (nextLength > maxChars) break;
+        output.push(value);
+        currentLength = nextLength;
+    }
+
+    if (output.length === 0) output.push(values[0]);
+
+    return {
+        visible: output,
+        hiddenCount: Math.max(passes.length - output.length, 0)
+    };
+};
 
 let key = ref(0);
+const width = ref(window.innerWidth);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));
+const queuePassCharBudget = ref(getQueuePassCharBudget(window.innerWidth));
+const showPassesOverlay = ref(false);
+const visibleCards = computed(
+    () =>
+        Number(Boolean(ui.queueStats.total)) +
+        Number(Boolean(ui.queueStats.queued)) +
+        Number(Boolean(ui.queueStats.sleeping)) +
+        Number(Boolean(ui.queueStats.nextQueuePasses.length))
+);
+const statsGridStyle = computed(() => ({
+    "--stats-card-count": `${Math.max(visibleCards.value, 1)}`
+}));
+const queuePassPreviewData = computed(() =>
+    buildQueuePassPreview(ui.queueStats.nextQueuePasses, queuePassAmount.value, queuePassCharBudget.value)
+);
+const queuePassPreviewText = computed(() => queuePassPreviewData.value.visible.join(", "));
+const hiddenPassCount = computed(() => queuePassPreviewData.value.hiddenCount);
+
+const openPassesOverlay = () => {
+    if (!hiddenPassCount.value) return;
+    showPassesOverlay.value = true;
+};
 
-const handleResize = () => (queuePassAmount.value = getQueuePassAmount(window.innerWidth));
+const closePassesOverlay = () => {
+    showPassesOverlay.value = false;
+};
+
+const handleResize = () => {
+    width.value = window.innerWidth;
+    queuePassAmount.value = getQueuePassAmount(width.value);
+    queuePassCharBudget.value = getQueuePassCharBudget(width.value);
+};
 window.addEventListener("resize", handleResize);
 
+const handleKeyDown = (event) => {
+    if (event.key === "Escape" && showPassesOverlay.value) {
+        closePassesOverlay();
+    }
+};
+
+onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
+});
+
 onUnmounted(() => {
     window.removeEventListener("resize", handleResize);
+    window.removeEventListener("keydown", handleKeyDown);
 });
 </script>
+
+<style scoped>
+.queue-stats {
+    display: grid;
+    width: 100%;
+    min-width: 0;
+    grid-template-columns: repeat(var(--stats-card-count), minmax(0, 1fr));
+    gap: 0.35rem;
+}
+
+.queue-stats__card {
+    @apply bg-dark-400 border-2 border-dark-550;
+    height: 2.5rem;
+    min-width: 0;
+    gap: 0.35rem;
+    border-radius: 0.55rem;
+    padding: 0 0.5rem;
+}
+
+.queue-stats__header {
+    min-width: 1rem;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: rgb(212 212 219 / 1);
+    font-weight: 600;
+    font-size: 0.7rem;
+    line-height: 1.1;
+    white-space: nowrap;
+}
+
+.queue-stats__value {
+    min-width: 0;
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: hidden;
+    text-align: right;
+    text-overflow: clip;
+    white-space: nowrap;
+    color: rgb(212 212 219 / 1);
+    font-weight: 700;
+    font-size: 0.7rem;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    margin-left: 0.25rem;
+}
+
+.queue-stats__card--metric .queue-stats__header {
+    min-width: 1rem;
+}
+
+.queue-stats__card--metric .queue-stats__value {
+    flex: 0 0 auto;
+    min-width: 3.4rem;
+    margin-left: 0.35rem;
+}
+
+.queue-stats__header :deep(svg),
+.queue-stats__header img {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+}
+
+.queue-stats__card--passes {
+    padding-right: 0.4rem;
+    gap: 0.3rem;
+}
+
+.queue-stats__card--passes .queue-stats__header {
+    min-width: 1.1rem;
+}
+
+.queue-stats__value--passes {
+    font-size: 0.67rem;
+    gap: 0.35rem;
+}
+
+.queue-stats__pass-text {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.queue-stats__more-btn {
+    @apply bg-dark-550 border border-dark-650 text-light-300;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    padding: 0.1rem 0.4rem;
+    font-size: 0.62rem;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.queue-pass-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.45);
+    padding: 1rem;
+}
+
+.queue-pass-modal {
+    @apply bg-dark-400 border border-dark-550;
+    width: min(34rem, 95vw);
+    border-radius: 0.75rem;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+}
+
+.queue-pass-modal__header {
+    @apply border-b border-dark-550 text-light-200;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.75rem 0.9rem;
+}
+
+.queue-pass-modal__header h3 {
+    font-size: 0.9rem;
+    font-weight: 700;
+}
+
+.queue-pass-modal__close {
+    @apply bg-dark-500 border border-dark-650 text-light-300;
+    border-radius: 0.45rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+}
+
+.queue-pass-modal__body {
+    max-height: min(60vh, 28rem);
+    overflow-y: auto;
+    padding: 0.55rem;
+}
+
+.queue-pass-modal__list {
+    display: grid;
+    gap: 0.35rem;
+}
+
+.queue-pass-modal__item {
+    @apply bg-dark-500 border border-dark-650 text-light-300;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0.5rem;
+    padding: 0.35rem 0.55rem;
+    font-size: 0.78rem;
+    font-variant-numeric: tabular-nums;
+}
+
+@media (min-width: 768px) {
+    .queue-stats {
+        gap: 0.45rem;
+    }
+
+    .queue-stats__card {
+        padding: 0 0.7rem;
+    }
+
+    .queue-stats__header {
+        gap: 0.35rem;
+        font-size: 0.72rem;
+    }
+
+    .queue-stats__value {
+        font-size: 0.72rem;
+    }
+
+    .queue-stats__value--passes {
+        font-size: 0.7rem;
+    }
+
+    .queue-stats__card--metric .queue-stats__value {
+        min-width: 3.7rem;
+    }
+}
+
+@media (min-width: 960px) {
+    .queue-stats--full {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr);
+    }
+}
+
+@media (min-width: 1280px) {
+    .queue-stats--full {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+
+    .queue-stats--full .queue-stats__card--passes {
+        grid-column: span 2;
+    }
+}
+
+@media (min-width: 1280px) {
+    .queue-stats__value--passes {
+        font-size: 0.75rem;
+    }
+}
+</style>

package/src/components/Tasks/Task.vue

@@ -85,8 +85,8 @@
             </div>
         </div>
         <div class="col-span-2 overflow-hidden lg:col-span-3 xl:col-span-2">
-            <h4 class="lg:text-2xs text-center text-xs leading-tight text-light-300">
-                <span v-if="!props.task.reservedTicketsList">-</span>
+            <h4 class="lg:text-2xs text-center text-xs leading-tight">
+                <span v-if="!props.task.reservedTicketsList" class="text-light-300">-</span>
                 <div v-else class="overflow-hidden">
                     <div
                         v-for="(l, index) in props.task.reservedTicketsList.split('\n')"
@@ -99,7 +99,12 @@
                                 'font-bold text-green-400': isTotalPrice(
                                     l,
                                     index,
-                                    props.task.reservedTicketsList.split(' ')
+                                    props.task.reservedTicketsList.split('\n')
+                                ),
+                                'text-light-300': !isTotalPrice(
+                                    l,
+                                    index,
+                                    props.task.reservedTicketsList.split('\n')
                                 )
                             }">
                             {{ l.trim() }}
@@ -109,7 +114,8 @@
                 <span
                     class="mt-1 block text-xs font-bold"
                     :class="{
-                        'text-red-400': taskTimeLeft === '00:00' || taskTimeLeft === 'No Cartholds'
+                        'text-red-400': taskTimeLeft === '00:00' || taskTimeLeft === 'No Cartholds',
+                        'text-light-300': taskTimeLeft !== '00:00' && taskTimeLeft !== 'No Cartholds'
                     }">
                     {{ taskTimeLeft !== "00:00" ? taskTimeLeft : "Expired" }}
                 </span>

package/src/components/Tasks/TaskView.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-x-hidden shadow-sm">
+    <div
+        class="table-component relative box-border flex flex-col overflow-x-hidden rounded-lg bg-dark-500 bg-clip-padding shadow-sm">
         <Header class="grid-cols-10 gap-2 text-center lg:grid-cols-12">
             <div class="col-span-1 flex items-center justify-start lg:col-span-2">
                 <Checkbox
@@ -9,26 +10,26 @@
                     :isHeader="true" />
                 <div class="mx-auto hidden items-center lg:flex" @click="ui.toggleSort('eventId')">
                     <EventIcon class="lg:mr-3" />
-                    <h4 class="hidden lg:flex text-white">Event</h4>
+                    <h4 class="hidden text-white lg:flex">Event</h4>
                     <DownIcon v-if="ui.sortData.sortBy === 'eventId' && !ui.sortData.reversed" class="ml-1" />
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
             <div class="col-span-2 flex items-center justify-center lg:col-span-3 xl:col-span-2" v-once>
                 <TicketIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex text-white">Tickets</h4>
+                <h4 class="hidden text-white lg:flex">Tickets</h4>
             </div>
             <div
                 class="col-span-6 flex items-center justify-center md:col-span-5 lg:col-span-4 xl:col-span-5"
                 @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex text-white">Status</h4>
+                <h4 class="hidden text-white lg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'status' && ui.sortData.reversed" class="ml-1" />
             </div>
             <div class="col-span-1 flex items-center justify-end md:col-span-2 md:justify-center lg:col-span-3" v-once>
                 <ClickIcon class="mr-0 lg:mr-3" />
-                <h4 class="hidden lg:flex text-white">Actions</h4>
+                <h4 class="hidden text-white lg:flex">Actions</h4>
             </div>
             <div class="absolute right-5 top-3.5 hidden items-center xl:flex">
                 <h4 class="text-center text-xs text-white">ID</h4>
@@ -36,7 +37,7 @@
         </Header>
         <DynamicScroller
             v-if="virtualTaskItems.length && useVirtualScroller"
-            class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
+            class="hidden-scrollbars scrollable min-h-0 touch-pan-y overflow-y-auto overflow-x-hidden"
             :style="{ height: maxTableHeight, maxHeight: maxTableHeight }"
             :items="virtualTaskItems"
             :min-item-size="virtualMinItemSize"
@@ -56,7 +57,7 @@
                     ]"
                     :data-index="index">
                     <div
-                        class="shrink-0 border-b border-dark-650 min-h-14.5 md:min-h-17.25 has-[.event-details]:min-h-18.75 mobile-portrait:min-h-12.5 transition-colors duration-150 ease-in-out hover:!bg-dark-550">
+                        class="mobile-portrait:min-h-12.5 min-h-14.5 shrink-0 border-b border-dark-650 transition-colors duration-150 ease-in-out hover:!bg-dark-550 has-[.event-details]:min-h-18.75 md:min-h-17.25">
                         <Task
                             v-if="props.tasks[item.taskId]"
                             :task="props.tasks[item.taskId]"
@@ -68,12 +69,12 @@
         </DynamicScroller>
         <div
             v-else-if="virtualTaskItems.length"
-            class="hidden-scrollbars touch-pan-y min-h-0 overflow-y-auto overflow-x-hidden scrollable"
+            class="hidden-scrollbars scrollable min-h-0 touch-pan-y overflow-y-auto overflow-x-hidden"
             :style="{ maxHeight: maxTableHeight }">
             <div
                 v-for="(item, index) in virtualTaskItems"
                 :key="item.taskId"
-                class="shrink-0 border-b border-dark-650 min-h-14.5 md:min-h-17.25 has-[.event-details]:min-h-18.75 mobile-portrait:min-h-12.5 transition-colors duration-150 ease-in-out hover:!bg-dark-550">
+                class="mobile-portrait:min-h-12.5 min-h-14.5 shrink-0 border-b border-dark-650 transition-colors duration-150 ease-in-out hover:!bg-dark-550 has-[.event-details]:min-h-18.75 md:min-h-17.25">
                 <Task
                     v-if="props.tasks[item.taskId]"
                     :task="props.tasks[item.taskId]"
@@ -83,18 +84,15 @@
         </div>
         <div
             v-else
-            class="empty-state flex flex-col items-center justify-center py-8 text-center bg-dark-400 text-light-500 text-sm font-medium"
+            class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center text-sm font-medium text-light-500"
             :style="{ minHeight: emptyStateHeight }">
-            <div
-                v-if="
-                    !ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0
-                ">
-                <TasksIcon class="mx-auto empty-state-icon" />
+            <div v-if="!ui.queueStats.queued && !ui.queueStats.sleeping && ui.queueStats.nextQueuePasses.length === 0">
+                <TasksIcon class="empty-state-icon mx-auto" />
                 <p class="text-sm text-light-400">No tasks yet</p>
                 <p class="mt-1 text-xs text-light-500">Create tasks to get started</p>
             </div>
             <div v-else>
-                <TasksIcon class="mx-auto empty-state-icon" />
+                <TasksIcon class="empty-state-icon mx-auto" />
                 <p class="text-sm text-light-400">No tasks match current filters</p>
                 <p class="mt-1 text-xs text-light-500">Adjust filters to see tasks</p>
             </div>
@@ -118,7 +116,7 @@ const props = defineProps({
     },
     searchQuery: {
         type: String,
-        default: ''
+        default: ""
     },
     preferEventName: {
         type: Boolean,
@@ -203,7 +201,11 @@ const filteredTaskIds = computed(() => {
             continue;
         }
 
-        if (task.siteId !== ui.currentCountry.siteId && !siteIdEdgeCases[task.siteId]?.includes(ui.currentCountry.siteId)) continue;
+        if (
+            task.siteId !== ui.currentCountry.siteId &&
+            !siteIdEdgeCases[task.siteId]?.includes(ui.currentCountry.siteId)
+        )
+            continue;
         if (ui.currentEvent && task.eventId !== ui.currentEvent) continue;
         if (!shouldTaskShow(task)) continue;
         if (!shouldTaskMatchSearch(task, searchLower)) continue;
@@ -264,33 +266,45 @@ const handleVirtualWheel = (event) => {
 
 const maxTableHeight = computed(() => {
     // Detect PWA mode (standalone display)
-    const isPWA = window.matchMedia('(display-mode: standalone)').matches;
+    const isPWA = window.matchMedia("(display-mode: standalone)").matches;
 
     // Calculate available space for table
     const headerHeight = windowWidth.value >= 1024 ? 80 : 64; // Navbar padding (lg:pt-20 vs pt-16)
     const titleHeight = 45; // Tasks title and mobile controls
     const controlsHeight = windowWidth.value >= 650 ? 55 : 0; // Desktop controls
-    // On desktop: stats + filters all in one row (45px)
-    // On mobile: stats row (40px) + filters stacked (90px) = 130px
-    const filtersAndStatsHeight =
-        windowWidth.value >= 768
-            ? ui.queueStats.show
-                ? 50
-                : 45 // Desktop: single row
-            : ui.queueStats.show
-              ? 130
-              : 90; // Mobile: stats row + stacked filters
+    // Keep this in sync with Tasks.vue controls layout:
+    // - >= 1280px: stats stays in same row as filters
+    // - 768px..1279px: stats takes its own wrapped row when visible
+    // - < 768px: mobile has dedicated stats row + controls/search rows
+    const isDesktopInlineStats = windowWidth.value >= 1280;
+    const isTabletWrappedStats = windowWidth.value >= 768 && windowWidth.value < 1280;
+
+    const filtersAndStatsHeight = (() => {
+        if (isDesktopInlineStats) {
+            return ui.queueStats.show ? 50 : 45;
+        }
+
+        if (isTabletWrappedStats) {
+            const filterRowHeight = 45;
+            const wrappedStatsRowHeight = ui.queueStats.show ? 54 : 0;
+            return filterRowHeight + wrappedStatsRowHeight;
+        }
+
+        return ui.queueStats.show ? 155 : 110;
+    })();
 
     // Reserve more space for UTILS on iPhone PWA to prevent overflow
-    const utilitiesHeight = isPWA && windowWidth.value <= 768
-        ? 260  // iPhone PWA: extra space for UTILS
-        : windowWidth.value > 1024
-            ? 200  // Desktop
-            : windowWidth.value <= 768
-                ? 220  // Mobile browser
-                : 180; // Tablet
-
-    const margins = windowWidth.value >= 1024 ? 30 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
+    const utilitiesHeight =
+        isPWA && windowWidth.value <= 768
+            ? 150 // iPhone PWA: extra space for UTILS
+            : windowWidth.value > 1024
+              ? 200 // Desktop
+              : windowWidth.value <= 768
+                ? 150 // Mobile browser
+                : 210; // Tablet
+
+    const margins =
+        windowWidth.value >= 1024 ? 30 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
 
     const totalUsedSpace =
         headerHeight + titleHeight + controlsHeight + filtersAndStatsHeight + utilitiesHeight + margins;

package/src/libs/Filter.js

@@ -164,7 +164,6 @@ const getSectionNameMapping = () => {
         }
     });
 
-    log("getSectionNameMapping:", sectionRealName);
     return sectionRealName;
 };
 
@@ -583,14 +582,11 @@ export default class FilterBuilder {
         // Use BOTH stroke and fill to cover entire section area, not just row lines
         this.cssClasses += `.svg-wrapper path.hover-highlight-stroke {stroke: ${colors.HIGHLIGHT} !important; fill: ${colors.HIGHLIGHT} !important; fill-opacity: 0.3 !important;}\n`;
         this.cssClasses += `.svg-wrapper path.hover-highlight-fill {fill: ${colors.HIGHLIGHT} !important;}\n`;
-
-        log("Generated CSS:", this.cssClasses);
     }
 
     addLabelHandlers() {
         const labels = document.querySelectorAll("tspan");
         const gaSectionNameMapping = this.getSectionNameMapping();
-        log("addLabelHandlers: gaSectionNameMapping", gaSectionNameMapping);
 
         for (let i = 0; i < labels.length; i++) {
             const label = labels[i];

package/src/main.js

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import VueVirtualScroller from "vue-virtual-scroller";
+import Vue3Toastify from "vue3-toastify";
 
 import App from "./App.vue";
 import router from "./router";
@@ -18,4 +19,8 @@ app.config.performance = true;
 app.use(createPinia());
 app.use(router);
 app.use(VueVirtualScroller);
+app.use(Vue3Toastify, {
+    newestOnTop: true,
+    position: "top-right"
+});
 app.mount("#app");

package/src/stores/connection.js

@@ -3,6 +3,7 @@ import WebsocketHeartbeatJs from "websocket-heartbeat-js";
 import { decode } from "@msgpack/msgpack";
 import router from "@/router/index";
 import { sortTaskIds } from "@/libs/utils/array";
+import { DEBUG } from "@/utils/debug";
 
 const TASK_UPDATE_EVENTS = new Set(["task-update", "task-setstatus", "task-setinfo"]);
 const QUEUE_STAT_FIELDS = new Set(["siteId", "eventId", "inQueue", "status", "queuePosition"]);
@@ -568,6 +569,7 @@ export class ConnectionHandler {
             if (msg?.data) msg.data.module = this.ui.currentModule;
             this.socket.send(JSON.stringify(msg));
         } catch {
+            if (DEBUG) return;
             this.ui.startSpinner("Reconnecting");
         }
     }
@@ -604,13 +606,13 @@ export class ConnectionHandler {
         };
 
         this.socket.onclose = () => {
-            this.ui.startSpinner("Reconnecting");
+            if (!DEBUG) this.ui.startSpinner("Reconnecting");
             hasShownDisconnect = true;
             this.clearTaskUpdateQueue();
         };
 
         this.socket.onerror = () => {
-            this.ui.startSpinner("Reconnecting");
+            if (!DEBUG) this.ui.startSpinner("Reconnecting");
             hasShownDisconnect = true;
             this.clearTaskUpdateQueue();
         };

package/src/stores/ui.js

@@ -5,6 +5,10 @@ import { toast } from "vue3-toastify";
 import { createLogger } from "@/stores/logger";
 import { betterSort, sortTaskIds } from "@/libs/utils/array";
 
+// Track active toast IDs for manual limit enforcement
+const activeToasts = [];
+const MAX_TOASTS = 2;
+
 const TOAST_CONFIG = {
     autoClose: 1400,
     pauseOnHover: false,
@@ -17,6 +21,27 @@ const TOAST_CONFIG = {
     newestOnTop: true
 };
 
+// Helper to enforce toast limit
+const showToastWithLimit = (type, message) => {
+    // If we're at the limit, remove the oldest toast
+    if (activeToasts.length >= MAX_TOASTS) {
+        const oldestId = activeToasts.shift();
+        toast.remove(oldestId);
+    }
+
+    // Show new toast and track its ID
+    const toastId = toast[type](message, TOAST_CONFIG);
+    activeToasts.push(toastId);
+
+    // Remove from tracking when it auto-closes
+    setTimeout(() => {
+        const index = activeToasts.indexOf(toastId);
+        if (index > -1) activeToasts.splice(index, 1);
+    }, TOAST_CONFIG.autoClose + 100);
+
+    return toastId;
+};
+
 import mockTaskData from "@/stores/sampleData.js";
 import { useRouter } from "vue-router";
 import { DEBUG } from "@/utils/debug";
@@ -24,6 +49,16 @@ import { DEBUG } from "@/utils/debug";
 const ALL_SELECTED = 0;
 const SOME_SELECTED = 1;
 const NO_SELECTED = 2;
+const DEV_QUEUE_STATS_STORAGE_KEY = "dev-queue-stats-mock";
+const DEV_QUEUE_STATS_PRESETS = {
+    heavy: {
+        show: true,
+        total: 10000,
+        queued: 5000,
+        sleeping: 3000,
+        nextQueuePasses: [11, 18, 26, 35, 49, 57, 72, 88, 103, 121, 147, 169]
+    }
+};
 
 export const useUIStore = defineStore("ui", () => {
     const logger = createLogger("UI");
@@ -98,6 +133,55 @@ export const useUIStore = defineStore("ui", () => {
         sleeping: 0,
         nextQueuePasses: []
     });
+    const devQueueStatsMock = ref(null);
+
+    const normalizeQueueStats = (input = {}) => {
+        const total = Number(input.total) || 0;
+        const queued = Number(input.queued) || 0;
+        const sleeping = Number(input.sleeping) || 0;
+        const nextQueuePasses = Array.isArray(input.nextQueuePasses)
+            ? input.nextQueuePasses.map((value) => Number(value)).filter((value) => Number.isFinite(value) && value > 0)
+            : [];
+        const show = Boolean(input.show ?? (queued > 0 || sleeping > 0 || nextQueuePasses.length > 0));
+
+        return {
+            show,
+            total,
+            queued,
+            sleeping,
+            nextQueuePasses: nextQueuePasses.sort((a, b) => a - b)
+        };
+    };
+
+    const applyQueueStats = (stats) => {
+        queueStats.value.show = stats.show;
+        queueStats.value.total = stats.total;
+        queueStats.value.queued = stats.queued;
+        queueStats.value.sleeping = stats.sleeping;
+        queueStats.value.nextQueuePasses = stats.nextQueuePasses;
+    };
+
+    const setDevQueueStatsMock = (stats) => {
+        if (!DEBUG) return;
+        if (!stats) {
+            devQueueStatsMock.value = null;
+            localStorage.removeItem(DEV_QUEUE_STATS_STORAGE_KEY);
+            refreshQueueStats();
+            return;
+        }
+
+        const normalized = normalizeQueueStats(stats);
+        devQueueStatsMock.value = normalized;
+        localStorage.setItem(DEV_QUEUE_STATS_STORAGE_KEY, JSON.stringify(normalized));
+        applyQueueStats(normalized);
+    };
+
+    const setDevQueueStatsPreset = (preset = "heavy") => {
+        if (!DEBUG) return;
+        const data = DEV_QUEUE_STATS_PRESETS[preset];
+        if (!data) return;
+        setDevQueueStatsMock(data);
+    };
 
     const router = useRouter();
     const openContextMenu = ref("");
@@ -205,7 +289,6 @@ export const useUIStore = defineStore("ui", () => {
             input.style.userSelect = "auto";
             input.style.touchAction = "pan-x pan-y";
         });
-
     };
 
     const enableScroll = () => {
@@ -242,10 +325,14 @@ export const useUIStore = defineStore("ui", () => {
 
         // Restore scroll position
         window.scrollTo(0, parseInt(scrollY || "0") * -1);
-
     };
 
     const refreshQueueStats = () => {
+        if (DEBUG && devQueueStatsMock.value) {
+            applyQueueStats(devQueueStatsMock.value);
+            return;
+        }
+
         const siteId = currentCountry.value.siteId;
         const eventId = currentEvent.value;
         const sleepingStatuses = new Set([
@@ -284,6 +371,23 @@ export const useUIStore = defineStore("ui", () => {
         queueStats.value.show = queued > 0 || sleeping > 0 || positions.length > 0;
     };
 
+    if (DEBUG) {
+        try {
+            const saved = localStorage.getItem(DEV_QUEUE_STATS_STORAGE_KEY);
+            if (saved) {
+                const parsed = JSON.parse(saved);
+                devQueueStatsMock.value = normalizeQueueStats(parsed);
+                applyQueueStats(devQueueStatsMock.value);
+            }
+        } catch {
+            localStorage.removeItem(DEV_QUEUE_STATS_STORAGE_KEY);
+        }
+
+        window.__setQueueStatsMock = (stats) => setDevQueueStatsMock(stats);
+        window.__setQueueStatsPreset = (preset = "heavy") => setDevQueueStatsPreset(preset);
+        window.__clearQueueStatsMock = () => setDevQueueStatsMock(null);
+    }
+
     const toggleModal = (name, clearValue = false) => {
         if (disabledButtons.value["add-tasks"] && name === "create-task") return;
         if (clearValue) currentlyEditing.value = {};
@@ -457,7 +561,6 @@ export const useUIStore = defineStore("ui", () => {
         mainCheckbox,
         toggleMainCheckbox,
 
-
         // single
         deleteTask: (taskId) => {
             delete tasks.value[taskId];
@@ -526,8 +629,8 @@ export const useUIStore = defineStore("ui", () => {
         massEditPresaleCode: (eventId, presaleCode) => connection.sendMassEditPresaleCode(eventId, presaleCode),
 
         // alerts
-        showError: (err) => toast.error(err, TOAST_CONFIG),
-        showSuccess: (msg) => toast.success(msg, TOAST_CONFIG),
+        showError: (err) => showToastWithLimit("error", err),
+        showSuccess: (msg) => showToastWithLimit("success", msg),
         // Country
         currentCountry,
         setCurrentCountry: (country, closeModal, newModule) => {
@@ -551,6 +654,8 @@ export const useUIStore = defineStore("ui", () => {
 
         disabledButtons,
         queueStats,
+        setDevQueueStatsMock,
+        setDevQueueStatsPreset,
 
         refreshQueueStats,
 

package/src/views/Tasks.vue

@@ -37,24 +37,11 @@
                     @deleteAll="ui.deleteTasks()" />
             </div>
 
-            <div class="mb-2 flex items-center justify-between gap-2 md:hidden">
-                <Stats class="stats-component flex-1" />
-                <div class="flex-gap-2 items-center">
-                    <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-2xs">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 class="mb-2 md:hidden">
+                <Stats class="stats-component w-full" />
             </div>
 
-            <div class="mb-1 hidden items-center gap-2 md:flex lg:mb-2">
+            <div class="mb-1 hidden flex-wrap items-center gap-2 md:flex xl:flex-nowrap lg:mb-2">
                 <div v-if="uniqEventIds.length > 1" class="w-52 flex-shrink-0">
                     <Dropdown
                         :onClick="(f) => ui.setCurrentEvent(f)"
@@ -87,7 +74,9 @@
                     :darker="true"
                     :current="ui.taskFilter"
                     @change="(e) => ui.setTaskFilter(e)" />
-                <Stats class="stats-component ml-auto" />
+                <div class="stats-component min-w-0 w-full md:basis-full xl:ml-auto xl:basis-auto xl:flex-1 xl:max-w-2xl">
+                    <Stats class="w-full" />
+                </div>
             </div>
 
             <div class="mb-1 flex flex-col gap-2 md:hidden">
@@ -101,16 +90,29 @@
                         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..."
-                            aria-label="Search tasks"
-                            class="transparent-input" />
-                        <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+                <div class="flex w-full items-center gap-2">
+                    <div class="flex-1">
+                        <div class="input-default flex items-center">
+                            <input
+                                v-model="taskSearchQuery"
+                                type="text"
+                                placeholder="Search tasks..."
+                                aria-label="Search tasks"
+                                class="transparent-input" />
+                            <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
+                        </div>
                     </div>
+                    <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 flex-shrink-0">
+                        <p class="text-2xs">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>