@necrolab/dashboard 0.4.38 → 0.4.39

package/src/assets/css/_input.scss

@@ -1,21 +1,21 @@
 .input-default {
     @apply h-12 bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border border-dark-550 border-2;
-    
+
     input {
         @apply h-full w-full px-4 focus:outline-none text-xs text-white;
         background-color: transparent;
     }
-    
+
     /* When input has incrementer, add right padding */
     &:has(.input-incrementer) input {
         @apply pr-10;
     }
-    
+
     /* Required field indicator */
     &.required {
         /* Professional style with colored border */
         border-left: 3px solid rgba(239, 68, 68, 0.7);
-        
+
         /* Red bullet indicator directly in the field */
         &::after {
             content: "";
@@ -28,7 +28,7 @@
             border-radius: 50%;
             background-color: #ef4444;
         }
-        
+
         &:has(.input-incrementer)::after {
             right: 16px;
         }
@@ -36,7 +36,7 @@
 }
 .input-wrapper {
     @apply z-20;
-    
+
     label {
         @apply text-xs text-light-300 block;
     }
@@ -51,7 +51,7 @@ input[type="number"] {
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
-    
+
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
         -webkit-appearance: none;
@@ -61,24 +61,24 @@ input[type="number"] {
 .input-incrementer {
     @apply flex flex-col absolute right-2 top-1/2 transform -translate-y-1/2 #{!important};
     gap: 2px;
-    
+
     button {
         @apply w-6 h-4 flex items-center justify-center transition-all duration-150 rounded-sm;
         background: rgba(46, 47, 52, 0.8);
         border: 1px solid rgba(61, 62, 68, 0.6);
         color: rgba(255, 255, 255, 0.9);
         font-size: 8px;
-        
+
         &:hover {
             background: rgba(68, 69, 75, 0.9);
-            border-color: rgba(93, 124, 192, 0.4);
+            border-color: rgba(255, 255, 255, 0.4);
             color: white;
         }
-        
+
         &:active {
             background: rgba(35, 36, 41, 0.9);
         }
-        
+
         svg {
             @apply w-2.5 h-2.5;
         }
@@ -89,33 +89,33 @@ input[type="number"] {
 @media (max-width: 810px) {
     .input-default {
         height: 40px;
-        
+
         input {
             font-size: 12px;
         }
-        
+
         .input-incrementer button {
             @apply w-5 h-3;
-            
+
             svg {
                 @apply w-2 h-2;
             }
         }
     }
-    
+
     .input-wrapper label {
         font-size: 15px;
     }
-    
+
     .ant-select {
         height: fit-content;
         min-height: 40px;
         padding: 0;
-        
+
         &-show-search:not(.ant-select-customize-input) .ant-select-selector {
             font-size: 12px;
         }
-        
+
         &-multiple .ant-select-selection-item {
             height: 25px;
         }
@@ -132,7 +132,7 @@ input[type="number"] {
     @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 border-dark-550 border-2 #{!important};
     min-height: 3.45em;
     height: fit-content;
-    
+
     .ant-select-selector {
         @apply h-full w-full focus:outline-none text-xs text-white #{!important};
         background: transparent;
@@ -150,7 +150,7 @@ input[type="number"] {
     border-radius: 10px;
     height: 40px;
     border: 0;
-    
+
     &-remove > .anticon {
         vertical-align: 0.05rem;
     }
@@ -167,20 +167,20 @@ input[type="number"] {
 .ant-select-item-option {
     &-selected:not(.ant-select-item-option-disabled) {
         @apply bg-dark-500 text-white #{!important};
-        
+
         .ant-select-item-option-state {
             @apply text-white #{!important};
-            
+
             svg {
                 margin-top: -1.5px;
             }
         }
     }
-    
+
     &-active:not(.ant-select-item-option-disabled) {
         background-color: transparent;
     }
-    
+
     &-content {
         @apply text-white #{!important};
     }

package/src/assets/css/main.scss

@@ -1,16 +1,21 @@
 @use "input";
 
 /* Global input styling fixes for iOS and other platforms */
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
     /* Remove iOS blue highlight/border */
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
-    
+
     /* Remove default focus outline */
     outline: none;
 }
 
-input, textarea, select {
+input,
+textarea,
+select {
     /* Remove browser default styling */
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -18,15 +23,20 @@ input, textarea, select {
 }
 
 /* Enhanced focus state removal for iOS */
-input:focus, textarea:focus, select:focus {
+input:focus,
+textarea:focus,
+select:focus {
     outline: none !important;
     -webkit-tap-highlight-color: transparent !important;
     box-shadow: none !important;
 }
 
-// Base styles
+// Base styles - Ultra bulletproof scroll prevention
 html {
-    overscroll-behavior: contain;
+    overflow: hidden !important;
+    overscroll-behavior: none !important;
+    height: 100% !important;
+    width: 100% !important;
 }
 
 * {
@@ -35,6 +45,49 @@ html {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+    overscroll-behavior: none !important;
+}
+
+// Override for textareas to allow scrolling and selection
+textarea,
+.code-editor,
+.proxy-editor {
+    -webkit-user-select: text !important;
+    -moz-user-select: text !important;
+    -ms-user-select: text !important;
+    user-select: text !important;
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+}
+
+// Override for dropdown menus to allow scrolling - must be very specific to override global rules
+.dropdown-menu,
+.dropdown-menu *,
+.option-list,
+.option-list *,
+.dropdown-menu.scrollable,
+.dropdown-menu.scrollable * {
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    overflow-y: auto !important;
+}
+
+// Additional specific overrides for dropdown buttons and text
+.dropdown-item,
+.dropdown-item *,
+.dropdown-item-text {
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+}
+
+// Override for console scrolling
+.console,
+.console *,
+.console.scrollable {
+    overscroll-behavior: auto !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
 body {
@@ -43,11 +96,13 @@ body {
     background-size: cover;
     background-attachment: fixed;
     min-height: 100vh;
-    padding-top: 10px;
-    overscroll-behavior-y: contain;
+    overflow: hidden !important;
+    overscroll-behavior: none !important;
+    width: 100% !important;
+    height: 100% !important;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    touch-action: pan-x pan-y;
+    touch-action: none !important;
     color: #e2e2e5;
     @apply bg-dark-300;
 }
@@ -89,7 +144,7 @@ img {
 .btn-primary {
     @apply bg-accent-blue hover:bg-opacity-80 text-white font-medium px-4 py-2 rounded transition-all duration-150;
     border: 1px solid #5d7cc0;
-    
+
     &:hover {
         border-color: #4a6ba0;
     }
@@ -108,7 +163,7 @@ img {
 .btn-icon {
     @apply p-1 rounded transition-all duration-150 flex-center hover:bg-dark-500 border border-transparent;
     color: #d0d0d3;
-    
+
     &:hover {
         color: #ffffff;
         border-color: #3d3e44;
@@ -128,7 +183,7 @@ img {
 .label-override {
     @apply flex items-center text-xs mb-2;
     color: #a0a0a6;
-    
+
     svg {
         @apply ml-2;
         color: #a0a0a6 !important;
@@ -175,17 +230,32 @@ img {
 }
 
 .status-indicator {
-    @apply w-2 h-2 rounded-full;
+    @apply w-2 h-2 rounded-full flex-shrink-0;
+    min-width: 4px;
+    min-height: 4px;
+    
+    @media (max-width: 768px) {
+        width: 6px;
+        height: 6px;
+        min-width: 6px;
+        min-height: 6px;
+    }
+    
+    @media (max-width: 480px) {
+        width: 5px;
+        height: 5px;
+        min-width: 5px;
+        min-height: 5px;
+    }
 }
 
-
 .mobile-icons {
     @apply flex lg:hidden ml-auto items-center gap-x-2;
-    
+
     button {
         @apply w-8 h-8 flex-center bg-dark-500 rounded transition-all duration-150 border border-dark-650 hover:bg-dark-550;
         color: #d0d0d3;
-        
+
         &:hover {
             color: #ffffff;
         }
@@ -214,7 +284,7 @@ img {
 .hidden-scrollbars {
     scrollbar-width: none;
     -ms-overflow-style: none;
-    
+
     &::-webkit-scrollbar {
         display: none;
     }
@@ -266,6 +336,15 @@ img {
     --toastify-toast-width: 520px;
 }
 
+// iOS layout stabilization
+@supports (-webkit-appearance: none) {
+    .component-container,
+    .card-dark,
+    h1, h2, h3, h4, h5, h6 {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
 // Toast notifications
 .Toastify__toast-theme--colored.Toastify__toast--default,
 .Toastify__toast-theme--light {
@@ -294,13 +373,14 @@ img {
 .Toastify__toast {
     min-height: 50px !important;
     height: 50px !important;
-    
+    pointer-events: none !important;
+
     &-body > div:last-child {
         font-family: "Inter", sans-serif;
         @apply font-medium;
     }
-    
-    &--error {        
+
+    &--error {
         .Toastify__progress-bar {
             @apply bg-red-400;
         }
@@ -328,13 +408,27 @@ img {
     .text-heading {
         @apply text-sm;
     }
-    
+
     .btn-primary,
     .btn-secondary {
         @apply text-sm px-3 py-1.5;
     }
-    
+
+    .btn-action {
+        @apply text-sm px-6 h-12;
+        min-height: 48px; // Apple's recommended minimum touch target size
+    }
+
     .form-grid {
         @apply grid-cols-1;
     }
 }
+
+// iPhone landscape mode - larger buttons for easier touch
+@media only screen and (max-device-width: 430px) and (orientation: landscape) {
+    .btn-action {
+        @apply text-base px-8 h-14;
+        min-height: 56px; // Extra large for landscape touch
+        font-weight: 600;
+    }
+}

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

@@ -7,20 +7,20 @@
         <div class="col-span-3 lg:col-span-2 flex">
             <Checkbox
                 class="ml-0 mr-4"
-                :toggled="props.task.selected"
-                @valueUpdate="ui.toggleAccountSelected(props.task._id)"
+                :toggled="props.account.selected"
+                @valueUpdate="ui.toggleAccountSelected(props.account._id)"
             />
-            <h4 class="mx-auto text-white" @click="copy(props.task.email)">
-                {{ props.task.email }}
+            <h4 class="mx-auto text-white" @click="copy(props.account.email)">
+                {{ props.account.email }}
             </h4>
         </div>
-        <div class="col-span-2 hidden ipadlg:block" @click="copy(props.task.password)">
+        <div class="col-span-2 hidden ipadlg:block" @click="copy(props.account.password)">
             <h4 class="text-white">
-                {{ props.task.privacy ? "•".repeat(props.task.password.length) : props.task.password }}
+                {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.task.enabled" class="text-green-400 flex justify-center">
+            <h4 v-if="props.account.enabled" class="text-green-400 flex justify-center">
                 <img class="w-3 h-3 green" src="/img/controls/enable.svg" />
             </h4>
             <h4 v-else class="text-red-400 flex justify-center">
@@ -30,18 +30,18 @@
 
         <div class="col-span-1 hidden lg:block">
             <h4 class="text-white flex justify-center gap-1">
-                <TagLabel v-for="tag in props.task.tags" :key="tag" :text="tag" />
+                <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="task-buttons">
+            <ul class="account-buttons">
                 <li>
                     <button @click="edit">
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.task.enabled">
+                <li v-if="props.account.enabled">
                     <button @click="disable">
                         <img class="w-4 h-4" src="/img/controls/disable.svg" />
                     </button>
@@ -59,7 +59,7 @@
 h4 {
     @apply text-center;
 }
-.task-buttons {
+.account-buttons {
     @apply flex items-center justify-center mx-auto bg-dark-500 border border-dark-650 rounded;
     padding: 3px;
     gap: 2px;
@@ -102,7 +102,7 @@ h4 {
         font-size: 10px !important;
     }
 
-    .task-buttons {
+    .account-buttons {
         padding: 3px;
         gap: 2px;
 
@@ -118,7 +118,7 @@ h4 {
         }
     }
 
-    .task-id {
+    .account-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
@@ -127,7 +127,7 @@ h4 {
 
 // Mobile optimization
 @media (max-width: 768px) {
-    .task-buttons {
+    .account-buttons {
         padding: 2px;
         gap: 1px;
 
@@ -146,7 +146,7 @@ h4 {
 
 // iPhone vertical (portrait) specific
 @media (max-width: 480px) and (orientation: portrait) {
-    .task-buttons {
+    .account-buttons {
         padding: 2px;
         gap: 1px;
 
@@ -177,7 +177,7 @@ import TagLabel from "@/components/Editors/TagLabel.vue";
 const ui = useUIStore();
 
 const props = defineProps({
-    task: { type: Object }
+    account: { type: Object }
 });
 
 const copy = (txt) => {
@@ -185,10 +185,10 @@ const copy = (txt) => {
     navigator.clipboard.writeText(txt);
     ui.showSuccess("Copied text");
 };
-const enable = async () => await ui.addAccount({ ...props.task, enabled: true });
-const disable = async () => await ui.addAccount({ ...props.task, enabled: false });
+const enable = async () => await ui.addAccount({ ...props.account, enabled: true });
+const disable = async () => await ui.addAccount({ ...props.account, enabled: false });
 const edit = () => {
-    ui.currentlyEditing = props.task;
+    ui.currentlyEditing = props.account;
     ui.toggleModal("create-account");
 };
 </script>

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

@@ -48,7 +48,7 @@
                             v-model="creatorConfig.emails"
                             class="proxy-editor"
                             spellcheck="false"
-                            style="max-height: 250px; min-height: 150px;"
+                            style="max-height: 250px; min-height: 150px"
                         ></textarea>
                     </div>
                 </div>
@@ -83,7 +83,7 @@
     width: 100%;
     background-color: #2e2f34;
     color: #e2e2e5;
-    font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
     padding: 12px;
     border: none;
     resize: none;
@@ -98,7 +98,7 @@
 
 .proxy-editor:focus {
     border-color: #5d7cc0;
-    box-shadow: 0 0 0 2px rgba(93, 124, 192, 0.25);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
 }
 
 .z-inf {

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

@@ -48,8 +48,10 @@
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center py-8 bg-dark-400 empty-state">
-            No accounts found
+        <div v-else class="flex flex-col items-center justify-center py-8 bg-dark-400 empty-state text-center">
+            <MailIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50" />
+            <p class="text-light-400 text-sm">No accounts found</p>
+            <p class="text-light-500 text-xs mt-1">Create accounts to get started</p>
         </div>
     </Table>
 </template>
@@ -73,22 +75,31 @@ h4 {
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";
-import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, MailIcon, KeyIcon, CheckmarkIcon } from "@/components/icons";
+import {
+    EventIcon,
+    TicketIcon,
+    StatusIcon,
+    ClickIcon,
+    DownIcon,
+    MailIcon,
+    KeyIcon,
+    CheckmarkIcon
+} from "@/components/icons";
 import Account from "./Account.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import { computed, ref } from "vue";
 
 const props = defineProps({
-    tasks: { type: Object }
+    accounts: { type: Object }
 });
 const i = ref({});
-props.tasks.forEach((t) => (i.value[t._id] = 0));
+props.accounts.forEach((t) => (i.value[t._id] = 0));
 
 const ui = useUIStore();
 
 const toRender = computed(() => {
     let c = 0;
-    return props.tasks.map((t) => ({ ...t, index: c++ }));
+    return props.accounts.map((t) => ({ ...t, index: c++ }));
 });
 </script>