@necrolab/dashboard 0.4.38 → 0.4.40

package/src/components/Tasks/Task.vue

@@ -1,9 +1,5 @@
 <template>
-    <Row
-        class="relative text-white grid-cols-12 gap-2"
-        @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')"
-    >
+    <Row class="relative text-white grid-cols-10 gap-2 ipadlg:grid-cols-12" @click="ui.setOpenContextMenu('')">
         <div class="block md:hidden absolute left-1 top-1">
             <h4 class="text-xs task-id text-white font-bold">
                 {{ props.task.taskId }}
@@ -13,18 +9,13 @@
             <Checkbox
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
-                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)"
-            />
+                @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
             <h4
                 class="task-event-id mx-auto hidden lg:block text-white cursor-pointer hover:text-light-300"
-                @click="copy(props.task.eventId)"
-            >
+                @click="copy(props.task.eventId)">
                 {{ props.task.eventId }}
             </h4>
         </div>
-        <div class="col-span-2 hidden lg:block">
-            <h4 class="text-white">{{ props.task.quantity }}</h4>
-        </div>
         <div class="col-span-2">
             <h4 class="text-white">
                 <span v-if="!props.task.reservedTicketsList">-</span>
@@ -38,13 +29,12 @@
                     :class="{
                         'text-red-400':
                             props.task._timeLeftString === '00:00' || props.task._timeLeftString === 'No Cartholds'
-                    }"
-                >
+                    }">
                     {{ props.task._timeLeftString !== "00:00" ? props.task._timeLeftString : "Expired" }}
                 </span>
             </h4>
         </div>
-        <div class="col-span-6 md:col-span-4 lg:col-span-3 text-center justify-center">
+        <div class="col-span-5 md:col-span-4 lg:col-span-5 ipadlg:col-span-6 text-center justify-center">
             <div class="status-container">
                 <div
                     class="status-indicator"
@@ -54,12 +44,11 @@
                                 ? props.task.statusColor
                                 : 'red'
                         )
-                    "
-                ></div>
-                <span class="status-text">{{ truncate(props.task.status, statusTruncateLength) }}</span>
+                    "></div>
+                <span class="status-text">{{ props.task.status }}</span>
             </div>
         </div>
-        <div class="col-span-2 flex">
+        <div class="col-span-2 ipadlg:col-span-3 flex">
             <ul class="task-buttons">
                 <li>
                     <button v-if="task.active" @click="ui.stopTask(task.taskId)">
@@ -84,7 +73,7 @@
                         <TrashIcon />
                     </button>
                 </li>
-                <li @click.right.prevent="window.setTimeout(() => ui.setOpenContextMenu(task.taskId), 10)">
+                <li @contextmenu.prevent="handleRightClick">
                     <button @click="props.task.isExpanded = !props.task.isExpanded">
                         <span>{{ props.task.isExpanded ? "−" : "+" }}</span>
                     </button>
@@ -98,30 +87,26 @@
         </div>
         <transition name="fade">
             <div
-                class="col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
-                v-if="props.task.isExpanded"
-            >
+                class="col-span-10 ipadlg:col-span-12 flex flex-wrap gap-x-4 gap-y-4 lg:gap-x-10 pt-8 pb-2 xl:justify-around will-change-auto"
+                v-if="props.task.isExpanded">
                 <!-- Details -->
                 <TaskLabel
                     class="md:hidden"
                     image="stadium_w"
                     :text="props.task.eventId"
-                    @click="copy(props.task.eventId)"
-                />
+                    @click="copy(props.task.eventId)" />
 
                 <TaskLabel class="md:hidden" image="bag_w" :text="props.task.quantity" />
                 <TaskLabel
                     v-if="props.task.email"
                     image="mail"
                     :text="props.task.email"
-                    @click="copy(props.task.email)"
-                />
+                    @click="copy(props.task.email)" />
                 <TaskLabel
                     v-if="props.task.password"
                     image="key"
                     :text="props.task.password"
-                    @click="copy(props.task.password)"
-                />
+                    @click="copy(props.task.password)" />
                 <TaskLabel v-if="!props.task.email && !props.task.password" image="mail" text="No account chosen yet" />
                 <TaskLabel v-if="props.task.profileName" image="profile" :text="props.task.profileName" />
                 <TaskLabel image="timer" :text="props.task.smartTimer ? 'On' : 'Off'" />
@@ -136,40 +121,37 @@
                     v-if="props.task.presaleCode"
                     @click="copy(props.task.presaleCode)"
                     image="pencil"
-                    :text="props.task.presaleCode"
-                />
+                    :text="props.task.presaleCode" />
 
                 <TaskLabel v-if="props.task.eventName" image="stadium_w" :text="props.task.eventName" />
                 <TaskLabel v-if="props.task.eventVenue" image="stadium_w" :text="props.task.eventVenue" />
                 <TaskLabel
                     v-if="props.task.eventLocalDate"
                     image="stadium_w"
-                    :text="formatDate(props.task.eventLocalDate)"
-                />
+                    :text="formatDate(props.task.eventLocalDate)" />
                 <TaskLabel image="sandclock" :text="props.task.agedAccount ? 'On' : 'Off'" />
             </div>
         </transition>
 
         <!-- Context menu -->
-
-        <div class="absolute -bottom-1.5 right-5">
-            <transition name="fade">
-                <div
-                    v-if="ui.openContextMenu === task.taskId"
-                    class="bg-dark-500 text-white w-42 grid grid-cols-1 p-1 gap-1 z-50 rounded-lg shadow-xl relative"
-                >
-                    <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
-                        Open Event
-                    </button>
-                    <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
-                        Open in browser (proxy)
-                    </button>
-                    <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
-                        Open in browser (debug)
-                    </button>
-                </div>
-            </transition>
-        </div>
+        <transition name="fade">
+            <div
+                v-if="ui.openContextMenu === task.taskId"
+                ref="contextMenuRef"
+                class="fixed bg-dark-500 text-white w-42 grid grid-cols-1 p-1 gap-1 rounded-lg shadow-xl border border-dark-650"
+                style="z-index: 9999"
+                :style="contextMenuPosition">
+                <button class="btn-primary" @click="openInNewTab(`${ui.currentCountry.url}/event/${task.eventId}`)">
+                    Open Event
+                </button>
+                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(false)">
+                    Open in browser (proxy)
+                </button>
+                <button v-if="task.openerLink" class="btn-primary" @click="openInBrowser(true)">
+                    Open in browser (debug)
+                </button>
+            </div>
+        </transition>
     </Row>
 </template>
 <style lang="scss" scoped>
@@ -183,6 +165,7 @@ h4 {
     padding: 6px 12px;
     gap: 6px;
     transition: all 0.15s ease;
+    max-width: 100%;
 
     &:hover {
         @apply bg-dark-550 border-dark-700;
@@ -300,19 +283,23 @@ h4 {
         gap: 0;
         border-radius: 7px;
         box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        max-width: calc(100vw - 260px); /* Prevent overflow on small screens */
+        overflow: hidden;
 
         button {
-            width: 22px;
-            height: 22px;
+            width: 20px;
+            height: 20px;
             border-radius: 5px;
+            min-width: 20px;
+            flex-shrink: 0;
         }
         svg,
         img {
-            width: 11px;
-            height: 11px;
+            width: 10px;
+            height: 10px;
         }
         span {
-            font-size: 10px;
+            font-size: 9px;
         }
     }
 }
@@ -340,12 +327,13 @@ h4 {
     .task-buttons {
         padding: 1px;
         gap: 0;
-        border-radius: 6px;
+        border-radius: 5px;
 
         button {
-            width: 18px;
-            height: 18px;
-            border-radius: 4px;
+            width: 15px;
+            height: 15px;
+            border-radius: 2px;
+            min-width: 15px;
 
             &:hover {
                 transform: scale(1.1);
@@ -354,11 +342,11 @@ h4 {
 
         svg,
         img {
-            width: 9px;
-            height: 9px;
+            width: 8px;
+            height: 8px;
         }
         span {
-            font-size: 9px;
+            font-size: 8px;
         }
     }
 }
@@ -372,7 +360,7 @@ import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/compon
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
-import { ref } from "vue";
+import { computed, ref, onMounted, onUnmounted, nextTick } from "vue";
 
 const ui = useUIStore();
 
@@ -381,6 +369,53 @@ const props = defineProps({
     task: { type: Object }
 });
 
+// Context menu positioning
+const contextMenuPosition = ref({});
+const contextMenuRef = ref(null);
+
+// Handle right-click to position context menu
+const handleRightClick = (event) => {
+    const menuWidth = 168; // w-42 = 10.5rem = 168px
+    const menuHeight = 200; // Approximate height
+
+    let x = event.clientX;
+    let y = event.clientY - 55;
+
+    // Prevent menu from going off screen
+    if (x + menuWidth > window.innerWidth) {
+        x = event.clientX - menuWidth; // Show to the left instead
+    }
+    if (y + menuHeight > window.innerHeight) {
+        y = event.clientY - menuHeight; // Show above instead
+    }
+
+    contextMenuPosition.value = {
+        left: `${x}px`,
+        top: `${y}px`
+    };
+
+    // Open the context menu for this task
+    ui.setOpenContextMenu(props.task.taskId);
+
+    // Add click outside listener after menu opens
+    nextTick(() => {
+        document.addEventListener("click", handleClickOutside);
+    });
+};
+
+// Handle clicking outside the context menu
+const handleClickOutside = (event) => {
+    if (contextMenuRef.value && !contextMenuRef.value.contains(event.target)) {
+        ui.setOpenContextMenu("");
+        document.removeEventListener("click", handleClickOutside);
+    }
+};
+
+// Cleanup on unmount
+onUnmounted(() => {
+    document.removeEventListener("click", handleClickOutside);
+});
+
 const copy = (txt) => {
     if (!txt) return;
     navigator.clipboard.writeText(txt);
@@ -396,11 +431,6 @@ const colorToClass = (color) => {
     return colorMapping.get(color) || "bg-white";
 };
 
-const truncate = (text, after) => {
-    if (text?.length <= after || after === -1) return text;
-    return text?.substring(0, after) + "...";
-};
-
 const openInBrowser = (debug) => {
     if (!props.task.openerLink) return;
     ui.showSuccess(`Opening in browser ${debug ? "(debug)" : ""}`);
@@ -433,15 +463,4 @@ const openInNewTab = (href) => {
         href: href
     }).click();
 };
-
-const getMaxStatusLength = (width) => {
-    if (width > 1279) return -1;
-    if (width > 767) return 25;
-    if (width > 639) return 30;
-    if (width > 540) return 18;
-    return 13;
-};
-
-let statusTruncateLength = ref(getMaxStatusLength(window.innerWidth));
-window.addEventListener("resize", () => (statusTruncateLength.value = getMaxStatusLength(window.innerWidth)));
 </script>

package/src/components/Tasks/TaskView.vue

@@ -1,13 +1,12 @@
 <template>
     <Table>
-        <Header class="text-center grid-cols-12 gap-2">
+        <Header class="text-center grid-cols-10 gap-2 ipadlg:grid-cols-12">
             <div class="col-span-1 lg:col-span-2 flex items-center justify-start">
                 <Checkbox
                     class="ml-2 mr-4"
                     :toggled="ui.mainCheckbox.tasks"
                     @valueUpdate="ui.toggleMainCheckbox('tasks')"
-                    :isHeader="true"
-                />
+                    :isHeader="true" />
                 <div class="mx-auto hidden lg:flex items-center" @click="ui.toggleSort('eventId')">
                     <EventIcon class="ipadlg:mr-3" />
                     <h4 class="hidden ipadlg:flex">Event</h4>
@@ -15,22 +14,19 @@
                     <UpIcon v-if="ui.sortData.sortBy === 'eventId' && ui.sortData.reversed" class="ml-1" />
                 </div>
             </div>
-            <div class="col-span-2 items-center justify-center hidden lg:flex" v-once>
-                <CartIcon class="mr-0 ipadlg:mr-3" />
-
-                <h4 class="hidden ipadlg:flex">Quantity</h4>
-            </div>
             <div class="col-span-2 flex-center" v-once>
                 <TicketIcon class="mr-0 ipadlg:mr-3" />
                 <h4 class="hidden ipadlg:flex">Tickets</h4>
             </div>
-            <div class="col-span-6 md:col-span-4 lg:col-span-3 flex-center" @click="ui.toggleSort('status')">
+            <div
+                class="col-span-5 md:col-span-4 lg:col-span-5 ipadlg:col-span-6 flex-center"
+                @click="ui.toggleSort('status')">
                 <StatusIcon class="mr-0 ipadlg:mr-3" />
                 <h4 class="hidden ipadlg:flex">Status</h4>
                 <DownIcon v-if="ui.sortData.sortBy === 'status' && !ui.sortData.reversed" class="ml-1" />
                 <UpIcon v-if="ui.sortData.sortBy === 'status' && ui.sortData.reversed" class="ml-1" />
             </div>
-            <div class="col-span-2 flex-center" v-once>
+            <div class="col-span-2 ipadlg:col-span-3 flex-center" v-once>
                 <ClickIcon class="mr-0 ipadlg:mr-3" />
                 <h4 class="hidden ipadlg:flex">Actions</h4>
             </div>
@@ -42,18 +38,25 @@
         </Header>
         <div
             class="flex flex-col divide-y divide-dark-650 overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
-            :style="{ maxHeight: dynamicTableHeight }"
-        >
-            <div
-                v-for="(task, i) in getTasksInOrder()"
-                :key="task.taskId"
-                class="task-row-container"
-            >
+            :style="{ maxHeight: dynamicTableHeight }">
+            <div v-for="(task, i) in getTasksInOrder()" :key="task.taskId" class="task-row-container">
                 <Task :task="task" :style="{ backgroundColor: i % 2 == 1 ? '#1a1b1e' : '#242529' }" />
             </div>
-            <div v-if="getTasksInOrder().length === 0" class="flex justify-center py-8 empty-state">
-                <span v-if="ui.queueStats.total === 0"> No tasks yet</span>
-                <span v-else>{{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}</span>
+            <div
+                v-if="getTasksInOrder().length === 0"
+                class="flex flex-col items-center justify-center py-8 empty-state text-center">
+                <div v-if="ui.queueStats.total === 0">
+                    <TasksIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50 mx-auto" />
+                    <p class="text-light-400 text-sm">No tasks yet</p>
+                    <p class="text-light-500 text-xs mt-1">Create tasks to get started</p>
+                </div>
+                <div v-else>
+                    <TasksIcon class="w-12 h-12 text-dark-400 mb-3 opacity-50 mx-auto" />
+                    <p class="text-light-400 text-sm">
+                        {{ ui.queueStats.total }} hidden task{{ ui.queueStats.total === 1 ? "" : "s" }}
+                    </p>
+                    <p class="text-light-500 text-xs mt-1">Adjust filters to see tasks</p>
+                </div>
             </div>
         </div>
     </Table>
@@ -81,7 +84,6 @@ h4 {
     }
 }
 
-
 .empty-state {
     @apply bg-dark-400;
     color: #969696;
@@ -92,7 +94,7 @@ h4 {
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from "vue";
 import { Table, Header } from "@/components/Table";
-import { EventIcon, CartIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon } from "@/components/icons";
+import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon, UpIcon, TasksIcon } from "@/components/icons";
 import Task from "./Task.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
@@ -173,7 +175,7 @@ const dynamicTableHeight = computed(() => {
     const minHeight = minRowsToShow * rowHeight;
 
     // Calculate how many complete rows can fit
-    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
+    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight) + 1;
     const exactHeight = maxCompleteRows * rowHeight;
 
     return exactHeight + "px";

package/src/components/Tasks/Utilities.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-once v-if="ui.currentModule == 'TM'">
+    <div class="grid grid-cols-1 gap-3 lg:grid-cols-1" v-if="ui.currentModule == 'TM'">
         <div class="lg:justify-self-end">
             <h4 class="hidden lg:block text-white opacity-40 uppercase font-medium">Utils</h4>
             <div class="flex gap-3 justify-between lg:justify-start">

package/src/components/icons/Mail.vue

@@ -1,7 +1,7 @@
 <template>
-    <svg width="19" height="19" viewBox="0 0 19 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-            d="M1.54165 10.7083C1.19217 10.7083 0.893098 10.584 0.644438 10.3353C0.395355 10.0863 0.270813 9.78698 0.270813 9.4375V1.8125C0.270813 1.46302 0.395355 1.16395 0.644438 0.915289C0.893098 0.666206 1.19217 0.541664 1.54165 0.541664H11.7083C12.0578 0.541664 12.3571 0.666206 12.6062 0.915289C12.8548 1.16395 12.9791 1.46302 12.9791 1.8125V9.4375C12.9791 9.78698 12.8548 10.0863 12.6062 10.3353C12.3571 10.584 12.0578 10.7083 11.7083 10.7083H1.54165ZM6.62498 6.26041L1.54165 3.08333V9.4375H11.7083V3.08333L6.62498 6.26041ZM6.62498 4.98958L11.7083 1.8125H1.54165L6.62498 4.98958ZM1.54165 3.08333V1.8125V9.4375V3.08333Z"
+            d="M3.54165 15.2083C3.19217 15.2083 2.893098 15.084 2.644438 14.8353C2.395355 14.5863 2.270813 14.287 2.270813 13.9375V6.3125C2.270813 5.96302 2.395355 5.66395 2.644438 5.41529C2.893098 5.16621 3.19217 5.04166 3.54165 5.04166H16.7083C17.0578 5.04166 17.3571 5.16621 17.6062 5.41529C17.8548 5.66395 17.9791 5.96302 17.9791 6.3125V13.9375C17.9791 14.287 17.8548 14.5863 17.6062 14.8353C17.3571 15.084 17.0578 15.2083 16.7083 15.2083H3.54165ZM10.125 10.7604L3.54165 7.58333V13.9375H16.7083V7.58333L10.125 10.7604ZM10.125 9.48958L16.7083 6.3125H3.54165L10.125 9.48958ZM3.54165 7.58333V6.3125V13.9375V7.58333Z"
             fill="white"
         />
     </svg>

package/src/components/ui/Modal.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="modal-mask pt-14 ipadlg:py-1 overflow-y-scroll scrollable">
-        <div class="component-modal" ref="target">
+    <div class="modal-mask pt-14 ipadlg:py-1 overflow-y-scroll scrollable" @touchmove.prevent>
+        <div class="component-modal" ref="target" @touchmove.stop>
             <div class="modal-header">
                 <slot name="header" />
                 <button @click="ui.toggleModal()" class="btn-icon border-none hover:bg-dark-400">
@@ -16,12 +16,40 @@
 <script setup>
 import { useUIStore } from "@/stores/ui";
 import { onClickOutside } from "@vueuse/core";
-import { ref } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { CloseIcon } from "@/components/icons";
 
 const ui = useUIStore();
 const target = ref(null);
 
+// Store original body styles
+let originalOverflow = "";
+let originalPosition = "";
+let originalTop = "";
+let scrollY = 0;
+
+onMounted(() => {
+    // Lock body scroll
+    scrollY = window.scrollY;
+    originalOverflow = document.body.style.overflow;
+    originalPosition = document.body.style.position;
+    originalTop = document.body.style.top;
+
+    document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = "100%";
+});
+
+onUnmounted(() => {
+    // Restore body scroll
+    document.body.style.overflow = originalOverflow;
+    document.body.style.position = originalPosition;
+    document.body.style.top = originalTop;
+    document.body.style.width = "";
+    window.scrollTo(0, scrollY);
+});
+
 onClickOutside(target, (event) => {
     if (event.target.classList.contains("modal-mask")) ui.toggleModal();
 });
@@ -32,21 +60,24 @@ onClickOutside(target, (event) => {
     z-index: 9998;
     background-color: rgba(17, 17, 17, 0.85);
     backdrop-filter: blur(4px);
+    align-items: center; // Keep centered on desktop
+    justify-content: center;
+    padding: 2rem;
 }
 
 .component-modal {
-    margin: auto;
     width: 640px;
-    @apply bg-dark-300 px-5 py-5 rounded-lg m-auto flex flex-col;
-    
+    // Remove max-height on desktop to show full modal
+    @apply bg-dark-300 px-5 py-5 rounded-lg flex flex-col;
+
     .modal-header {
         @apply flex text-white font-bold;
-        
+
         button {
             @apply ml-auto;
         }
     }
-    
+
     .modal-body {
         @apply flex flex-col;
     }
@@ -54,19 +85,57 @@ onClickOutside(target, (event) => {
 
 @media (max-width: 810px) {
     .modal-mask {
-        @apply items-start pt-4;
-        padding-bottom: 2rem;
+        align-items: flex-start; // Start from top on mobile
+        justify-content: center;
+        padding: 1rem;
+        padding-top: 2rem;
     }
-    
+
     .component-modal {
         width: calc(100vw - 2rem);
-        max-height: calc(100vh - 6rem);
-        overflow-y: auto;
-        margin: 1rem;
+        max-height: calc(100vh - 8rem); // Only limit height on mobile
+        overflow-y: auto; // Only add scrolling on mobile
+    }
+
+    .modal-body {
+        padding-bottom: 3rem; // Increased padding for create button accessibility
+        overflow-y: auto; // Allow scrolling on mobile
+        flex: 1;
+        min-height: 0;
+    }
+}
+
+// iPhone landscape mode specific adjustments
+@media only screen and (max-device-width: 430px) and (orientation: landscape) {
+    .modal-mask {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        padding: 0;
+        padding-top: calc(env(safe-area-inset-top, 0px) + 4rem); // Navbar + safe area
+        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
+        padding-left: env(safe-area-inset-left, 0.5rem);
+        padding-right: env(safe-area-inset-right, 0.5rem);
+        align-items: flex-start;
+        justify-content: center;
+    }
+    
+    .component-modal {
+        width: 100%;
+        max-width: none;
+        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 5rem);
+        min-height: auto;
+        margin: 0;
     }
     
     .modal-body {
-        padding-bottom: 1rem;
+        padding-bottom: 4rem; // Ensure create button is accessible
+        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8rem);
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
     }
 }
 </style>