@necrolab/dashboard 0.5.2 → 0.5.4

package/backend/api.js

@@ -153,11 +153,17 @@ app.ws("/api/updates", async function (ws, req) {
             setTimeout(() => send({ event: "init-axs-accounts", accounts: Bot.AXS.Accounts }));
 
             ws.on("message", async (msg) => {
-                if (msg === "ping") return ws.send("pong");
-                const parsed = JSON.parse(msg);
-                parsed.data.user = currentUser;
-                const res = await endpoints.handleWebsocketMessage(parsed);
-                if (res?.error) ws.send(JSON.stringify([{ event: "error", msg: res.error }]));
+                const msgStr = msg.toString();
+                if (msgStr === "ping") return ws.send("pong");
+
+                try {
+                    const parsed = JSON.parse(msgStr);
+                    parsed.data.user = currentUser;
+                    const res = await endpoints.handleWebsocketMessage(parsed);
+                    if (res?.error) ws.send(JSON.stringify([{ event: "error", msg: res.error }]));
+                } catch (e) {
+                    logger.Error("WebSocket message parse error:", e.message, "Message:", msgStr);
+                }
             });
         }
         if (req.query.type === "console") {
@@ -194,14 +200,26 @@ app.post("/api/login", async (req, res) => {
     const pwd = req.body.password;
     const user = req.body.name;
     const authResult = auth.loginToAccount(user, pwd);
-    if (authResult.token) return res.cookie("auth", authResult.token).send(authResult);
-    else return res.send(authResult);
+    if (authResult.token) {
+        return res.cookie("auth", authResult.token, {
+            httpOnly: false,
+            sameSite: 'lax',
+            path: '/'
+        }).send(authResult);
+    } else {
+        return res.send(authResult);
+    }
 });
 
 app.post("/api/logout", async (req, res) => {
     const token = req.cookies.auth;
     const result = auth.invalidateAuthToken(token);
-    return res.cookie("auth", "").send(result);
+    return res.cookie("auth", "", {
+        httpOnly: false,
+        sameSite: 'lax',
+        path: '/',
+        maxAge: 0
+    }).send(result);
 });
 
 // ===== File editing =====

package/index.html

@@ -7,6 +7,9 @@
             name="viewport"
             content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
         />
+        <!-- Lock iPhone to portrait orientation only -->
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="description" content="Necro Lab - dashboard" />
         <meta name="darkreader-lock" />
         <meta name="color-scheme" content="dark" />

package/package.json

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

package/public/manifest.json

@@ -5,13 +5,14 @@
         {
             "src": "/android-chrome-192x192.png?v=2",
             "type": "image/png",
-            "sizes": "192x192"
+            "sizes": "192x192",
+            "purpose": "any"
         },
         {
-            "src": "/android-chrome-192x192.png?v=2",
+            "src": "/android-chrome-512x512.png?v=2",
             "type": "image/png",
-            "sizes": "192x192",
-            "purpose": "any maskable"
+            "sizes": "512x512",
+            "purpose": "maskable"
         },
         {
             "src": "/android-chrome-512x512.png?v=2",
@@ -29,5 +30,6 @@
     "display": "standalone",
     "scope": "/",
     "theme_color": "#2e2f32",
-    "description": "Necro Lab"
+    "description": "Necro Lab",
+    "orientation": "portrait"
 }

package/src/App.vue

@@ -1,5 +1,15 @@
 <template>
     <div class="layout">
+        <!-- iPhone Landscape Lock Overlay -->
+        <div v-if="!isIpadOS() && isIOS()" class="iphone-landscape-lock">
+            <div class="rotate-message">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="rotate-icon">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                <p class="rotate-text">Please rotate your device to portrait mode</p>
+            </div>
+        </div>
+
         <transition name="fade">
             <Splash v-if="isLoading" />
         </transition>
@@ -88,6 +98,70 @@ function isIpadOS() {
     return navigator.maxTouchPoints && navigator.maxTouchPoints > 2 && /MacIntel/.test(navigator.platform);
 }
 
+// Lock iPhone (not iPad) to portrait orientation only
+function lockOrientationToPortrait() {
+    if (isIOS() && !isIpadOS()) {
+        // Try to lock orientation using Screen Orientation API
+        if (screen.orientation && screen.orientation.lock) {
+            screen.orientation.lock('portrait').catch(() => {
+                // Silently fail if not supported or in browser (vs PWA)
+            });
+        }
+
+        // Also prevent landscape handling
+        const preventLandscape = () => {
+            if (window.innerWidth > window.innerHeight) {
+                // Force dimensions to portrait if somehow in landscape
+                document.documentElement.style.setProperty('width', window.innerHeight + 'px');
+                document.documentElement.style.setProperty('height', window.innerWidth + 'px');
+            }
+        };
+
+        window.addEventListener('orientationchange', preventLandscape);
+        window.addEventListener('resize', preventLandscape);
+    }
+}
+
+// Run orientation lock on mount
+lockOrientationToPortrait();
+
+// Prevent pinch-to-zoom gestures
+let lastTouchDistance = 0;
+
+document.addEventListener('touchstart', (e) => {
+    if (e.touches.length > 1) {
+        e.preventDefault();
+    }
+}, { passive: false });
+
+document.addEventListener('touchmove', (e) => {
+    if (e.touches.length > 1) {
+        e.preventDefault();
+    }
+}, { passive: false });
+
+document.addEventListener('gesturestart', (e) => {
+    e.preventDefault();
+}, { passive: false });
+
+document.addEventListener('gesturechange', (e) => {
+    e.preventDefault();
+}, { passive: false });
+
+document.addEventListener('gestureend', (e) => {
+    e.preventDefault();
+}, { passive: false });
+
+// Prevent double-tap zoom
+let lastTouchEnd = 0;
+document.addEventListener('touchend', (e) => {
+    const now = Date.now();
+    if (now - lastTouchEnd <= 300) {
+        e.preventDefault();
+    }
+    lastTouchEnd = now;
+}, { passive: false });
+
 // Handle orientation changes for iOS devices
 const handleOrientationChange = () => {
     if (isIOS()) {
@@ -653,7 +727,7 @@ watch(
 const layout = computed(() => router.currentRoute.value.meta.layout);
 </script>
 <style lang="scss">
-// Ultra bulletproof scroll prevention
+// Ultra bulletproof scroll prevention and zoom prevention
 html,
 body {
     overflow: hidden !important;
@@ -661,6 +735,10 @@ body {
     width: 100% !important;
     height: 100% !important;
     touch-action: none !important;
+    // Prevent zoom on desktop
+    zoom: 1;
+    -moz-transform: scale(1);
+    -moz-transform-origin: 0 0;
 }
 
 #app {
@@ -671,6 +749,11 @@ body {
     touch-action: none !important;
 }
 
+// Prevent any element from being zoomable
+* {
+    touch-action: manipulation !important;
+}
+
 .dropdown {
     position: relative;
     display: inline-block;
@@ -691,6 +774,52 @@ body {
     height: 100vh !important;
 }
 
+// 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;
+
+    // Only show on iPhone (not iPad) in landscape
+    @media (max-device-width: 430px) and (orientation: landscape) {
+        display: flex;
+    }
+
+    .rotate-message {
+        text-align: center;
+        padding: 2rem;
+
+        .rotate-icon {
+            width: 64px;
+            height: 64px;
+            margin: 0 auto 1rem;
+            color: oklch(0.72 0.15 145);
+            animation: rotate-pulse 2s ease-in-out infinite;
+        }
+
+        .rotate-text {
+            color: oklch(0.9 0 0);
+            font-size: 1.125rem;
+            font-weight: 500;
+        }
+    }
+}
+
+@keyframes rotate-pulse {
+    0%, 100% {
+        transform: rotate(0deg) scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: rotate(90deg) scale(1.1);
+        opacity: 0.8;
+    }
+}
+
 .router-wrapper {
     @apply pt-5;
     transition: margin 0.25s;

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

@@ -4,22 +4,31 @@
 
 .Toastify__toast-theme--colored.Toastify__toast--default,
 .Toastify__toast-theme--light {
-    @apply bg-dark-550 text-white;
+    background: oklch(0.2046 0 0);
+    border: 2px solid oklch(0.2809 0 0);
+    color: oklch(0.90 0 0);
 }
 
 .Toastify__toast-icon {
-    background: white;
-    border-radius: 100%;
+    background: transparent;
+    width: 20px;
+    height: 20px;
+
+    svg {
+        width: 20px;
+        height: 20px;
+    }
 }
 
 .Toastify__close-button.Toastify__close-button--light {
     margin-top: 1px;
     padding-left: 0.1rem;
-    @apply border-2 border-white flex border-solid w-6 h-6 items-center justify-center rounded-full;
+    @apply flex border-solid w-6 h-6 items-center justify-center rounded-full;
+    border: 2px solid oklch(0.90 0 0);
 }
 
 .Toastify__close-button.Toastify__close-button--light svg {
-    color: white;
+    color: oklch(0.90 0 0);
 }
 
 .Toastify__close-button.Toastify__close-button--light svg path {
@@ -91,7 +100,7 @@
 }
 
 .Toastify__toast--success .Toastify__progress-bar {
-    @apply bg-green-400;
+    background: oklch(0.72 0.15 145);
 }
 
 .Toastify__progress-bar {

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

@@ -2,7 +2,10 @@
     <Row
         class="relative h-16 grid-cols-5 text-white md:grid-cols-7"
         @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')">
+        @click.right.prevent="ui.setOpenContextMenu('')"
+        @dblclick="handleDoubleClick"
+        @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd">
         <div class="col-span-3 flex lg:col-span-2">
             <Checkbox
                 class="ml-0 mr-4"
@@ -189,4 +192,40 @@ const edit = () => {
     ui.currentlyEditing = props.account;
     ui.toggleModal("create-account");
 };
+
+// Double-click/tap selection
+let lastTapTime = 0;
+const DOUBLE_TAP_DELAY = 300; // ms
+
+const handleDoubleClick = (event) => {
+    // Prevent if clicking on buttons or checkbox
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+        return;
+    }
+    ui.toggleAccountSelected(props.account.id);
+};
+
+const handleTouchStart = (event) => {
+    // Store touch time for double-tap detection
+    const currentTime = Date.now();
+    const tapGap = currentTime - lastTapTime;
+
+    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
+        // Double-tap detected
+        if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
+            event.preventDefault(); // Prevent zoom
+            ui.toggleAccountSelected(props.account.id);
+        }
+    }
+
+    lastTapTime = currentTime;
+};
+
+const handleTouchEnd = (event) => {
+    // Prevent default to avoid potential zoom issues
+    // but only if not interacting with buttons/checkbox
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+        return;
+    }
+};
 </script>

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

@@ -2,7 +2,10 @@
     <Row
         class="relative grid-cols-7 text-white lg:grid-cols-8"
         @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')">
+        @click.right.prevent="ui.setOpenContextMenu('')"
+        @dblclick="handleDoubleClick"
+        @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd">
         <div class="col-span-3 flex lg:col-span-2">
             <Checkbox
                 class="ml-0 mr-4"
@@ -216,4 +219,40 @@ const edit = () => {
     ui.toggleModal("create-profile");
 };
 const deleteProfile = async () => await ui.deleteProfile(props.profile.id);
+
+// Double-click/tap selection
+let lastTapTime = 0;
+const DOUBLE_TAP_DELAY = 300; // ms
+
+const handleDoubleClick = (event) => {
+    // Prevent if clicking on buttons or checkbox
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+        return;
+    }
+    ui.toggleProfileSelected(props.profile.id);
+};
+
+const handleTouchStart = (event) => {
+    // Store touch time for double-tap detection
+    const currentTime = Date.now();
+    const tapGap = currentTime - lastTapTime;
+
+    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
+        // Double-tap detected
+        if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
+            event.preventDefault(); // Prevent zoom
+            ui.toggleProfileSelected(props.profile.id);
+        }
+    }
+
+    lastTapTime = currentTime;
+};
+
+const handleTouchEnd = (event) => {
+    // Prevent default to avoid potential zoom issues
+    // but only if not interacting with buttons/checkbox
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+        return;
+    }
+};
 </script>

package/src/components/Table/Table.vue

@@ -7,15 +7,22 @@
 .table-component {
     @apply flex-col bg-clip-padding rounded relative box-border border border-dark-600 bg-dark-500;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    overflow: auto !important;
+    overflow-x: auto !important;
+    overflow-y: auto !important;
     overscroll-behavior: auto !important;
-    touch-action: auto !important;
+    // Prevent pinch-to-zoom while allowing scrolling
+    touch-action: pan-x pan-y !important;
     max-height: calc(100vh - 200px);
+    -webkit-overflow-scrolling: touch;
 }
 
 .table-component > .grid {
     @apply bg-dark-400;
     border-bottom: 1px solid oklch(0.26 0 0);
+    // Only enforce min-width on desktop, allow mobile to fit screen
+    @media (min-width: 768px) {
+        min-width: 640px;
+    }
 }
 
 /* iPhone landscape mode table optimization */

package/src/components/Tasks/Task.vue

@@ -1,5 +1,10 @@
 <template>
-    <Row class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12" @click="ui.setOpenContextMenu('')">
+    <Row
+        class="relative grid-cols-10 gap-2 text-white lg:grid-cols-12"
+        @click="ui.setOpenContextMenu('')"
+        @dblclick="handleDoubleClick"
+        @touchstart="handleTouchStart"
+        @touchend="handleTouchEnd">
         <div class="col-span-1 flex items-center justify-start lg:col-span-2">
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
@@ -389,6 +394,42 @@ const props = defineProps({
 const contextMenuPosition = ref({});
 const contextMenuRef = ref(null);
 
+// Double-click/tap selection
+let lastTapTime = 0;
+const DOUBLE_TAP_DELAY = 300; // ms
+
+const handleDoubleClick = (event) => {
+    // Prevent if clicking on buttons or checkbox
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+        return;
+    }
+    ui.toggleTaskSelected(props.task.taskId);
+};
+
+const handleTouchStart = (event) => {
+    // Store touch time for double-tap detection
+    const currentTime = Date.now();
+    const tapGap = currentTime - lastTapTime;
+
+    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
+        // Double-tap detected
+        if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
+            event.preventDefault(); // Prevent zoom
+            ui.toggleTaskSelected(props.task.taskId);
+        }
+    }
+
+    lastTapTime = currentTime;
+};
+
+const handleTouchEnd = (event) => {
+    // Prevent default to avoid potential zoom issues
+    // but only if not interacting with buttons/checkbox
+    if (event.target.closest('button') || event.target.closest('.checkbox')) {
+        return;
+    }
+};
+
 // Handle right-click to position context menu
 const handleRightClick = (event) => {
     const menuWidth = 168; // w-42 = 10.5rem = 168px

package/src/components/Tasks/TaskView.vue

@@ -14,17 +14,17 @@
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="flex items-center justify-center col-span-2" v-once>
+            <div class="col-span-2 flex items-center justify-start" v-once>
                 <TicketIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Tickets</h4>
             </div>
-            <div class="flex items-center justify-center col-span-5 md:col-span-4 lg:col-span-5" @click="ui.toggleSort('status')">
+            <div class="col-span-5 md:col-span-4 lg:col-span-5 flex items-center justify-center" @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden 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="flex items-center justify-center col-span-2 lg:col-span-3" v-once>
+            <div class="col-span-2 lg:col-span-3 flex items-center justify-center" v-once>
                 <ClickIcon class="mr-0 lg:mr-3" />
                 <h4 class="hidden lg:flex">Actions</h4>
             </div>
@@ -58,9 +58,6 @@
                 </div>
             </div>
         </div>
-
-        <!-- View Task Modal -->
-        <ViewTask v-if="ui.activeModal === 'view-task' && ui.selectedTaskForView" :task="ui.selectedTaskForView" />
     </div>
 </template>
 <style lang="scss" scoped>
@@ -102,7 +99,6 @@ import { computed, ref, onMounted, onUnmounted } from "vue";
 import { Table, Header } from "@/components/Table";
 import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon, TasksIcon } from "@/components/icons";
 import Task from "./Task.vue";
-import ViewTask from "./ViewTask.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 
@@ -192,7 +188,7 @@ const dynamicTableHeight = computed(() => {
     const filtersAndStatsHeight = windowWidth.value >= 768
         ? (ui.queueStats.show ? 50 : 45) // Desktop: single row
         : (ui.queueStats.show ? 130 : 90); // Mobile: stats row + stacked filters
-    const utilitiesHeight = windowWidth.value <= 768 ? 90 : 160; // Utilities section height (ensure buttons fully visible)
+    const utilitiesHeight = windowWidth.value <= 768 ? 180 : 160; // Increase mobile utilities space to prevent cutoff
     const margins =
         windowWidth.value >= 1024 ? 20 : windowWidth.value <= 480 && windowHeight.value > windowWidth.value ? 8 : 12;
 

package/src/components/Tasks/Utilities.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-if="ui.currentModule == 'TM'">
+    <div class="utilities-wrapper grid grid-cols-1 gap-3 lg:grid-cols-1" v-if="ui.currentModule == 'TM'">
         <div class="lg:justify-self-end">
             <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium mb-1">Utils</h4>
             <div class="flex gap-3 justify-between lg:justify-start">
@@ -23,6 +23,14 @@ import { useUIStore } from "@/stores/ui";
 const ui = useUIStore();
 </script>
 <style lang="scss" scoped>
+.utilities-wrapper {
+    // Add extra margin on mobile to prevent buttons from being cut off
+    @media (max-width: 768px) {
+        margin-top: 1rem;
+        margin-bottom: 1.5rem;
+    }
+}
+
 .utility-btn {
     height: 50px;
 

package/src/components/Tasks/ViewTask.vue

@@ -8,10 +8,10 @@
         <div class="section-card mb-4 mt-4">
             <h3 class="section-title">Task Overview</h3>
             <div class="grid grid-cols-1 gap-3">
-                <div class="info-row copyable" @click="copy(task.taskId)">
+                <div class="info-row" @click="copy(task.taskId)">
                     <span class="info-icon flex items-center justify-center text-base font-bold">#</span>
                     <span class="info-label">Task ID</span>
-                    <span class="info-value">{{ task.taskId }}</span>
+                    <span class="info-value copyable">{{ task.taskId }}</span>
                 </div>
                 <div class="info-row" @click="copy(task.eventId)">
                     <StadiumIcon class="info-icon" />

package/src/components/ui/Modal.vue

@@ -66,6 +66,8 @@ onClickOutside(target, (event) => {
     backdrop-filter: blur(4px);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
+    // Prevent zoom in modals
+    touch-action: pan-y !important;
 }
 
 .component-modal {
@@ -73,6 +75,8 @@ onClickOutside(target, (event) => {
     margin-bottom: 10rem;
     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;
 
     .modal-header {
         @apply flex font-bold text-white;

package/src/components/ui/Navbar.vue

@@ -326,10 +326,10 @@ const toggleMenu = () => {
 const logout = async () => {
     ui.logger.Info("Logging out of session");
     const json = await sendLogout();
-    if (json.error) return ui.showError(json.error);
-    else {
-        ui.setProfile({});
-        router.push("/login");
-    }
+    if (json.error) ui.showError(json.error);
+
+    // Always clear profile and redirect, even if logout request failed
+    ui.setProfile({});
+    router.push("/login");
 };
 </script>

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

@@ -20,7 +20,8 @@
                         class="dropdown-item"
                         :class="i !== 0 ? 'border-t border-dark-650' : ''"
                         v-for="(f, i) in !allowDefault ? props.options : ['', ...props.options]"
-                        @click.stop="chose(f)">
+                        @mousedown.prevent.stop="chose(f)"
+                        @touchstart.prevent.stop="chose(f)">
                         <span class="dropdown-item-text" :class="capitalize ? 'capitalize' : ''">
                             {{ f ? f : props.default }}
                         </span>
@@ -33,11 +34,10 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
 import { DownIcon, CheckmarkIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import { useDropdownPosition } from "@/composables/useDropdownPosition";
-import { useClickOutside } from "@/composables/useClickOutside";
 
 const ui = useUIStore();
 
@@ -78,10 +78,27 @@ const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
     }
 });
 
-useClickOutside(dropdownRef, () => {
-    if (opened.value) {
+// Improved click outside that accounts for teleported menu
+const handleClickOutside = (event) => {
+    if (!opened.value) return;
+
+    // Check if click is outside both the dropdown trigger and the menu
+    const clickedDropdown = dropdownRef.value?.contains(event.target);
+    const clickedMenu = event.target.closest('.dropdown-menu-portal');
+
+    if (!clickedDropdown && !clickedMenu) {
         ui.setCurrentDropdown("");
     }
+};
+
+onMounted(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('touchstart', handleClickOutside);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('mousedown', handleClickOutside);
+    document.removeEventListener('touchstart', handleClickOutside);
 });
 
 const toggleOpened = () => {
@@ -177,6 +194,7 @@ const chose = (f) => {
     -webkit-overflow-scrolling: touch !important;
     scrollbar-width: none;
     -ms-overflow-style: none;
+    z-index: 1000;
 }
 
 .dropdown-menu-portal::-webkit-scrollbar {

package/src/views/Console.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="console-page">
         <h4 class="mb-2 flex items-center gap-2 pt-5 text-sm font-bold text-white lg:mt-1">
             Console
             <ConsoleIcon />
@@ -94,7 +94,7 @@
 
             <Smoothie
                 :weight="0.2"
-                class="console scrollable smooth-scroll overflow-y-auto overflow-x-hidden font-mono text-white"
+                class="console scrollable smooth-scroll overflow-y-auto overflow-x-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="mt-3 flex justify-between md:hidden">
+            <div class="console-switches mt-4 mb-6 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>
@@ -138,13 +138,44 @@
     </div>
 </template>
 <style lang="scss" scoped>
+.console-page {
+    // Add generous bottom padding on mobile to prevent switch cutoff
+    @media (max-width: 768px) {
+        padding-bottom: 4rem;
+        margin-bottom: 2rem;
+    }
+
+    @media (max-width: 480px) and (orientation: portrait) {
+        padding-bottom: 6rem;
+        margin-bottom: 3rem;
+    }
+}
+
+.console-switches {
+    @media (max-width: 480px) and (orientation: portrait) {
+        margin-top: 1.5rem !important;
+        margin-bottom: 4rem !important;
+    }
+}
+
 .console {
     @apply relative rounded border-2 border-dark-550 bg-dark-400 p-2 lg:p-5;
     height: calc(100vh - 18rem);
     scrollbar-width: thin;
     scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
 
-    @media (min-width: 768px) {
+    // Use fixed height on mobile portrait to ensure switches are visible
+    @media (max-width: 768px) {
+        max-height: 60vh;
+        height: auto;
+    }
+
+    @media (max-width: 480px) and (orientation: portrait) {
+        max-height: 50vh;
+        height: auto;
+    }
+
+    @media (min-width: 769px) and (max-width: 1023px) {
         height: calc(100vh - 16rem);
     }
 

package/src/views/Tasks.vue

@@ -126,6 +126,9 @@
       <Utilities class="utilities-section" />
     </div>
 
+    <!-- View Task Modal -->
+    <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'"
@@ -234,6 +237,7 @@
 import { computed, onMounted, ref } from "vue";
 import { DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
+import ViewTask from "@/components/Tasks/ViewTask.vue";
 import Utilities from "@/components/Tasks/Utilities.vue";
 import CreateTaskTM from "@/components/Tasks/CreateTaskTM.vue";
 import CreateTaskAXS from "@/components/Tasks/CreateTaskAXS.vue";

package/vite.config.js

@@ -7,7 +7,7 @@ const pkg = JSON.parse(readFileSync("./package.json", "utf-8"));
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    cacheDir: './node_modules/.vite',
+    cacheDir: "./node_modules/.vite",
     build: {
         rollupOptions: {
             output: {