@necrolab/dashboard 0.5.1 → 0.5.3

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,7 +7,12 @@
             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" />
         <title>Necro Lab - Dashboard</title>
         <!-- DNS prefetch for external resources -->
         <link rel="dns-prefetch" href="https://fonts.googleapis.com" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@necrolab/dashboard",
-    "version": "0.5.1",
+    "version": "0.5.3",
     "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/assets/css/main.scss

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   NECRO DASHBOARD - MAIN STYLES
+   NECRO DASHBOARD
    Modular SCSS architecture with @use imports
    ========================================================================== */
 
@@ -47,14 +47,14 @@ img {
 
 /* Global icon color consistency */
 svg {
-    color: oklch(0.90 0 0) !important;
+    color: oklch(0.9 0 0) !important;
 }
 
 /* For stroke icons (Eye, etc) - stroke on svg element */
 svg[stroke] path,
 svg[stroke] circle,
 svg[stroke] line {
-    stroke: oklch(0.90 0 0) !important;
+    stroke: oklch(0.9 0 0) !important;
 }
 
 /* For filled icons with explicit fill */
@@ -62,7 +62,7 @@ svg path[fill]:not([fill="none"]),
 svg circle[fill]:not([fill="none"]),
 svg rect[fill]:not([fill="none"]),
 svg polygon[fill]:not([fill="none"]) {
-    fill: oklch(0.90 0 0) !important;
+    fill: oklch(0.9 0 0) !important;
 }
 
 /* For filled icons without explicit fill attribute */
@@ -70,7 +70,7 @@ svg:not([stroke]):not([fill="none"]) path:not([fill]),
 svg:not([stroke]):not([fill="none"]) circle:not([fill]),
 svg:not([stroke]):not([fill="none"]) rect:not([fill]),
 svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
-    fill: oklch(0.90 0 0) !important;
+    fill: oklch(0.9 0 0) !important;
 }
 
 /* ==========================================================================
@@ -82,31 +82,32 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 }
 
 .status-indicator {
-    @apply w-2 h-2 rounded-full flex-shrink-0;
+    @apply h-2 w-2 flex-shrink-0 rounded-full;
     min-width: 4px;
     min-height: 4px;
 }
 
 .mobile-icons {
-    @apply flex lg:hidden ml-auto items-center gap-x-2;
+    @apply ml-auto flex items-center gap-x-2 lg:hidden;
 
     button {
-        @apply w-8 h-8 flex items-center justify-center rounded transition-all duration-150;
+        @apply flex h-8 w-8 items-center justify-center rounded transition-all duration-150;
         background-color: oklch(0.2046 0 0);
         border: 2px solid oklch(0.2809 0 0);
         color: oklch(0.82 0 0);
 
-        &:hover, &:active {
+        &:hover,
+        &:active {
             border-color: oklch(0.72 0.15 145);
             outline: 1px solid oklch(0.72 0.15 145);
             outline-offset: 0;
-            color: oklch(0.90 0 0);
+            color: oklch(0.9 0 0);
         }
     }
 }
 
 .loading-spinner {
-    @apply animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full;
+    @apply h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent;
 }
 
 /* ==========================================================================
@@ -114,7 +115,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
    ========================================================================== */
 
 .label-override {
-    @apply flex items-center text-xs mb-2;
+    @apply mb-2 flex items-center text-xs;
     color: oklch(0.65 0 0);
 
     svg {
@@ -128,10 +129,10 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 .task-switches {
     h4 {
-        color: oklch(0.90 0 0);
+        color: oklch(0.9 0 0);
         font-size: 0.8125rem;
         font-weight: 500;
-        @apply text-center flex items-center gap-x-2 mx-auto mb-2;
+        @apply mx-auto mb-2 flex items-center gap-x-2 text-center;
     }
 
     .switch-wrapper {
@@ -141,7 +142,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     svg {
         width: 15px !important;
         height: 15px !important;
-        color: oklch(0.90 0 0) !important;
+        color: oklch(0.9 0 0) !important;
         margin-left: 0.25rem !important;
     }
 }
@@ -223,11 +224,11 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 @screen md {
     .btn-primary,
     .btn-secondary {
-        @apply text-sm px-3 py-1.5;
+        @apply px-3 py-1.5 text-sm;
     }
 
     .btn-action {
-        @apply text-sm px-6 h-12;
+        @apply h-12 px-6 text-sm;
         min-height: 48px;
     }
 
@@ -241,7 +242,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 @screen mobile-portrait {
     .btn-action {
-        @apply text-base px-8 h-14;
+        @apply h-14 px-8 text-base;
         min-height: 56px;
         font-weight: 600;
         border-radius: 8px;
@@ -257,7 +258,7 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 
 @screen mobile-landscape {
     .btn-action {
-        @apply text-base px-8 h-14;
+        @apply h-14 px-8 text-base;
         min-height: 56px;
         font-weight: 600;
     }

package/src/components/Auth/LoginForm.vue

@@ -1,31 +1,42 @@
 <template>
     <div class="form-section">
         <!-- Username -->
-        <div class="input-wrapper mb-4">
-            <label class="label-override">
-                <span>Username</span>
-                <ProfileIcon class="ml-2" />
-            </label>
-            <div class="input-default">
-                <input v-model="user" placeholder="Username" />
+        <div class="input-container mb-3">
+            <div class="flex items-center gap-2">
+                <ProfileIcon class="w-4 h-4" />
+                <span class="text-light-300 font-medium text-sm">Username</span>
+            </div>
+            <div class="flex-1 flex items-center">
+                <input
+                    type="text"
+                    class="login-input"
+                    v-model="user"
+                />
             </div>
         </div>
         <!-- Password -->
-        <div class="input-wrapper">
-            <label class="label-override">
-                <span>Password</span>
-                <KeyIcon class="ml-2" />
-            </label>
-            <div class="input-default">
-                <input v-model="password" type="password" placeholder="Password" />
+        <div class="input-container mb-4">
+            <div class="flex items-center gap-2">
+                <KeyIcon class="w-4 h-4" />
+                <span class="text-light-300 font-medium text-sm">Password</span>
+            </div>
+            <div class="flex-1 flex items-center">
+                <input
+                    type="password"
+                    class="login-input"
+                    v-model="password"
+                />
             </div>
         </div>
         <button
-            class="bg-green-400 hover:bg-green-500 smooth-hover text-white font-medium px-4 py-2 rounded transition-all duration-150 w-full mt-4 h-10 flex items-center justify-center"
+            class="login-btn mt-6 mx-auto"
             @click="login()"
             :disabled="buttonDisabled"
         >
             <span v-if="!buttonDisabled">Login</span>
+            <svg v-if="!buttonDisabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
+                <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3"/>
+            </svg>
             <div v-else class="loading-spinner"></div>
         </button>
     </div>
@@ -56,43 +67,65 @@ async function login() {
 </script>
 
 <style lang="scss" scoped>
-.label-override {
-    @apply flex items-center text-sm mb-2;
-    color: #e1e1e4 !important;
+.login-btn {
+    @apply flex items-center justify-center gap-2 rounded-lg transition-all duration-150;
+    background: oklch(0.72 0.15 145);
+    border: 2px solid oklch(0.72 0.15 145);
+    color: oklch(1 0 0);
+    height: 3rem;
+    width: 12rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+
+    &:hover:not(:disabled) {
+        background: oklch(0.68 0.15 145);
+        border-color: oklch(0.68 0.15 145);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px oklch(0.72 0.15 145 / 0.3);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: 0 2px 4px oklch(0.72 0.15 145 / 0.2);
+    }
 
-    svg {
-        width: 16px;
-        height: 16px;
-        path {
-            fill: #e1e1e4 !important;
-        }
+    &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
     }
 }
 
-.input-default {
-    @apply bg-dark-400 border border-dark-650 rounded-lg px-4 py-2 flex items-center;
-    min-height: 40px;
+.input-container {
+    @apply text-white bg-dark-500 px-3 rounded-lg border-2 border-dark-550 flex items-center justify-between h-11;
+    overflow: visible;
+    transition: border-color 0.15s ease;
 
-    input {
-        @apply bg-transparent border-none outline-none w-full text-white;
-        &::placeholder {
-            color: oklch(0.65 0 0);
-        }
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145) !important;
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
     }
 }
 
-@media (max-height: 500px) and (orientation: landscape) {
-    .label-override {
-        @apply text-xs mb-1;
-        
-        svg {
-            width: 14px;
-            height: 14px;
-        }
+.login-input {
+    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1;
+
+    &:focus {
+        @apply outline-none border-0 shadow-none bg-transparent;
+    }
+
+    &:hover:not(:focus) {
+        background: transparent;
     }
 
-    .input-default {
-        min-height: 36px;
+    &::placeholder {
+        color: oklch(0.50 0 0);
     }
 }
 </style>

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/ReconnectIndicator.vue

@@ -37,7 +37,7 @@
 
 <script setup>
 import { ref, onMounted, onUnmounted } from "vue";
-import logoIcon from "/android-chrome-192x192.png";
+import logoIcon from "/reconnect-logo.png";
 
 const dotIndex = ref(0);
 const progressWidth = ref(0);
@@ -119,7 +119,7 @@ const props = defineProps({
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(26, 27, 30, 0.98);
+    background: oklch(0.1822 0 0 / 0.98);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
 }
@@ -269,7 +269,7 @@ const props = defineProps({
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.2), transparent);
     animation: shimmer 2s ease-in-out infinite;
 }
 

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/Login.vue

@@ -1,10 +1,9 @@
 <template>
     <div class="login-container" v-once>
         <div class="login-card">
-            <div class="flex justify-center mb-8">
-                <img src="@/assets/img/logo_trans.png" class="h-16 object-cover" alt="Logo: Necro" />
+            <div class="mb-10 flex justify-center">
+                <img src="@/assets/img/logo_trans.png" class="mb-3 h-16 object-cover" alt="Logo: NecroLab" />
             </div>
-            <h2 class="text-l text-white text-center font-bold mb-6">Please login to proceed</h2>
 
             <LoginForm />
         </div>
@@ -15,7 +14,7 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
 <style lang="scss" scoped>
 .login-container {
-    @apply flex flex-col items-center min-h-screen px-4;
+    @apply flex min-h-screen flex-col items-center px-4;
     margin-top: 3vh;
 
     // Mobile devices
@@ -33,7 +32,7 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
 }
 
 .login-card {
-    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-xl;
+    @apply rounded-lg border border-dark-650 bg-dark-400 shadow-xl;
     backdrop-filter: blur(10px);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     width: 100%;
@@ -52,7 +51,7 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
         margin: 0.25rem 0;
 
         h2 {
-            @apply text-lg mb-2;
+            @apply mb-2 text-lg;
         }
 
         .flex.justify-center {
@@ -79,11 +78,11 @@ import LoginForm from "@/components/Auth/LoginForm.vue";
 // Title responsive sizing
 .login-card h2 {
     @media (max-width: 480px) {
-        @apply text-lg mb-3;
+        @apply mb-3 text-lg;
     }
 
     @media (orientation: landscape) {
-        @apply text-base mb-2;
+        @apply mb-2 text-base;
     }
 }
 </style>

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: {