Merge pull request #471 from devforth/feature/AdminForth/1201/not-clickable-edit-history-btn

fix: wrap custom action components in a div for better styling

Author: SerVitasik

adminforth/spa/src/components/ThreeDotsMenu.vue

@@ -44,22 +44,24 @@
             </div>
           </li>
           <li v-for="action in customActions" :key="action.id">
-            <component
-              :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
-              :meta="action.customComponent?.meta"
-              @callAction="(payload? : Object) => handleActionClick(action, payload)"
-            >
-              <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
-                <div class="flex items-center gap-2">
-                  <component 
-                    v-if="action.icon" 
-                    :is="getIcon(action.icon)" 
-                    class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
-                  />
-                  {{ action.name }}
-                </div>
-              </a>
-            </component>
+            <div class="wrapper"> 
+              <component
+                :is="(action.customComponent && getCustomComponent(action.customComponent)) || CallActionWrapper"
+                :meta="action.customComponent?.meta"
+                @callAction="(payload? : Object) => handleActionClick(action, payload)"
+              >
+                <a href="#" @click.prevent class="block px-4 py-2 hover:text-lightThreeDotsMenuBodyTextHover hover:bg-lightThreeDotsMenuBodyBackgroundHover dark:hover:bg-darkThreeDotsMenuBodyBackgroundHover dark:hover:text-darkThreeDotsMenuBodyTextHover">
+                  <div class="flex items-center gap-2">
+                    <component 
+                      v-if="action.icon" 
+                      :is="getIcon(action.icon)" 
+                      class="w-4 h-4 text-lightPrimary dark:text-darkPrimary"
+                    />
+                    {{ action.name }}
+                  </div>
+                </a>
+              </component>
+            </div>
           </li>
           <li v-for="action in (bulkActions ?? []).filter(a => a.showInThreeDotsDropdown)" :key="action.id">
             <a href="#" @click.prevent="startBulkAction(action.id)"