@necrolab/dashboard 0.5.9 → 0.5.11

package/package.json

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

package/src/App.vue

@@ -737,17 +737,31 @@ body {
 
 // 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;
+    display: flex;
+    opacity: 1;
+    transition: opacity 0.1s ease-out;
+
+    // Hide in portrait mode
+    @media (max-device-width: 430px) and (orientation: portrait) {
+        opacity: 0;
+        pointer-events: none;
+    }
 
-    // Only show on iPhone (not iPad) in landscape
+    // Show immediately in landscape
     @media (max-device-width: 430px) and (orientation: landscape) {
-        display: flex;
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    // Hide completely on iPad and desktop
+    @media (min-device-width: 431px) {
+        display: none;
     }
 
     .rotate-message {

package/src/components/Tasks/QuickSettings.vue

@@ -38,7 +38,7 @@
             />
         </div>
 
-                    <div class="input-container relative-positioned z-dropdown">
+        <div class="input-container relative-positioned z-dropdown">
             <span class="w-1/3 text-light-300 font-medium text-xs">Queue Proxies</span>
             <Dropdown
                 class="!w-2/3"
@@ -228,6 +228,12 @@
     -webkit-overflow-scrolling: touch !important;
     border: 1px solid oklch(0.26 0 0) !important;
     background: linear-gradient(135deg, oklch(0.18 0 0) 0%, oklch(0.20 0 0) 100%) !important;
+    width: calc(100vw - 4rem) !important;
+    max-width: 600px !important;
+
+    @media (min-width: 700px) {
+        width: 600px !important;
+    }
 }
 
 :deep(.dropdown-item) {

package/src/components/ui/Modal.vue

@@ -56,7 +56,7 @@ onClickOutside(target, (event) => {
 </script>
 <style lang="scss" scoped>
 .modal-mask {
-    @apply fixed left-0 top-0 flex h-screen w-screen duration-300 ease-in-out;
+    @apply fixed left-0 top-0 flex w-screen duration-300 ease-in-out;
     z-index: 25000;
     align-items: flex-start;
     justify-content: center;
@@ -64,19 +64,25 @@ onClickOutside(target, (event) => {
     padding-top: 3.5rem;
     background-color: rgba(17, 17, 17, 0.85);
     backdrop-filter: blur(4px);
+    height: 100dvh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
-    // Prevent zoom in modals
     touch-action: pan-y !important;
+
+    @supports not (height: 100dvh) {
+        height: 100vh;
+    }
 }
 
 .component-modal {
     width: 640px;
-    margin-bottom: 10rem;
+    margin-bottom: 20rem;
     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;
+
+    @media (max-width: 480px) {
+        margin-bottom: 25rem;
+    }
 
     .modal-header {
         @apply flex font-bold text-white;
@@ -94,16 +100,16 @@ onClickOutside(target, (event) => {
 
 @media (max-width: 810px) {
     .modal-mask {
-        align-items: flex-start; // Start from top on mobile
+        align-items: flex-start;
         justify-content: center;
         padding: 1rem;
         padding-top: 3rem;
-        padding-bottom: 2rem; // Ensure bottom space
+        padding-bottom: 15rem !important;
     }
 
     .component-modal {
         width: calc(100vw - 2rem);
-        margin-bottom: 6rem; // Increased bottom margin for better button access
+        margin-bottom: 10rem;
     }
 
     .modal-body {
@@ -117,16 +123,16 @@ onClickOutside(target, (event) => {
 /* iPhone portrait mode - extra spacing for create button */
 @media (max-width: 480px) and (orientation: portrait) {
     .modal-mask {
-        padding-bottom: 3rem !important; // Extra bottom padding for iPhone
+        padding-bottom: 3rem !important;
     }
 
     .component-modal {
-        margin-bottom: 3rem !important; // Even more bottom margin for iPhone portrait
-        max-height: calc(100vh - 12rem) !important; // Ensure modal doesn't get too tall
+        margin-bottom: 3rem !important;
+        max-height: none !important;
     }
 
     .modal-body {
-        padding-bottom: 1rem !important; // Extra padding for create button on iPhone
+        padding-bottom: 1rem !important;
     }
 }
 

package/src/stores/sampleData.js

@@ -157,8 +157,9 @@ export default {
             active: true,
             email: "suphathrphrnb@gmail.com",
             password: "PrthYTpNPk1hfm3",
-            status: "Waiting for Stock",
-            statusColor: "white",
+            status: "Checked out! #123467",
+            statusColor: "green",
+            orderNumber: "#123456",
             manual: false,
             quickQueue: false,
             loginAfterCart: false,

package/src/views/Console.vue

@@ -163,6 +163,8 @@
     height: calc(100vh - 18rem);
     scrollbar-width: thin;
     scrollbar-color: oklch(0.35 0 0) oklch(0.19 0 0);
+    touch-action: pan-x pan-y !important;
+    -webkit-overflow-scrolling: touch;
 
     // Use fixed height on mobile portrait to ensure switches are visible
     @media (max-width: 768px) {

package/vite.config.js

@@ -63,6 +63,7 @@ export default defineConfig({
         hmr: {
             overlay: false
         },
+        allowedHosts: ["localhost", "127.0.0.1", "::1", "mac.local"],
         // Handle iOS connection resets gracefully
         watch: {
             usePolling: false,