fix(UserMenu): align chips

Author: benjamincanac

app/components/UserMenu.vue

@@ -167,13 +167,15 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
     />
 
     <template #chip-leading="{ item }">
-      <span
-        :style="{
-          '--color-light': `var(--color-${(item as any).chip}-500)`,
-          '--color-dark': `var(--color-${(item as any).chip}-400)`
-        }"
-        class="ms-0.5 size-2 rounded-full bg-(--color-light) dark:bg-(--color-dark)"
-      />
+      <div class="inline-flex items-center justify-center shrink-0 size-5">
+        <span
+          class="rounded-full ring ring-bg bg-(--chip-light) dark:bg-(--chip-dark) size-2"
+          :style="{
+            '--chip-light': `var(--color-${(item as any).chip}-500)`,
+            '--chip-dark': `var(--color-${(item as any).chip}-400)`
+          }"
+        />
+      </div>
     </template>
   </UDropdownMenu>
 </template>