fix: Dropdown menu issues (#10364)

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -38,20 +38,20 @@ const emit = defineEmits(['click', 'action']);
 
 const { t } = useI18n();
 
-const isOpen = ref(false);
+const [showActionsDropdown, toggleDropdown] = useToggle();
 
 const categoryMenuItems = [
   {
     label: 'Edit',
     action: 'edit',
     value: 'edit',
-    icon: 'edit',
+    icon: 'i-lucide-pencil',
   },
   {
     label: 'Delete',
     action: 'delete',
     value: 'delete',
-    icon: 'delete',
+    icon: 'i-lucide-trash',
   },
 ];
 
@@ -73,7 +73,7 @@ const handleClick = slug => {
 
 const handleAction = ({ action, value }) => {
   emit('action', { action, value, id: props.id });
-  isOpen.value = false;
+  toggleDropdown(false);
 };
 </script>
 
@@ -81,16 +81,16 @@ const handleAction = ({ action, value }) => {
   <CardLayout>
     <template #header>
       <div class="flex gap-2">
-        <div class="flex justify-between w-full gap-1">
-          <div class="flex items-center justify-start gap-2">
+        <div class="flex justify-between w-full gap-2">
+          <div class="flex items-center justify-start w-full min-w-0 gap-2">
             <span
-              class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
+              class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
               @click="handleClick(slug)"
             >
               {{ categoryTitleWithIcon }}
             </span>
             <span
-              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center truncate border rounded-lg min-w-fit text-slate-500 w-fit border-slate-200 dark:border-slate-800 dark:text-slate-400"
+              class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"
             >
               {{
                 t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
@@ -99,22 +99,24 @@ const handleAction = ({ action, value }) => {
               }}
             </span>
           </div>
-          <div class="relative group" @click.stop>
-            <OnClickOutside @trigger="isOpen = false">
-              <Button
-                icon="i-lucide-ellipsis-vertical"
-                color="slate"
-                size="xs"
-                class="rounded-md group-hover:bg-n-solid-2"
-                @click="isOpen = !isOpen"
-              />
-              <DropdownMenu
-                v-if="isOpen"
-                :menu-items="categoryMenuItems"
-                class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
-                @action="handleAction"
-              />
-            </OnClickOutside>
+          <div
+            v-on-clickaway="() => toggleDropdown(false)"
+            class="relative group"
+          >
+            <Button
+              icon="i-lucide-ellipsis-vertical"
+              color="slate"
+              size="xs"
+              variant="ghost"
+              class="rounded-md group-hover:bg-n-alpha-2"
+              @click="toggleDropdown()"
+            />
+            <DropdownMenu
+              v-if="showActionsDropdown"
+              :menu-items="categoryMenuItems"
+              class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full z-60"
+              @action="handleAction"
+            />
           </div>
         </div>
       </div>