@necrolab/dashboard 0.4.50 → 0.4.52

package/src/assets/css/_input.scss

@@ -3,8 +3,7 @@
    ========================================================================== */
 
 .input-default {
-    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-3 py-2 border-dark-550 border-2;
-    height: 3.45em;
+    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-3 py-2 border-dark-550 border-2 h-10;
     transition: border-color 0.15s ease;
 
     &:focus-within {
@@ -85,8 +84,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .ant-select {
-    @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;
+    @apply bg-dark-500 flex items-center bg-clip-padding rounded-lg relative box-border px-1 py-1 border-dark-550 border-2 h-10 !important;
     height: fit-content;
 
     .ant-select-selector {

package/src/assets/css/_utilities.scss

@@ -273,24 +273,6 @@
 
 /* Mobile portrait utilities */
 @screen mobile-portrait {
-    .mobile-portrait-hidden {
-        display: none !important;
-    }
-
-    .mobile-portrait-full-width {
-        width: 100% !important;
-    }
-
-    .mobile-portrait-stack {
-        flex-direction: column !important;
-        gap: 0.75rem !important;
-    }
-
-    .mobile-portrait-compact {
-        padding: 0.25rem !important;
-        gap: 0.25rem !important;
-    }
-
     .editor-controls-row,
     .proxy-controls-row {
         gap: 0.75rem !important;
@@ -312,41 +294,6 @@
     }
 }
 
-/* Desktop-specific utilities */
-@screen lg {
-    .desktop-only {
-        display: block !important;
-    }
-
-    .desktop-hidden {
-        display: none !important;
-    }
-}
-
-/* Height-based responsive utilities */
-@screen h-sm {
-    .short-screen-compact {
-        padding-top: 0.5rem !important;
-        padding-bottom: 0.5rem !important;
-    }
-
-    .short-screen-hidden {
-        display: none !important;
-    }
-}
-
-/* Touch device optimizations */
-@screen touch {
-    .touch-larger {
-        min-height: 44px !important;
-        min-width: 44px !important;
-    }
-
-    .touch-spacing {
-        margin: 0.25rem !important;
-    }
-}
-
 /* ==========================================================================
    CONSOLE UTILITIES
    ========================================================================== */

package/src/assets/css/main.scss

@@ -125,31 +125,6 @@ body > .dropdown-content-portal,
     -webkit-overflow-scrolling: touch !important;
 }
 
-/* iPhone landscape mode - critical editor scrolling overrides */
-@media (max-height: 500px) and (orientation: landscape) {
-    .code-editor,
-    .proxy-editor,
-    .editor-container,
-    .proxy-editor-container,
-    .editor-wrapper {
-        overflow: auto !important;
-        -webkit-overflow-scrolling: touch !important;
-        touch-action: pan-y !important;
-        overscroll-behavior: contain !important;
-    }
-
-    body {
-        overflow-y: auto !important;
-        touch-action: pan-y !important;
-        overscroll-behavior: contain !important;
-    }
-
-    html {
-        overflow-y: auto !important;
-        overscroll-behavior: contain !important;
-    }
-}
-
 /* ==========================================================================
    BODY & LAYOUT
    ========================================================================== */

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

@@ -1,13 +1,12 @@
 <template>
     <Table>
-        <Header class="text-center grid-cols-5 md:grid-cols-7">
+        <Header class="text-center grid-cols-5 md:grid-cols-7 sticky top-0 bg-dark-400 z-10">
             <div class="lg:col-span-2 col-span-3 flex">
                 <Checkbox
                     class="mr-3"
                     :toggled="ui.mainCheckbox.accounts"
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
-                    :isHeader="true"
-                />
+                    :isHeader="true" />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
                     <MailIcon class="mr-0 md:mr-3 w-4 h-4" />
                     <h4 class="hidden md:flex">Email</h4>
@@ -30,21 +29,21 @@
                 <h4 class="hidden md:flex">Actions</h4>
             </div>
         </Header>
-        <div v-if="toRender.length != 0">
+        <div
+            v-if="toRender.length != 0"
+            class="overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
+            :style="{ maxHeight: dynamicTableHeight }">
             <RecycleScroller
                 :items="toRender"
                 :item-size="64"
                 key-field="index"
-                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
-                :style="{ maxHeight: dynamicTableHeight }"
-            >
+                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650">
                 <template #default="props">
                     <div class="account" :key="`account-${props.item._id || props.item.index}`">
                         <Account
                             @click="i[props.item.index]++"
                             :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
-                            :account="props.item"
-                        />
+                            :account="props.item" />
                     </div>
                 </template>
             </RecycleScroller>
@@ -138,19 +137,19 @@ const dynamicTableHeight = computed(() => {
     const searchHeight = 50; // Search and filter controls
     const margins = windowWidth.value >= 1024 ? 40 : 25;
     const bufferSpace = 50; // Conservative buffer to prevent partial items
-    
+
     const totalUsedSpace = headerHeight + titleHeight + searchHeight + margins + bufferSpace;
     const availableHeight = windowHeight.value - totalUsedSpace;
-    
+
     // Account row height is always 64px
     const rowHeight = 64;
     const minRowsToShow = 2;
     const minHeight = minRowsToShow * rowHeight;
-    
+
     // Calculate exact number of complete rows that fit with conservative approach
     const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
     const exactHeight = maxCompleteRows * rowHeight;
-    
+
     return exactHeight + "px";
 });
 </script>

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

@@ -13,16 +13,14 @@
                     :style="menuStyle"
                     @click.stop
                     @wheel.stop
-                    @touchmove.stop
-                >
+                    @touchmove.stop>
                     <div
                         v-for="(country, i) in countries"
                         v-bind:key="country"
                         :class="`cursor-pointer w-12 ${i === 0 ? '' : 'my-2'}`"
-                        @click="set(country)"
-                    >
+                        @click="set(country)">
                         <div class="flex justify-center items-center smooth-hover">
-                            <span class="text-sm">{{ country }} </span>
+                            <span class="text-sm">{{ country }}</span>
                             <img class="w-5 ml-3" :src="`/flags/${country?.toLowerCase()}.svg`" />
                         </div>
                     </div>
@@ -91,11 +89,11 @@ watch(
 }
 
 .small-dropdown {
+    @apply h-10 !important;
     background-clip: border-box !important;
     /* border-radius: 100% !important; */
     padding: 0;
     width: 3em !important;
-    height: 3.45em !important; /* Match input-default height */
     display: flex;
     justify-items: center;
     justify-content: center;

package/src/components/Filter/FilterPreview.vue

@@ -1,6 +1,9 @@
 <template>
     <Modal class="overflow-y-scroll max-w-screen">
-        <template #header> Filter JSON data <FilterIcon class="ml-4" /> </template>
+        <template #header>
+            Filter JSON data
+            <FilterIcon class="ml-4" />
+        </template>
 
         <div class="my-3">
             <div class="editor-container">
@@ -13,27 +16,16 @@
                         spellcheck="false"
                         @scroll="syncScroll"
                         @input="highlightCode"
-                        @keydown.tab.prevent="handleTab"
-                    ></textarea>
+                        @keydown.tab.prevent="handleTab"></textarea>
                 </div>
             </div>
             <p class="text-red-400 text-bold mt-2">{{ errorMessage }}</p>
         </div>
 
         <div class="ml-auto flex">
-            <button
-                class="btn-action"
-                @click="save()"
-            >
-                Apply
-            </button>
-
-            <button
-                class="btn-action ml-2"
-                @click="done()"
-            >
-                Close
-            </button>
+            <button class="btn-action" @click="save()">Apply</button>
+
+            <button class="btn-action ml-2" @click="done()">Close</button>
         </div>
     </Modal>
 </template>
@@ -72,7 +64,7 @@
     /* Make text completely transparent */
     color: rgba(0, 0, 0, 0);
     caret-color: #e2e8f0;
-    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;
@@ -92,7 +84,6 @@
     overflow: auto;
 }
 
-
 .code-highlight {
     width: 100%;
     height: 100%;
@@ -100,7 +91,7 @@
     max-height: 500px;
     overflow: auto;
     white-space: pre;
-    font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace;
+    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
     font-size: 14px;
     line-height: 1.6;
     background-color: transparent !important;
@@ -133,30 +124,26 @@ const codeDisplay = ref(null);
 // Function to highlight code using Prism
 const highlightCode = () => {
     if (!codeDisplay.value || !codeEditor.value) return;
-    
+
     // Ensure Prism is available
-    if (typeof Prism === 'undefined') {
-        console.error('Prism is not loaded');
+    if (typeof Prism === "undefined") {
+        console.error("Prism is not loaded");
         return;
     }
-    
+
     // Use requestAnimationFrame for smoother updates
     requestAnimationFrame(() => {
         try {
             // Update the pre element with highlighted HTML
-            const highlighted = Prism.highlight(
-                text.value || '',
-                Prism.languages.json,
-                'json'
-            );
+            const highlighted = Prism.highlight(text.value || "", Prism.languages.json, "json");
             codeDisplay.value.innerHTML = highlighted;
-            codeDisplay.value.className = 'language-json code-highlight';
+            codeDisplay.value.className = "language-json code-highlight";
         } catch (e) {
             console.error("Highlight error:", e);
             // Fallback to plain text if highlighting fails
-            codeDisplay.value.textContent = text.value || '';
+            codeDisplay.value.textContent = text.value || "";
         }
-        
+
         // Ensure scroll positions are synced after highlighting
         syncScroll();
     });
@@ -165,7 +152,7 @@ const highlightCode = () => {
 // Function to sync scrolling between textarea and highlighted code
 const syncScroll = () => {
     if (!codeDisplay.value || !codeEditor.value) return;
-    
+
     // Synchronize scrolling between the textarea and the highlighted code
     requestAnimationFrame(() => {
         codeDisplay.value.scrollTop = codeEditor.value.scrollTop;
@@ -178,11 +165,11 @@ const handleTab = (e) => {
     const textarea = codeEditor.value;
     const start = textarea.selectionStart;
     const end = textarea.selectionEnd;
-    
+
     // Insert 4 spaces at cursor position
-    const spaces = '    ';
+    const spaces = "    ";
     text.value = text.value.substring(0, start) + spaces + text.value.substring(end);
-    
+
     // Move cursor position after the inserted tab
     nextTick(() => {
         textarea.selectionStart = textarea.selectionEnd = start + spaces.length;
@@ -195,12 +182,12 @@ onMounted(() => {
     // Apply highlighting when the component is mounted
     nextTick(() => {
         highlightCode();
-        
+
         // Ensure scroll synchronization on initial load
         if (codeEditor.value && codeDisplay.value) {
             syncScroll();
         }
-        
+
         // Focus the editor
         if (codeEditor.value) {
             codeEditor.value.focus();