fix: add openToRight prop to ThreeDotsMenu for mobile

Author: Pavlo Kulyk

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -13,8 +13,12 @@
     <!-- Dropdown menu -->
     <div 
       ref="dropdownRef"
-      :class="{'hidden': !showDropdown, 'block': showDropdown }"
-      class="absolute z-30 right-0 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600">
+      :class="{
+        'block': showDropdown,
+        'hidden': !showDropdown,
+        'left-0 md:left-auto': props.openToRight,
+        'right-0': !props.openToRight}"
+      class="absolute z-30 mt-3 bg-lightThreeDotsMenuBodyBackground divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-darkThreeDotsMenuBodyBackground dark:divide-gray-600 right-0 md:right-0">
         <ul class="py-2 text-sm text-lightThreeDotsMenuBodyText dark:text-darkThreeDotsMenuBodyText" aria-labelledby="dropdownMenuIconButton">
           <li v-for="(item, i) in threeDotsDropdownItems" :key="`dropdown-item-${i}`">
             <div  
@@ -106,6 +110,11 @@ const props = defineProps({
   customActions: Array<AdminForthActionInput>,
   bulkActions: Array<AdminForthBulkActionCommon>,
   checkboxes: Array,
+  openToRight: {
+   type: Boolean,
+   default: false
+ },
+
   updateList: {
     type: Function,
   },

adminforth/spa/src/views/ListView.vue

@@ -104,6 +104,7 @@
         :threeDotsDropdownItems="(coreStore.resourceOptions?.pageInjections?.list?.threeDotsDropdownItems as [])"
         :bulkActions="coreStore.resource?.options?.bulkActions"
         :checkboxes="checkboxes"
+        :openToRight="checkboxes.length > 0"
         @startBulkAction="startBulkAction"
         :updateList="getList"
         :clearCheckboxes="clearCheckboxes"