From f7ebbe21352c0132756312eb760fe03f2f1d9e63 Mon Sep 17 00:00:00 2001
From: Natsumi <cmcooper123@hotmail.com>
Date: Sat, 31 Jan 2026 08:11:05 +1300
Subject: [PATCH] Fix user dialog dot indicator

---
 .../dialogs/UserDialog/UserActionDropdown.vue | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/dialogs/UserDialog/UserActionDropdown.vue b/src/components/dialogs/UserDialog/UserActionDropdown.vue
index 6011ede1..64cec3e8 100644
--- a/src/components/dialogs/UserDialog/UserActionDropdown.vue
+++ b/src/components/dialogs/UserDialog/UserActionDropdown.vue
@@ -16,11 +16,12 @@
         <DropdownMenu>
             <DropdownMenuTrigger as-child>
                 <div class="ml-2">
-                    <Button :variant="hasRisk ? 'destructive' : 'outline'" size="icon-lg" class="rounded-full">
+                    <Button
+                        :variant="hasRisk ? 'destructive' : 'outline'"
+                        size="icon-lg"
+                        class="rounded-full"
+                        :class="{ 'dot-indicator': hasRequest }">
                         <MoreHorizontal />
-                        <span
-                            class="absolute right-6 top-15.5 h-2.5 w-2.5 rounded-full ring-2 ring-background"
-                            :class="dotClass" />
                     </Button>
                 </div>
             </DropdownMenuTrigger>
@@ -275,12 +276,19 @@
             userDialog.value.isHideAvatar
     );
 
-    const dotClass = computed(() => {
-        if (hasRequest.value) return 'bg-emerald-500';
-        return 'opacity-0';
-    });
-
     function onCommand(command) {
         props.userDialogCommand(command);
     }
 </script>
+<style scoped>
+    .dot-indicator::after {
+        margin-left: 30px;
+        margin-bottom: 30px;
+        content: '';
+        width: 10px;
+        height: 10px;
+        background-color: var(--color-emerald-500);
+        border-radius: 50%;
+        position: absolute;
+    }
+</style>