@necrolab/dashboard 0.5.25 → 0.5.27

package/package.json

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

package/src/components/Editors/ProxyFileEditor.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="proxy-editor-section" :class="{ 'landscape-hidden': isHidden }" v-if="!isHidden">
         <h5 class="text-white text-xl font-bold flex gap-x-3 mb-3">Proxy Editor</h5>
-        <div class="flex items-center gap-2 w-full mb-1">
+        <div class="flex items-center gap-2 w-full">
             <div class="flex-1 lg:flex-initial lg:w-64 flex dropdown-container z-dropdown">
                 <div class="relative flex-grow">
                     <Dropdown
@@ -50,14 +50,12 @@
         </div>
         <transition name="fade">
             <div v-if="isProxyEditorVisible" class="relative my-3">
-                <div class="pb-4">
-                    <div class="proxy-editor-container">
-                        <textarea
-                            :value="proxyContent"
-                            @input="$emit('update:proxyContent', $event.target.value)"
-                            class="proxy-editor"
-                            spellcheck="false"></textarea>
-                    </div>
+                <div class="proxy-editor-container">
+                    <textarea
+                        :value="proxyContent"
+                        @input="$emit('update:proxyContent', $event.target.value)"
+                        class="proxy-editor"
+                        spellcheck="false"></textarea>
                 </div>
             </div>
         </transition>

package/src/components/ui/Navbar.vue

@@ -55,7 +55,7 @@
             </button>
             <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="font-black">{{ ui.profile?.name }}</span>
+                <span class="ml-1 font-black">{{ ui.profile?.name }}</span>
             </h4>
             <h4 v-else class="hidden text-sm font-medium text-white lg:block">
                 <span class="text-lightgray">Loading</span>
@@ -69,7 +69,7 @@
             <CountryChooser class="ipad-safe-top hidden lg:block" />
 
             <button
-                class="z-30 ml-auto flex p-2 -m-2 lg:hidden"
+                class="z-30 -m-2 ml-auto flex p-2 lg:hidden"
                 @click="toggleMenu"
                 aria-label="Toggle navigation menu"
                 :aria-expanded="menuOpen">
@@ -124,7 +124,7 @@
                     </button>
                     <h4 class="mr-4 text-sm font-medium text-white">
                         <span class="text-lightgray">Logged in as</span>
-                        <span class="font-black">{{ ui.profile?.name }}</span>
+                        <span class="ml-1 font-black">{{ ui.profile?.name }}</span>
                     </h4>
                     <img :src="ui.profile?.profilePicture" alt="" class="size-10 rounded-full" />
                 </div>

package/src/composables/useDynamicTableHeight.js

@@ -15,9 +15,11 @@ export function useDynamicTableHeight(options = {}) {
         // Detect PWA mode and small screens
         const isPWA = window.matchMedia('(display-mode: standalone)').matches;
         const isMobile = windowWidth.value <= 768;
+        const isIPhonePortrait = windowWidth.value <= 480 && windowHeight.value > windowWidth.value;
 
-        // Extra buffer for iPhone PWA to prevent overflow
-        const extraBuffer = isPWA && isMobile ? 60 : 0;
+        // Extra buffer for mobile PWA to prevent overflow
+        // iPhone portrait gets a smaller reserve to use more vertical space
+        const extraBuffer = isPWA && isMobile ? (isIPhonePortrait ? 24 : 40) : 0;
 
         const availableHeight = windowHeight.value - topReservedSpace - bottomBuffer - extraBuffer;
         const minHeight = minRowsToShow * rowHeight;

package/src/composables/useNotchHandling.js

@@ -44,7 +44,7 @@ export function useNotchHandling(logger) {
         if (isNotchBusy && !force) return;
 
         try {
-            if (!isIOS() || isIpadOS()) {
+            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");
@@ -52,6 +52,14 @@ export function useNotchHandling(logger) {
                 return;
             }
 
+            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;
+            }
+
             const isLandscape = isLandscapeMode();
             const hasNotch = hasDeviceNotch();