@necrolab/dashboard 0.5.24 → 0.5.26

package/index.html

@@ -14,6 +14,20 @@
         <meta name="description" content="Necro Lab - dashboard" />
         <meta name="darkreader-lock" />
         <meta name="color-scheme" content="dark" />
+        <meta name="supported-color-schemes" content="dark" />
+        <!-- Prevent Noir and other dark mode extensions from modifying the site -->
+        <meta name="noir" content="disabled" />
+        <meta name="nighteye" content="disabled" />
+        <style>
+            /* Lock color scheme to prevent iOS extensions from overriding */
+            :root {
+                color-scheme: dark only;
+                -webkit-color-scheme: dark;
+            }
+            html, body {
+                color-scheme: dark only !important;
+            }
+        </style>
         <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.24",
+    "version": "0.5.26",
     "type": "module",
     "scripts": {
         "build": "rm -rf dist && vite build && npx workbox-cli generateSW workbox-config.cjs",

package/src/App.vue

@@ -18,8 +18,8 @@
                 <ReconnectIndicator :message="ui.spinnerMessage" />
             </div>
             <div v-else key="main-components" class="flex">
-                <Navbar v-if="layout == 'dashboard'" class="fixed" />
-                <div class="router-wrapper w-full">
+                <Navbar v-if="layout == 'dashboard'" ref="navbarRef" class="fixed" />
+                <div class="router-wrapper w-full" :style="routerWrapperStyle">
                     <router-view v-slot="{ Component, route }">
                         <transition name="page-transition" mode="out-in">
                             <component
@@ -36,7 +36,7 @@
 
 <script setup>
 import { storeToRefs } from "pinia";
-import { ref, computed } from "vue";
+import { ref, computed, nextTick, onMounted, onUnmounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import Navbar from "@/components/ui/Navbar.vue";
 import { useUIStore } from "@/stores/ui";
@@ -50,6 +50,8 @@ const ui = useUIStore();
 const { showSpinner: spinner } = storeToRefs(ui);
 const router = useRouter();
 const isLoading = ref(false);
+const navbarRef = ref(null);
+let navbarResizeObserver = null;
 
 // Initialize zoom prevention (all browsers)
 const { KEY_CODES } = useZoomPrevention();
@@ -78,6 +80,71 @@ document.onkeydown = function (evt) {
 if (!window.location.href.includes(":5173")) ui.startSpinner("Loading...");
 
 const layout = computed(() => router.currentRoute.value.meta.layout);
+const routerWrapperStyle = computed(() => ({
+    paddingTop: layout.value === "dashboard" ? "var(--dashboard-navbar-height, 80px)" : "0px",
+    paddingLeft: "var(--safe-area-left, 0px)",
+    paddingRight: "var(--safe-area-right, 0px)",
+    paddingBottom: "var(--safe-area-bottom, 0px)"
+}));
+
+const updateNavbarHeight = () => {
+    if (layout.value !== "dashboard") {
+        document.documentElement.style.setProperty("--dashboard-navbar-height", "0px");
+        return;
+    }
+
+    const navbarElement = navbarRef.value?.$el;
+    if (!navbarElement) return;
+
+    const height = Math.ceil(navbarElement.getBoundingClientRect().height);
+    if (height > 0) {
+        document.documentElement.style.setProperty("--dashboard-navbar-height", `${height}px`);
+    }
+};
+
+const scheduleNavbarHeightUpdate = () => {
+    requestAnimationFrame(updateNavbarHeight);
+};
+
+const syncNavbarObserver = () => {
+    if (!navbarResizeObserver) return;
+
+    navbarResizeObserver.disconnect();
+    const navbarElement = navbarRef.value?.$el;
+    if (layout.value === "dashboard" && navbarElement) {
+        navbarResizeObserver.observe(navbarElement);
+    }
+};
+
+watch(
+    [layout, () => navbarRef.value?.$el],
+    () => {
+        nextTick(() => {
+            syncNavbarObserver();
+            scheduleNavbarHeightUpdate();
+        });
+    },
+    { immediate: true }
+);
+
+onMounted(() => {
+    scheduleNavbarHeightUpdate();
+    window.addEventListener("resize", scheduleNavbarHeightUpdate, { passive: true });
+    window.visualViewport?.addEventListener("resize", scheduleNavbarHeightUpdate);
+
+    if (typeof ResizeObserver !== "undefined") {
+        navbarResizeObserver = new ResizeObserver(scheduleNavbarHeightUpdate);
+        syncNavbarObserver();
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener("resize", scheduleNavbarHeightUpdate);
+    window.visualViewport?.removeEventListener("resize", scheduleNavbarHeightUpdate);
+    navbarResizeObserver?.disconnect();
+    navbarResizeObserver = null;
+    document.documentElement.style.setProperty("--dashboard-navbar-height", "0px");
+});
 </script>
 
 <style lang="scss">
@@ -148,7 +215,6 @@ const layout = computed(() => router.currentRoute.value.meta.layout);
 
 /* Router wrapper */
 .router-wrapper {
-    @apply pt-16 lg:pt-20;
     z-index: 0;
 }
 

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

@@ -5,14 +5,21 @@
 
 .page-header {
     @apply flex items-center justify-between;
-    padding-top: 1.5rem;
+    padding-top: 0.75rem;
     padding-bottom: 0.5rem;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
 
     .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;
+        min-width: 0;
+        max-width: 60%;
+        white-space: nowrap;
+        overflow: hidden;
 
         svg, img {
             width: 17px;
@@ -74,8 +81,6 @@
     }
 
     @screen sm {
-        padding-top: 1rem;
-
         .page-header-card {
             gap: 0.625rem;
             padding: 0.5rem 0.875rem;
@@ -111,9 +116,3 @@
         }
     }
 }
-
-@media (display-mode: standalone) {
-    .page-header {
-        padding-top: 3.5rem !important;
-    }
-}

package/src/assets/css/components/search-groups.scss

@@ -11,6 +11,7 @@
     background: var(--color-bg-input);
     transition: all 0.15s ease;
     display: flex;
+    position: relative;
 
     .tag-toggle,
     .dropdown,
@@ -33,18 +34,65 @@
     .tag-toggle {
         padding: 0;
         border: 0 !important;
+        flex-shrink: 0 !important;
+        min-width: max-content !important;
     }
 
     .tag-toggle button {
         font-size: 0.875rem;
         padding: 0.5rem 0.75rem;
-        min-width: fit-content;
+        min-width: fit-content !important;
         border: 0 !important;
+        white-space: nowrap;
+        flex-shrink: 0 !important;
+    }
+
+    /* iPad - prevent TagToggle from being compressed */
+    @media (min-width: 768px) and (max-width: 1024px) {
+        .tag-toggle {
+            flex-shrink: 0 !important;
+            min-width: max-content !important;
+        }
+
+        .tag-toggle button {
+            padding: 0.375rem 0.5rem;
+            font-size: 0.75rem;
+            flex-shrink: 0 !important;
+        }
+
+        input {
+            flex: 0 1 auto;
+            min-width: 100px !important;
+        }
     }
 
     .dropdown {
         width: 120px !important;
         min-width: 120px !important;
+        overflow: visible !important;
+        position: static !important;
+
+        /* iPad responsive - ensure arrow is visible */
+        @media (min-width: 768px) and (max-width: 1024px) {
+            width: 140px !important;
+            min-width: 140px !important;
+            flex-shrink: 0;
+        }
+
+        /* Mobile - more flexible */
+        @media (max-width: 767px) {
+            width: auto !important;
+            min-width: 90px !important;
+            max-width: 110px !important;
+            flex-shrink: 1;
+        }
+    }
+
+    /* Ensure dropdown menu portal isn't clipped */
+    .dropdown-menu-portal,
+    .dropdown-content-portal {
+        overflow: visible !important;
+        z-index: 9999 !important;
     }
 
     .dropdown:not(.transparent):focus-within,

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

@@ -78,43 +78,22 @@
 /* Console main container with responsive heights */
 .console-main {
     @apply relative overflow-x-auto overflow-y-auto rounded border-2 border-dark-550 bg-dark-400 p-2 font-mono text-white;
-    height: calc(100vh - 20rem);
-    max-height: calc(100vh - 20rem);
     scroll-padding: 0.5rem;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     min-height: 12rem !important;
     touch-action: pan-y pan-up pan-down;
 
-    @screen md {
-        height: calc(100vh - 18rem);
-        max-height: calc(100vh - 18rem);
-    }
-
     @screen lg {
-        height: calc(100vh - 16rem);
-        max-height: calc(100vh - 16rem);
         padding: 1.25rem;
     }
 
     @screen mobile-portrait {
-        height: calc(100vh - 22rem);
-        max-height: calc(100vh - 22rem);
         overflow: auto;
         padding: 0.25rem;
         font-size: 0.75rem;
         line-height: 1rem;
     }
-
-    @media (orientation: landscape) and (max-width: 1023px) {
-        height: calc(100vh - 12rem);
-        max-height: calc(100vh - 12rem);
-    }
-
-    @media (max-width: 767px) and (orientation: landscape) {
-        height: auto;
-        max-height: 65vh;
-    }
 }
 
 /* FilterBuilder action button */

package/src/assets/css/main.scss

@@ -22,6 +22,13 @@
    BODY LAYOUT & BACKGROUND
    ========================================================================== */
 
+:root {
+    --safe-area-top: 0px;
+    --safe-area-right: 0px;
+    --safe-area-bottom: 0px;
+    --safe-area-left: 0px;
+}
+
 html {
     @apply bg-dark-300;
     min-height: 100vh;

package/src/components/Console/ConsoleToolbar.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="mb-3 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+        <div class="mb-2 flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
             <div class="flex flex-col gap-3 md:flex-1 md:flex-row md:items-center">
                 <div class="w-full md:w-64">
                     <Dropdown
@@ -79,7 +79,7 @@
                 </button>
             </div>
         </div>
-        <div class="mb-6 mt-4 flex justify-between md:hidden mobile-portrait:mb-16 mobile-portrait:mt-6">
+        <div class="mb-2 mt-2 flex justify-between gap-2 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>
                 <Switch class="scale-75" :model-value="filteredLogs" @update:model-value="$emit('update:filteredLogs', $event)" />

package/src/components/Editors/AdminFileEditor.vue

@@ -2,18 +2,19 @@
     <div class="admin-editor-section" :class="{ 'landscape-hidden': isHidden }" v-if="!isHidden">
         <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Admin Editor</h5>
         <div class="flex items-center gap-2 w-full">
-            <div class="unified-search-group flex flex-1 dropdown-container z-dropdown-high lg:flex-initial lg:min-w-64">
-                <Dropdown
-                    class="admin-file-dropdown flex-1"
-                    default="Select a file"
-                    :onClick="loadFile"
-                    :options="availableFiles"
-                    :allowDefault="false"
-                    :includeAdjacentButtons="true"
-                    rightAmount="right-1" />
+            <div class="admin-file-selector flex-1 lg:flex-initial lg:w-64 dropdown-container z-dropdown-high">
+                <div class="relative min-w-0 flex-grow">
+                    <Dropdown
+                        class="admin-file-dropdown w-full"
+                        default="Select a file"
+                        :onClick="loadFile"
+                        :options="availableFiles"
+                        :allowDefault="false"
+                        :includeAdjacentButtons="true"
+                        rightAmount="right-1" />
+                </div>
                 <button
-                    class="refresh-button flex items-center justify-center w-9 h-10 flex-shrink-0 text-white bg-dark-400 hover:bg-dark-450"
-                    style="transition: all 0.2s ease"
+                    class="refresh-button"
                     @click="$emit('refresh-files')"
                     title="Refresh file list">
                     <ReloadIcon class="refresh-icon icon-md" />
@@ -180,6 +181,40 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.admin-file-selector {
+    @apply flex items-center overflow-hidden rounded-lg border-2 border-dark-550 bg-dark-500;
+    min-height: 40px;
+    transition: border-color 0.15s ease;
+}
+
+.admin-file-selector:hover {
+    @apply border-dark-650;
+}
+
+.admin-file-selector:focus-within {
+    border-color: var(--color-primary);
+    outline: 1px solid var(--color-primary);
+    outline-offset: 0;
+}
+
+:deep(.admin-file-dropdown.dropdown) {
+    @apply h-10 border-0 rounded-none bg-transparent shadow-none;
+    padding: 0 0.75rem !important;
+}
+
+:deep(.admin-file-dropdown .dropdown-display) {
+    padding: 0;
+}
+
+.refresh-button {
+    @apply flex h-10 w-10 flex-shrink-0 items-center justify-center border-l border-dark-550 bg-dark-400 text-white;
+    transition: all 0.2s ease;
+}
+
+.refresh-button:hover {
+    @apply border-dark-625 bg-dark-450;
+}
+
 .editor-action-btn {
     @apply flex items-center justify-center w-9 h-9 rounded border-2 border-dark-550 bg-dark-400 text-white;
     transition: all 0.2s ease;

package/src/components/Editors/TagToggle.vue

@@ -1,8 +1,9 @@
 <template>
     <button
         @click="increase"
-        class="h-10 px-1 text-white bg-dark-500 relative overflow-hidden"
+        class="h-10 px-3 text-white bg-dark-500 relative overflow-hidden"
         :class="noBorder ? 'border-0' : 'border-2 border-dark-550'"
+        style="min-width: max-content;"
     >
         <span v-if="sortOptions[currentOpt % sortOptions.length] === 'Enabled'"
             ><img class="mx-auto" height="16px" width="14px" src="@/assets/img/square_check.svg"

package/src/components/Filter/Filter.vue

@@ -300,7 +300,7 @@ props.filterBuilder.onUpdate(() => {
 
 <style scoped>
 .filter-card {
-    @apply bg-dark-500 border border-dark-625/30 relative mb-2 transition-colors duration-200;
+    @apply bg-dark-500 border border-dark-625/30 relative transition-colors duration-200;
 }
 
 .filter-card:hover:not(.expanded-filter) {

package/src/components/ui/Navbar.vue

@@ -1,18 +1,34 @@
 <template>
     <div class="navbar" :class="{ 'force-z': menuOpen }">
-        <div :class="['component-container ios-wrapper flex items-center relative px-3 lg:px-4', { 'ios-wrapper': landscapeIos }]">
+        <div
+            :class="[
+                'component-container ios-wrapper relative flex items-center px-3 lg:px-4',
+                { 'ios-wrapper': landscapeIos }
+            ]">
             <router-link to="/">
-                <img src="@/assets/img/logo_trans.png" class="h-6 lg:h-8 mr-4 z-30 object-cover cursor-pointer" alt="Logo: Necro" />
+                <img
+                    src="@/assets/img/logo_trans.png"
+                    class="z-30 mr-4 h-6 cursor-pointer object-cover lg:h-8"
+                    alt="Logo: Necro" />
             </router-link>
             <ul class="hidden lg:flex">
                 <li>
-                    <router-link to="/"><TasksIcon /><span class="hidden xl:block">Tasks</span></router-link>
+                    <router-link to="/">
+                        <TasksIcon />
+                        <span class="hidden xl:block">Tasks</span>
+                    </router-link>
                 </li>
                 <li>
-                    <router-link to="/editor"><EditIcon /><span class="hidden xl:block">Editor</span></router-link>
+                    <router-link to="/editor">
+                        <EditIcon />
+                        <span class="hidden xl:block">Editor</span>
+                    </router-link>
                 </li>
                 <li v-if="ui.profile?.admin">
-                    <router-link to="/console"><ConsoleIcon /><span class="hidden xl:block">Console</span></router-link>
+                    <router-link to="/console">
+                        <ConsoleIcon />
+                        <span class="hidden xl:block">Console</span>
+                    </router-link>
                 </li>
                 <li>
                     <router-link to="/profiles">
@@ -27,45 +43,60 @@
                     </router-link>
                 </li>
                 <li>
-                    <router-link to="/filter"><FilterIcon /><span class="hidden xl:block">Filter</span></router-link>
+                    <router-link to="/filter">
+                        <FilterIcon />
+                        <span class="hidden xl:block">Filter</span>
+                    </router-link>
                 </li>
             </ul>
 
-            <button class="hidden lg:block ml-auto mr-4 smooth-hover" @click="logout()" aria-label="Logout">
+            <button class="smooth-hover ml-auto mr-4 hidden lg:block" @click="logout()" aria-label="Logout">
                 <LogoutIcon />
             </button>
-            <h4 v-if="ui.profile?.name" class="hidden lg:block text-white text-sm font-medium">
-                <span class="text-lightgray">Logged in as </span>
-                <span class="font-black"> {{ ui.profile?.name }}</span>
+            <h4 v-if="ui.profile?.name" class="hidden text-sm font-medium text-white lg:block">
+                <span class="text-lightgray">Logged in as</span>
+                <span class="ml-1 font-black">{{ ui.profile?.name }}</span>
             </h4>
-            <h4 v-else class="hidden lg:block text-white text-sm font-medium">
-                <span class="text-lightgray">Loading </span>
+            <h4 v-else class="hidden text-sm font-medium text-white lg:block">
+                <span class="text-lightgray">Loading</span>
             </h4>
             <img
                 v-if="ui.profile?.profilePicture"
                 :src="ui.profile?.profilePicture"
                 alt="Profile Picture"
-                class="size-10 rounded-full hidden lg:block mx-4"
-            />
-            <div v-else class="size-10 rounded-full hidden lg:block mx-4 bg-dark-400" />
-            <CountryChooser class="hidden lg:block" />
+                class="ipad-safe-top mx-4 hidden size-10 rounded-full lg:block" />
+            <div v-else class="ipad-safe-top mx-4 hidden size-10 rounded-full bg-dark-400 lg:block" />
+            <CountryChooser class="ipad-safe-top hidden lg:block" />
 
-            <button class="flex lg:hidden ml-auto z-30" @click="toggleMenu" aria-label="Toggle navigation menu" :aria-expanded="menuOpen">
+            <button
+                class="z-30 -m-2 ml-auto flex p-2 lg:hidden"
+                @click="toggleMenu"
+                aria-label="Toggle navigation menu"
+                :aria-expanded="menuOpen">
                 <MenuIcon />
             </button>
         </div>
         <transition name="fade">
-            <div class="mobile-menu flex lg:hidden flex-col z-30" v-if="menuOpen">
-                <CountryChooser class="mx-auto landscape:block hidden mt-4" />
-                <ul class="flex landscape:grid grid-cols-3 mx-auto mt-12 flex-col">
+            <div class="mobile-menu z-30 flex flex-col lg:hidden" v-if="menuOpen">
+                <CountryChooser class="mx-auto mt-4 hidden landscape:block" />
+                <ul class="mx-auto mt-12 flex grid-cols-3 flex-col landscape:grid">
                     <li @click="toggleMenu">
-                        <router-link to="/"><TasksIcon />Tasks</router-link>
+                        <router-link to="/">
+                            <TasksIcon />
+                            Tasks
+                        </router-link>
                     </li>
                     <li @click="toggleMenu">
-                        <router-link to="/editor"><EditIcon />Editor</router-link>
+                        <router-link to="/editor">
+                            <EditIcon />
+                            Editor
+                        </router-link>
                     </li>
                     <li v-if="ui.profile?.admin" @click="toggleMenu">
-                        <router-link to="/console"><ConsoleIcon />Console</router-link>
+                        <router-link to="/console">
+                            <ConsoleIcon />
+                            Console
+                        </router-link>
                     </li>
                     <li @click="toggleMenu">
                         <router-link to="/profiles">
@@ -80,22 +111,25 @@
                         </router-link>
                     </li>
                     <li @click="toggleMenu">
-                        <router-link to="/filter"><FilterIcon />Filter</router-link>
+                        <router-link to="/filter">
+                            <FilterIcon />
+                            Filter
+                        </router-link>
                     </li>
                 </ul>
-                <CountryChooser class="mx-auto block landscape:hidden mb-auto" />
-                <div class="flex mx-auto items-center landscape:mb-0">
+                <CountryChooser class="mx-auto mb-auto block landscape:hidden" />
+                <div class="mx-auto flex items-center landscape:mb-0">
                     <button class="mr-4" @click="logout()" aria-label="Logout">
                         <LogoutIcon />
                     </button>
-                    <h4 class="text-white text-sm font-medium mr-4">
-                        <span class="text-lightgray">Logged in as </span>
-                        <span class="font-black"> {{ ui.profile?.name }}</span>
+                    <h4 class="mr-4 text-sm font-medium text-white">
+                        <span class="text-lightgray">Logged in as</span>
+                        <span class="ml-1 font-black">{{ ui.profile?.name }}</span>
                     </h4>
                     <img :src="ui.profile?.profilePicture" alt="" class="size-10 rounded-full" />
                 </div>
 
-                <div class="mx-auto mt-6 mb-14 flex gap-3 items-center">
+                <div class="mx-auto mb-14 mt-6 flex items-center gap-3">
                     <div class="version-badge">
                         <span class="version-label">Dashboard</span>
                         <span class="version-number">v{{ dashVersion }}</span>
@@ -111,25 +145,27 @@
 </template>
 <style lang="scss" scoped>
 .navbar {
-    @apply border-b py-5 fixed w-full;
+    @apply fixed w-full border-b py-5;
     top: 0;
     left: 0;
     z-index: 1000;
-    background: theme('colors.dark.300 / 0.95');
+    background: theme("colors.dark.300 / 0.95");
     backdrop-filter: blur(23px);
     -webkit-backdrop-filter: blur(23px);
-    border-color: theme('colors.border');
+    border-color: theme("colors.border");
 
     // Consistent padding base
-    padding-top: 1.25rem;
+    padding-top: calc(1.1rem + var(--safe-area-top, 0px));
     padding-bottom: 1.25rem;
+    padding-left: var(--safe-area-left, 0px);
+    padding-right: var(--safe-area-right, 0px);
 
     // Only add safe area top padding for portrait notch devices
-    @supports (padding-top: env(safe-area-inset-top)) {
-        @media (max-device-width: 430px) and (orientation: portrait) {
-            padding-top: max(1.25rem, env(safe-area-inset-top));
-        }
-    }
+    // @supports (padding-top: env(safe-area-inset-top)) {
+    //     @media (max-device-width: 430px) and (orientation: portrait) {
+    //         padding-top: max(1.25rem, env(safe-area-inset-top));
+    //     }
+    // }
 
     // Extend background above viewport for notch area with theme gradient
     &::before {
@@ -139,7 +175,7 @@
         left: 0;
         right: 0;
         height: 100px;
-        background: theme('colors.dark.300');
+        background: theme("colors.dark.300");
         backdrop-filter: blur(8px);
         -webkit-backdrop-filter: blur(8px);
         z-index: -1;
@@ -158,7 +194,7 @@
         }
 
         li a {
-            @apply flex text-white text-sm items-center rounded-lg;
+            @apply flex items-center rounded-lg text-sm text-white;
             height: 40px;
             border: 1px solid transparent;
             border-left: 3px solid transparent;
@@ -170,16 +206,16 @@
             }
 
             &.router-link-exact-active {
-                border-bottom: 2px solid theme('colors.primary');
-                color: theme('colors.primary');
-                background: theme('colors.primary / 0.08');
+                border-bottom: 2px solid theme("colors.primary");
+                color: theme("colors.primary");
+                background: theme("colors.primary / 0.08");
                 margin-bottom: -2px;
 
                 // Mobile styling
                 @media (max-width: 1023px) {
-                    border: 2px solid theme('colors.primary');
-                    color: theme('colors.primary');
-                    background: theme('colors.primary / 0.08');
+                    border: 2px solid theme("colors.primary");
+                    color: theme("colors.primary");
+                    background: theme("colors.primary / 0.08");
                     padding: 0.5rem 0.75rem;
                     border-radius: 0.5rem;
                     margin-bottom: 0;
@@ -213,9 +249,9 @@
                 }
 
                 &.router-link-exact-active {
-                    border: 2px solid theme('colors.primary') !important;
-                    color: theme('colors.primary') !important;
-                    background: theme('colors.primary / 0.08') !important;
+                    border: 2px solid theme("colors.primary") !important;
+                    color: theme("colors.primary") !important;
+                    background: theme("colors.primary / 0.08") !important;
                     border-radius: 0.5rem !important;
                     width: 40px !important;
                     height: 40px !important;
@@ -237,6 +273,13 @@
     }
 }
 
+/* iPad - push right-side elements down from status bar */
+@media (min-width: 768px) and (max-width: 1024px) {
+    .ipad-safe-top {
+        margin-top: 3px;
+    }
+}
+
 .force-z {
     z-index: 20000;
 }
@@ -246,10 +289,14 @@
     height: 100vh;
     height: 100dvh; // Dynamic viewport height for mobile
     will-change: transform, opacity, filter;
-    @apply bg-dark-400 fixed inset-0 pt-20 pb-8 w-full z-10;
+    @apply fixed inset-0 z-10 w-full bg-dark-400 pb-8 pt-20;
+    padding-top: calc(5rem + var(--safe-area-top, 0px));
+    padding-bottom: calc(2rem + var(--safe-area-bottom, 0px));
+    padding-left: var(--safe-area-left, 0px);
+    padding-right: var(--safe-area-right, 0px);
 
     ul li {
-        @apply mb-4 mx-auto;
+        @apply mx-auto mb-4;
 
         a {
             font-size: 20px !important;
@@ -258,18 +305,18 @@
 }
 
 .version-badge {
-    @apply flex items-center gap-x-2 px-3 py-2 rounded-lg border;
-    background: theme('colors.bg-elevated');
-    border-color: theme('colors.dark.550');
+    @apply flex items-center gap-x-2 rounded-lg border px-3 py-2;
+    background: theme("colors.bg-elevated");
+    border-color: theme("colors.dark.550");
 
     .version-label {
         @apply text-xs font-medium;
-        color: theme('colors.text-muted');
+        color: theme("colors.text-muted");
     }
 
     .version-number {
         @apply text-xs font-bold;
-        color: theme('colors.primary');
+        color: theme("colors.primary");
     }
 }
 </style>

package/src/composables/useNotchHandling.js

@@ -1,7 +1,7 @@
-import { ref, watch, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import { useDeviceDetection } from './useDeviceDetection';
-import { DEBUG } from '@/utils/debug';
+import { ref, watch, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { useDeviceDetection } from "./useDeviceDetection";
+import { DEBUG } from "@/utils/debug";
 
 export function useNotchHandling(logger) {
     const { isIOS, isIpadOS } = useDeviceDetection();
@@ -44,11 +44,19 @@ export function useNotchHandling(logger) {
         if (isNotchBusy && !force) return;
 
         try {
-            if (!isIOS() || isIpadOS()) return;
+            if (!isIOS()) {
+                document.documentElement.style.setProperty("--safe-area-top", "0px");
+                document.documentElement.style.setProperty("--safe-area-right", "0px");
+                document.documentElement.style.setProperty("--safe-area-bottom", "0px");
+                document.documentElement.style.setProperty("--safe-area-left", "0px");
+                return;
+            }
 
-            const wrappers = document.querySelectorAll(".ios-wrapper");
-            if (wrappers.length === 0) {
-                setTimeout(() => handleNotch(force), 100);
+            if (isIpadOS()) {
+                document.documentElement.style.setProperty("--safe-area-top", "12px");
+                document.documentElement.style.setProperty("--safe-area-right", "0px");
+                document.documentElement.style.setProperty("--safe-area-bottom", "0px");
+                document.documentElement.style.setProperty("--safe-area-left", "0px");
                 return;
             }
 
@@ -78,56 +86,22 @@ export function useNotchHandling(logger) {
                 });
             }
 
-            if (hasNotch && isLandscape) {
-                const testDiv = document.createElement("div");
-                testDiv.style.position = "fixed";
-                testDiv.style.top = "0";
-                testDiv.style.left = "0";
-                testDiv.style.visibility = "hidden";
-                testDiv.style.paddingLeft = "env(safe-area-inset-left)";
-                testDiv.style.paddingRight = "env(safe-area-inset-right)";
-                document.body.appendChild(testDiv);
-
-                const computedStyle = getComputedStyle(testDiv);
-                const leftInset = parseFloat(computedStyle.paddingLeft) || 0;
-                const rightInset = parseFloat(computedStyle.paddingRight) || 0;
-
-                document.body.removeChild(testDiv);
-
-                if (DEBUG && logger) logger.Debug("🔍 Safe area insets:", { leftInset, rightInset });
-
-                wrappers.forEach((wrapper) => {
-                    if (leftInset > 0) {
-                        wrapper.style.paddingLeft = "env(safe-area-inset-left)";
-                        wrapper.style.paddingRight = "0.5rem";
-                    } else if (rightInset > 0) {
-                        wrapper.style.paddingLeft = "0.5rem";
-                        wrapper.style.paddingRight = "env(safe-area-inset-right)";
-                    } else {
-                        wrapper.style.paddingLeft = "0.5rem";
-                        wrapper.style.paddingRight = "0.5rem";
-                    }
-                });
+            if (hasNotch) {
+                document.documentElement.style.setProperty("--safe-area-top", "min(env(safe-area-inset-top), 32px)");
+                document.documentElement.style.setProperty("--safe-area-right", "env(safe-area-inset-right)");
+                document.documentElement.style.setProperty("--safe-area-bottom", "env(safe-area-inset-bottom)");
+                document.documentElement.style.setProperty("--safe-area-left", "env(safe-area-inset-left)");
             } else {
-                const RESPONSIVE_PADDING = {
-                    XL: { minWidth: 1280, padding: "2.5rem" },
-                    LG: { minWidth: 1030, padding: "1.5rem" },
-                    MD: { minWidth: 768, padding: "0.5rem" },
-                    DEFAULT: { padding: "0.5rem" }
-                };
-
-                const padding =
-                    window.innerWidth > RESPONSIVE_PADDING.XL.minWidth
-                        ? RESPONSIVE_PADDING.XL.padding
-                        : window.innerWidth > RESPONSIVE_PADDING.LG.minWidth
-                        ? RESPONSIVE_PADDING.LG.padding
-                        : window.innerWidth > RESPONSIVE_PADDING.MD.minWidth
-                        ? RESPONSIVE_PADDING.MD.padding
-                        : RESPONSIVE_PADDING.DEFAULT.padding;
-
-                wrappers.forEach((wrapper) => {
-                    wrapper.style.paddingLeft = padding;
-                    wrapper.style.paddingRight = padding;
+                document.documentElement.style.setProperty("--safe-area-top", "0px");
+                document.documentElement.style.setProperty("--safe-area-right", "0px");
+                document.documentElement.style.setProperty("--safe-area-bottom", "0px");
+                document.documentElement.style.setProperty("--safe-area-left", "0px");
+            }
+
+            if (DEBUG && logger) {
+                logger.Debug("🔍 Safe area vars updated", {
+                    hasNotch,
+                    isLandscape
                 });
             }
 

package/src/views/Accounts.vue

@@ -38,7 +38,7 @@
                     @change="(f) => (ui.search.accounts.show = f)"
                     :noBorder="true" />
                 <input
-                    class="h-10 w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative"
+                    class="h-10 w-28 md:w-36 lg:w-44 text-white text-sm p-2 bg-dark-500 flex items-center relative flex-shrink-1"
                     placeholder="Search Email"
                     aria-label="Search email"
                     autocomplete="new-password"

package/src/views/Console.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="mb-8 pb-16 md:mb-0 md:pb-0 mobile-portrait:mb-12 mobile-portrait:pb-24">
-        <div class="page-header" style="padding-bottom: 0.75rem;">
+    <div class="mb-2 md:mb-0" ref="consolePageRef">
+        <div class="page-header" style="padding-bottom: 0.5rem;">
             <div class="page-header-card">
                 <ConsoleIcon />
                 <h4>Console</h4>
@@ -8,21 +8,24 @@
         </div>
 
         <div>
-            <ConsoleToolbar
-                v-model:currentTaskLog="currentTaskLog"
-                v-model:searchQuery="searchQuery"
-                v-model:filteredLogs="filteredLogs"
-                v-model:autoscrollToggled="autoscrollToggled"
-                :taskLogMapping="taskLogMapping"
-                :userScrolledUp="userScrolledUp"
-                :filteredCount="filteredCount"
-                @scroll="startScrolling"
-                @scroll-stop="stopScrolling"
-                @autoscroll-toggle="onAutoscrollToggle" />
+            <div ref="toolbarRef">
+                <ConsoleToolbar
+                    v-model:currentTaskLog="currentTaskLog"
+                    v-model:searchQuery="searchQuery"
+                    v-model:filteredLogs="filteredLogs"
+                    v-model:autoscrollToggled="autoscrollToggled"
+                    :taskLogMapping="taskLogMapping"
+                    :userScrolledUp="userScrolledUp"
+                    :filteredCount="filteredCount"
+                    @scroll="startScrolling"
+                    @scroll-stop="stopScrolling"
+                    @autoscroll-toggle="onAutoscrollToggle" />
+            </div>
 
             <Smoothie
                 :weight="0.2"
                 class="console-main"
+                :style="consoleMainStyle"
                 ref="$autoscroll"
                 @wheel.stop
                 @touchmove.stop
@@ -45,22 +48,6 @@
                     v-bind:key="`log-${index}`"
                     :style="{ '--index': index }"><code class="md:text-sm lg:text-base mobile-portrait:text-xs+ mobile-portrait:leading-tight" v-html="line"></code></pre>
             </Smoothie>
-            <div class="mb-6 mt-4 flex justify-between md:hidden mobile-portrait:mb-16 mobile-portrait:mt-6">
-                <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>
-                    <Switch class="scale-75" v-model="filteredLogs" />
-                </button>
-                <button
-                    class="relative 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">Auto</h3>
-                    <Switch class="scale-75" v-model="autoscrollToggled" @change="onAutoscrollToggle" />
-                    <div
-                        v-if="userScrolledUp && autoscrollToggled"
-                        class="absolute -right-1 -top-1 h-2 w-2 animate-pulse rounded-full bg-yellow-500"
-                        title="Autoscroll paused - scroll to bottom to resume"></div>
-                </button>
-            </div>
         </div>
     </div>
 </template>
@@ -123,12 +110,14 @@ import { DEBUG } from "@/utils/debug";
 
 import Filter from "@/libs/ansii.js";
 import { ConsoleIcon } from "@/components/icons";
-import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import WebsocketHeartbeatJs from "websocket-heartbeat-js";
 import { onMounted, onUnmounted, ref, nextTick, computed, watch } from "vue";
 import ConsoleToolbar from "@/components/Console/ConsoleToolbar.vue";
+import { TABLE_LAYOUT } from "@/constants/tableLayout";
 
 const $autoscroll = ref(null);
+const consolePageRef = ref(null);
+const toolbarRef = ref(null);
 const logLines = ref([]);
 const ansii = new Filter();
 const autoscrollToggled = ref(true);
@@ -139,6 +128,8 @@ const userScrolledUp = ref(false);
 const scrollInterval = ref(null);
 const isScrolling = ref(false);
 const searchQuery = ref("");
+const consoleHeight = ref(0);
+let consoleResizeObserver = null;
 
 // Optimized: Cache stripped versions to avoid regex on every filter
 const logPlainTextCache = new Map();
@@ -173,8 +164,56 @@ const filteredCount = computed(() => {
 const path = "/api/updates?type=console";
 const url = (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + path;
 
-const SCROLL_THRESHOLD = 50;
+const SCROLL_THRESHOLD = 100;
 const SCROLL_AMOUNT = 100;
+const MIN_CONSOLE_HEIGHT = 192;
+
+const getTableHeightCap = (viewportHeight) => {
+    const isPWA = window.matchMedia("(display-mode: standalone)").matches;
+    const isMobile = window.innerWidth <= 768;
+    const isSmallMobile = window.innerWidth <= 480;
+    const extraBuffer = isPWA && isMobile ? 60 : 0;
+    const mobileEdgeBuffer = isMobile ? (isSmallMobile ? 20 : 12) : 0;
+
+    const availableHeight =
+        viewportHeight -
+        TABLE_LAYOUT.PROFILES.TOP_RESERVED_SPACE -
+        TABLE_LAYOUT.PROFILES.BOTTOM_BUFFER -
+        extraBuffer -
+        mobileEdgeBuffer;
+    const rowHeight = TABLE_LAYOUT.PROFILES.ROW_HEIGHT;
+    const minHeight = TABLE_LAYOUT.PROFILES.MIN_ROWS_TO_SHOW * rowHeight;
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
+    return maxCompleteRows * rowHeight;
+};
+
+const consoleMainStyle = computed(() => {
+    if (!consoleHeight.value) return {};
+    const height = `${consoleHeight.value}px`;
+    return {
+        height,
+        maxHeight: height
+    };
+});
+
+const updateConsoleHeight = () => {
+    const element = $autoscroll.value?.el;
+    if (!element) return;
+
+    const viewportHeight = window.visualViewport?.height || window.innerHeight;
+    const isMobile = window.innerWidth <= 768;
+    const isSmallMobile = window.innerWidth <= 480;
+    const baseBottomPadding = window.matchMedia("(display-mode: standalone)").matches ? 12 : 8;
+    const mobileEdgePadding = isMobile ? (isSmallMobile ? 16 : 10) : 0;
+    const bottomPadding = baseBottomPadding + mobileEdgePadding;
+    const availableHeight = Math.floor(viewportHeight - element.getBoundingClientRect().top - bottomPadding);
+    const tableHeightCap = getTableHeightCap(viewportHeight);
+    consoleHeight.value = Math.max(MIN_CONSOLE_HEIGHT, Math.min(availableHeight, tableHeightCap));
+};
+
+const scheduleConsoleHeightUpdate = () => {
+    requestAnimationFrame(updateConsoleHeight);
+};
 
 const handleScroll = (event) => {
     if (!autoscrollToggled.value) return;
@@ -184,6 +223,8 @@ const handleScroll = (event) => {
 
     const isNearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - SCROLL_THRESHOLD;
 
+    // Only mark as scrolled up if user deliberately scrolled away from bottom
+    // Ignore scroll events triggered by content additions
     if (userScrolledUp.value === isNearBottom) {
         userScrolledUp.value = !isNearBottom;
     }
@@ -258,19 +299,28 @@ const stopScrolling = () => {
 const autoScrollToBottom = () => {
     if (!$autoscroll.value?.el || !autoscrollToggled.value) return;
 
-    // Only scroll if user hasn't manually scrolled up
-    if (!userScrolledUp.value) {
-        const element = $autoscroll.value.el;
-        const targetScrollTop = element.scrollHeight - element.clientHeight;
+    const element = $autoscroll.value.el;
+    const targetScrollTop = element.scrollHeight - element.clientHeight;
+    const currentDistanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
 
-        if (element.scrollTo && Math.abs(element.scrollTop - targetScrollTop) > 5) {
-            element.scrollTo({
-                top: targetScrollTop,
-                behavior: "smooth"
-            });
-        } else {
-            element.scrollTop = targetScrollTop;
-        }
+    // Only respect userScrolledUp if they're significantly away from bottom
+    // This prevents autoscroll from pausing due to content-triggered scroll events
+    if (currentDistanceFromBottom > SCROLL_THRESHOLD && userScrolledUp.value) {
+        return; // User has deliberately scrolled up
+    }
+
+    // Reset userScrolledUp if we're near bottom
+    if (currentDistanceFromBottom < SCROLL_THRESHOLD) {
+        userScrolledUp.value = false;
+    }
+
+    if (element.scrollTo && Math.abs(element.scrollTop - targetScrollTop) > 5) {
+        element.scrollTo({
+            top: targetScrollTop,
+            behavior: "smooth"
+        });
+    } else {
+        element.scrollTop = targetScrollTop;
     }
 };
 
@@ -358,6 +408,18 @@ watch([currentTaskLog, filteredLogs], () => {
 onMounted(() => {
     const socket = new WebsocketHeartbeatJs({ url, pingMsg: "ping" });
 
+    scheduleConsoleHeightUpdate();
+    requestAnimationFrame(scheduleConsoleHeightUpdate);
+    window.addEventListener("resize", scheduleConsoleHeightUpdate, { passive: true });
+    window.addEventListener("orientationchange", scheduleConsoleHeightUpdate, { passive: true });
+    window.visualViewport?.addEventListener("resize", scheduleConsoleHeightUpdate);
+    window.visualViewport?.addEventListener("scroll", scheduleConsoleHeightUpdate);
+    if (typeof ResizeObserver !== "undefined") {
+        consoleResizeObserver = new ResizeObserver(scheduleConsoleHeightUpdate);
+        if (consolePageRef.value) consoleResizeObserver.observe(consolePageRef.value);
+        if (toolbarRef.value) consoleResizeObserver.observe(toolbarRef.value);
+    }
+
     socket.onmessage = (event) => {
         const msg = JSON.parse(event.data);
 ;
@@ -369,5 +431,11 @@ onMounted(() => {
 
 onUnmounted(() => {
     stopScrolling();
+    window.removeEventListener("resize", scheduleConsoleHeightUpdate);
+    window.removeEventListener("orientationchange", scheduleConsoleHeightUpdate);
+    window.visualViewport?.removeEventListener("resize", scheduleConsoleHeightUpdate);
+    window.visualViewport?.removeEventListener("scroll", scheduleConsoleHeightUpdate);
+    consoleResizeObserver?.disconnect();
+    consoleResizeObserver = null;
 });
 </script>

package/src/views/Editor.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="page-header" style="padding-bottom: 1.25rem;">
+        <div class="page-header" style="padding-bottom: 0.5rem;">
             <div class="page-header-card">
                 <img src="@/assets/img/pencil.svg" />
                 <h4>Editor</h4>

package/src/views/FilterBuilder.vue

@@ -102,11 +102,11 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="hidden-scrollbars flex-1 overflow-y-auto overflow-x-hidden bg-dark-400" style="max-height: 100%; min-height: 150px;">
+                        <div class="hidden-scrollbars flex-1 overflow-y-auto overflow-x-hidden bg-dark-400">
                             <div
                                 v-if="filterBuilder.filters.length"
                                 ref="filtersListRef"
-                                class="space-y-0 p-1">
+                                class="flex flex-col gap-2 p-2">
                                 <Filter
                                     v-for="(f, i) in filterBuilder.filters"
                                     v-show="doesFilterShow(f)"
@@ -568,9 +568,9 @@ watch(renderSeats, async () => {
 
 /* Force filters list to be constrained and scrollable */
 .hidden-scrollbars.flex-1.overflow-y-auto {
-    max-height: 100%;
-    min-height: 150px;
+    flex: 1 1 0;
     overflow-y: auto !important;
+    overflow-x: hidden !important;
 }
 
 /* SVG and Filters container responsive sizing */