@necrolab/dashboard 0.4.48 → 0.4.50

package/src/components/Editors/Profile/ProfileCountryChooser.vue

@@ -1,43 +1,77 @@
 <template>
     <div>
-        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown rounded-lg">
-            <span @click="open = !open" class="flex justify-between items-center z-inf text-white">
+        <div class="dropdown input-default p-4 w-16 bg-dark-550 small-dropdown rounded-lg" ref="dropdownRef">
+            <span @click="toggleOpen" class="flex justify-between items-center z-50 text-white">
                 <div class="flex gap-3 justify-center">
                     <img class="w-5" :src="`/flags/${current?.toLowerCase()}.svg`" />
                 </div>
             </span>
-            <div
-                v-if="open && !disabled"
-                class="dropdown-content special-dropdown snap-mandatory snap-y z-inf max-h-48 overflow-scroll hidden-scrollbars"
-            >
+            <Teleport to="body">
                 <div
-                    v-for="(country, i) in countries"
-                    v-bind:key="country"
-                    :class="`cursor-pointer w-12 snap-start ${i === 0 ? '' : 'my-2'}`"
-                    @click="set(country)"
+                    v-if="open && !disabled"
+                    class="dropdown-content-portal special-dropdown"
+                    :style="menuStyle"
+                    @click.stop
+                    @wheel.stop
+                    @touchmove.stop
                 >
-                    <div class="flex gap-3 justify-between smooth-hover">
-                        <span class="text-sm">{{ country }} </span>
-                        <img class="w-5" :src="`/flags/${country?.toLowerCase()}.svg`" />
+                    <div
+                        v-for="(country, i) in countries"
+                        v-bind:key="country"
+                        :class="`cursor-pointer w-12 ${i === 0 ? '' : 'my-2'}`"
+                        @click="set(country)"
+                    >
+                        <div class="flex justify-center items-center smooth-hover">
+                            <span class="text-sm">{{ country }} </span>
+                            <img class="w-5 ml-3" :src="`/flags/${country?.toLowerCase()}.svg`" />
+                        </div>
                     </div>
                 </div>
-            </div>
+            </Teleport>
         </div>
     </div>
 </template>
 
 <script setup>
 import { ref, watch } from "vue";
+import { useDropdownPosition } from "@/composables/useDropdownPosition";
+import { useClickOutside } from "@/composables/useClickOutside";
+
 const countries = ["US", "CA", "DE", "FR", "DK"];
 const open = ref(false);
+const dropdownRef = ref(null);
 
 const props = defineProps({
     value: { type: String },
     onClick: { type: Function },
     disabled: { type: Boolean, required: false }
 });
+
 const current = ref(props.value || "US");
 
+// Use composables for positioning and click outside
+const { menuStyle, updatePosition } = useDropdownPosition(dropdownRef, {
+    offset: { x: -17.6, y: 4 },
+    minWidth: 80,
+    maxHeight: 192,
+    zIndex: 99999999999999,
+    estimateHeight: () => Math.min(countries.length * 32, 192)
+});
+
+useClickOutside(dropdownRef, () => {
+    if (open.value) {
+        open.value = false;
+    }
+});
+
+const toggleOpen = () => {
+    if (props.disabled) return;
+    open.value = !open.value;
+    if (open.value) {
+        updatePosition();
+    }
+};
+
 const set = (c) => {
     if (props.disabled) return;
     current.value = c;
@@ -61,15 +95,45 @@ watch(
     /* border-radius: 100% !important; */
     padding: 0;
     width: 3em !important;
-    /* height: 3em !important; */
+    height: 3.45em !important; /* Match input-default height */
     display: flex;
     justify-items: center;
     justify-content: center;
 }
 
-.dropdown-content {
-    left: -1.1rem;
-    z-index: 99999999999999;
+@media (min-width: 768px) {
+    .small-dropdown {
+        height: 40px !important; /* Match input-default responsive height */
+    }
+}
+
+.dropdown-content-portal {
+    @apply bg-dark-400 border border-dark-650 rounded-lg shadow-2xl z-50;
+    padding: 0.5rem;
+    max-height: 192px !important;
+    overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.dropdown-content-portal::-webkit-scrollbar {
+    display: none;
+}
+
+.dropdown-content-portal > div {
+    @apply px-3 py-2 text-sm text-white cursor-pointer;
+    border-radius: 6px;
+}
+
+.dropdown-content-portal > div:hover {
+    /* Removed hover background */
+}
+
+.dropdown-content-portal > div .flex {
+    @apply items-center justify-center;
+    gap: 0.75rem;
 }
 </style>
-, watch

package/src/components/Editors/Profile/ProfileView.vue

@@ -8,29 +8,29 @@
                     @valueUpdate="ui.toggleMainCheckbox('profiles')"
                     :isHeader="true" />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
-                    <ProfileIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
-                    <h4 class="hidden ipadlg:flex">Profile Name</h4>
+                    <ProfileIcon class="mr-0 md:mr-3 w-4 h-4" />
+                    <h4 class="hidden md:flex">Profile Name</h4>
                 </div>
             </div>
             <div class="lg:col-span-2 col-span-1 items-center justify-center flex" v-once>
-                <CartIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
-                <h4 class="hidden ipadlg:flex">Card Number</h4>
+                <CartIcon class="mr-0 md:mr-3 w-4 h-4" />
+                <h4 class="hidden md:flex">Card Number</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <TimerIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
-                <h4 class="hidden ipadlg:flex">Expiration</h4>
+                <TimerIcon class="mr-0 md:mr-3 w-4 h-4" />
+                <h4 class="hidden md:flex">Expiration</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <CheckmarkIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
-                <h4 class="hidden ipadlg:flex">Enabled</h4>
+                <CheckmarkIcon class="mr-0 md:mr-3 w-4 h-4" />
+                <h4 class="hidden md:flex">Enabled</h4>
             </div>
             <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
                 <TicketIcon class="mr-0 lg:mr-3 w-4 h-4" />
                 <h4 class="hidden lg:flex">Tags</h4>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 ipadlg:mr-3 w-4 h-4" />
-                <h4 class="hidden ipadlg:flex">Actions</h4>
+                <ClickIcon class="mr-0 md:mr-3 w-4 h-4" />
+                <h4 class="hidden md:flex">Actions</h4>
             </div>
         </Header>
         <div v-if="toRender.length != 0">
@@ -44,7 +44,7 @@
                     <div class="profile" :key="`profile-${props.item._id || props.item.index}`">
                         <Profile
                             @click="i[props.item.index]++"
-                            :style="{ backgroundColor: props.item.index % 2 == 1 ? '#1a1b1e' : '#242529' }"
+                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
                             :profile="props.item" />
                     </div>
                 </template>

package/src/components/Tasks/CreateTaskAXS.vue

@@ -73,7 +73,7 @@
             </div>
             <!-- Ticket Quantity -->
             <div class="input-wrapper">
-                <label class="label-override mb-2">Amount <span class="ml-2" style="height: 18px">#</span></label>
+                <label class="label-override mb-2">Amount <span class="ml-2 h-[18px]">#</span></label>
                 <div class="input-default">
                     <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.taskQuantity" />
                     <div class="input-incrementer">
@@ -88,7 +88,7 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper" style="z-index: 200 !important; position: relative">
+                            <div class="input-wrapper relative-positioned z-tooltip">
                 <label class="label-override mb-2"
                     >Profile Tag(s)
                     <TagIcon />
@@ -106,7 +106,7 @@
             </div>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper" style="z-index: 100 !important; position: relative">
+                            <div class="input-wrapper relative-positioned z-dropdown">
                 <label class="label-override mb-2"
                     >Account Tag
                     <ScannerIcon />

package/src/components/Tasks/CreateTaskTM.vue

@@ -8,7 +8,7 @@
         </template>
 
         <!-- Task Form -->
-        <div class="form-grid mt-4 mb-4">
+        <div class="grid-responsive-1-2 gap-responsive mt-4 mb-4">
             <!-- Event ID -->
             <div class="input-wrapper">
                 <label class="label-override mb-2"
@@ -79,7 +79,7 @@
             </div>
             <!-- Ticket Quantity -->
             <div class="input-wrapper">
-                <label class="label-override mb-2">Amount <span class="ml-2" style="height: 18px">#</span></label>
+                <label class="label-override mb-2">Amount <span class="ml-2 h-[18px]">#</span></label>
                 <div class="input-default">
                     <input placeholder="20" min="1" type="number" pattern="\d*" v-model="task.taskQuantity" />
                     <div class="input-incrementer">
@@ -94,7 +94,7 @@
             </div>
 
             <!-- Profile Tag(s)  -->
-            <div class="input-wrapper" style="z-index: 200 !important; position: relative">
+                            <div class="input-wrapper relative-positioned z-tooltip">
                 <label class="label-override mb-2"
                     >Profile Tag(s)
                     <TagIcon />
@@ -120,7 +120,7 @@
             </div>
 
             <!-- Account Tag  -->
-            <div class="input-wrapper" style="z-index: 100 !important; position: relative">
+                            <div class="input-wrapper relative-positioned z-dropdown">
                 <label class="label-override mb-2"
                     >Account Tag
                     <ScannerIcon />
@@ -160,7 +160,7 @@
         <!-- Task Switches -->
         <div v-if="!isEU(ui.currentCountry.siteId)" class="grid grid-cols-3 task-switches gap-y-1 justify-between">
             <div class="switch-wrapper flex flex-col mb-2">
-                <h4>
+                <h4 class="text-responsive-sm">
                     Aged <span class="hidden xs:block">Account</span>
                     <SandclockIcon />
                 </h4>
@@ -209,7 +209,7 @@
             <div class="switch-wrapper flex flex-col">
                 <h4>
                     <span class="hidden xs:block">Supports </span> OTP
-                    <MailIcon class="scale-90" style="height: 17px" />
+                    <MailIcon class="scale-90 h-[17px]" />
                 </h4>
                 <Switch class="mx-auto" v-model="task.otpAccount" />
             </div>
@@ -275,7 +275,7 @@
                 <div class="switch-wrapper flex flex-col">
                     <h4>
                         Supports OTP
-                        <MailIcon class="scale-90" />
+                        <MailIcon class="scale-90 h-[17px]" />
                     </h4>
                     <Switch class="mx-auto" v-model="task.otpAccount" />
                 </div>
@@ -421,38 +421,10 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped>
-.task-switches {
-    h4 {
-        color: #e1e1e4;
-        @apply text-xs text-center flex items-center gap-x-2 mx-auto;
-    }
-
-    .switch-wrapper {
-        @apply gap-y-2;
-    }
-}
-
-@media (max-width: 720px) {
-    .task-switches {
-        h4 {
-            font-size: 12px !important;
-        }
-    }
-}
-</style>
 <style lang="scss" scoped>
 .switch-wrapper {
     svg path {
         fill: #a0a0a6 !important;
     }
 }
-
-.z-inf {
-    z-index: 1000;
-}
-
-.z-inf2 {
-    z-index: 2000;
-}
 </style>

package/src/components/Tasks/QuickSettings.vue

@@ -23,29 +23,33 @@
             </div>
         </div>
 
-        <div class="input-container">
+                    <div class="input-container relative-positioned z-tooltip">
             <span class="w-1/3 text-light-300 font-medium text-xs">Checkout Proxies</span>
             <Dropdown
-                class="transparent !w-2/3 !px-0 bg-transparent border-none text-white z-50"
+                class="!w-2/3"
+                variant="transparent"
                 :default="ui.profile.proxyList?.checkout || proxyLists[0]"
+                :value="ui.profile.proxyList?.checkout"
                 :options="proxyLists"
                 :onClick="(f) => saveProxyListUpate('checkout', f)"
                 :allowDefault="false"
             />
         </div>
 
-        <div class="input-container">
+                    <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="transparent !w-2/3 !px-0 bg-transparent border-none text-white z-30"
+                class="!w-2/3"
+                variant="transparent"
                 :default="ui.profile.proxyList?.queue || proxyLists[0]"
-                :onClick="(f) => saveProxyListUpate('queue', f)"
+                :value="ui.profile.proxyList?.queue"
                 :options="proxyLists"
+                :onClick="(f) => saveProxyListUpate('queue', f)"
                 :allowDefault="false"
             />
         </div>
-        <div class="flex mt-5 justify-between flex-row items-center">
-            <div class="flex gap-3 items-center">
+        <div class="flex mt-5 justify-between flex-row items-center quicksettings-bottom">
+            <div class="flex gap-3 items-center quicksettings-versions">
                 <div class="bg-gradient-to-r from-dark-400 to-dark-500 rounded-lg text-xs shadow-lg p-2 px-3 text-white font-medium border border-light-300">
                     Dashboard v{{ version }}
                 </div>
@@ -54,7 +58,7 @@
                 </div>
             </div>
 
-            <div class="flex gap-5">
+            <div class="flex gap-5 quicksettings-buttons">
                 <button
                     class="button-default bg-dark-400 w-24 text-xs flex items-center justify-center gap-x-2 border border-light-300 hover:border-light-400"
                     @click="checkBalances()"
@@ -83,7 +87,8 @@
 }
 
 .input-container {
-    @apply text-white bg-dark-500 mb-3 px-3 rounded-lg border-dark-550 border-2 flex items-center justify-between h-10 overflow-hidden;
+    @apply text-white bg-dark-500 mb-3 px-3 rounded-lg border-dark-550 border-2 flex items-center justify-between h-10;
+    overflow: visible;
 }
 
 .quick-settings-input {
@@ -101,6 +106,104 @@
         @apply text-light-400 opacity-70;
     }
 }
+
+/* iPhone portrait mode fixes */
+@media (max-width: 430px) and (orientation: portrait) {
+    .quicksettings-bottom {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+    
+    .quicksettings-versions {
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    
+    .quicksettings-versions > div {
+        flex: 1;
+        min-width: 120px;
+        text-align: center;
+    }
+    
+    .quicksettings-buttons {
+        justify-content: center;
+        gap: 0.75rem;
+    }
+    
+    .quicksettings-buttons button {
+        width: 5rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+        gap: 0.25rem;
+    }
+    
+    .quicksettings-buttons button img {
+        width: 12px;
+    }
+}
+
+/* Fix dropdown visibility in modal */
+:deep(.modal-body) {
+    overflow: visible !important;
+}
+
+:deep(.component-modal) {
+    overflow: visible !important;
+}
+
+/* Dropdown styling fixes */
+:deep(.dropdown) {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    height: 40px !important;
+}
+
+:deep(.dropdown:hover),
+:deep(.dropdown:focus-within) {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+:deep(.dropdown-display) {
+    height: 100%;
+    padding: 0.625rem;
+}
+
+:deep(.dropdown-value) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+:deep(.dropdown-menu-portal) {
+    z-index: 1000 !important;
+    max-height: 200px !important;
+    overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    touch-action: pan-y !important;
+    -webkit-overflow-scrolling: touch !important;
+    border: 1px solid #3d3e44 !important;
+    background: linear-gradient(135deg, #2a2b30 0%, #2e2f34 100%) !important;
+}
+
+:deep(.dropdown-item) {
+    padding: 0.625rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+}
+
+/* Ensure proper z-index stacking */
+.z-tooltip {
+    z-index: 100 !important;
+}
+
+.z-dropdown {
+    z-index: 90 !important;
+}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";

package/src/components/Tasks/Stats.vue

@@ -1,45 +1,49 @@
 <template>
-    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-2 mb-1 min-h-[2.5rem]" v-if="show" :key="key">
+    <div class="flex text-white font-bold lg:gap-5 gap-1 lg:mb-1 min-h-[2.5rem]" v-if="ui.queueStats.show" :key="key">
         <div
             v-if="ui.queueStats.total"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8"
-        >
+            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
             <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
-                <img width="14px" src="@/assets/img/wildcard.svg" />Total MQM
+                <img width="14px" src="@/assets/img/wildcard.svg" />
+                Total MQM
             </h2>
-            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">{{
-                ui.queueStats.total
-            }}</span>
+            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">
+                {{ ui.queueStats.total }}
+            </span>
         </div>
         <div
             v-if="ui.queueStats.queued"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap"><SkiIcon />Queued</h2>
-            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">{{
-                ui.queueStats.queued
-            }}</span>
+            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
+            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
+                <SkiIcon />
+                Queued
+            </h2>
+            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">
+                {{ ui.queueStats.queued }}
+            </span>
         </div>
         <div
             v-if="ui.queueStats.sleeping"
-            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8"
-        >
-            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap"><TimerIcon />Sleeping</h2>
-            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">{{
-                ui.queueStats.sleeping
-            }}</span>
+            class="stats-card lg:mb-2 mb-1 text-sm rounded-xl lg:p-3 p-2 lg:gap-3 gap-2 flex justify-between items-center min-w-0 h-8">
+            <h2 class="font-bold text-sm flex items-center gap-1 whitespace-nowrap">
+                <TimerIcon />
+                Sleeping
+            </h2>
+            <span class="text-light-400 text-xs font-black flex items-center justify-center whitespace-nowrap">
+                {{ ui.queueStats.sleeping }}
+            </span>
         </div>
         <div
             v-if="ui.queueStats.nextQueuePasses.length > 0"
-            class="stats-card lg:mb-5 mb-2 rounded-xl text-sm flex justify-between items-center lg:p-3 p-2 lg:gap-3 gap-2 min-w-0 h-8"
-        >
+            class="stats-card lg:mb-5 mb-2 rounded-xl text-sm flex justify-between items-center lg:p-3 p-2 lg:gap-3 gap-2 min-w-0 h-8">
             <h2 class="font-bold flex text-sm items-center gap-1 whitespace-nowrap">
-                <CartIcon /><span class="sm:block hidden">Next Passes</span>
+                <CartIcon />
+                <span class="sm:block hidden">Next Passes</span>
                 <span class="sm:hidden block">Pass</span>
             </h2>
-            <span class="text-light-400 text-xs font-black flex items-center text-right truncate">{{
-                ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ")
-            }}</span>
+            <span class="text-light-400 text-xs font-black flex items-center text-right truncate">
+                {{ ui.queueStats.nextQueuePasses.slice(0, queuePassAmount).join(", ") }}
+            </span>
         </div>
         <!-- <div
             v-if="ui.queueStats.carts"
@@ -64,7 +68,6 @@ const getQueuePassAmount = (width) => {
     return 1;
 };
 
-let show = ref(true);
 let key = ref(0);
 let queuePassAmount = ref(getQueuePassAmount(window.innerWidth));