fix(@vben/layouts): keep notification dot circular (#8330)

.changeset/gentle-bells-ring.md

@@ -0,0 +1,5 @@
+---
+'@vben/layouts': patch
+---
+
+fix(@vben/layouts): keep the notification status indicator circular across theme radii

packages/effects/layouts/src/widgets/notification/__tests__/notification.test.ts

@@ -0,0 +1,33 @@
+import type { App } from 'vue';
+
+import { createApp, h } from 'vue';
+
+import { afterEach, describe, expect, it } from 'vitest';
+
+import Notification from '../notification.vue';
+
+let activeApp: App | undefined;
+
+afterEach(() => {
+  activeApp?.unmount();
+  activeApp = undefined;
+  document.body.innerHTML = '';
+});
+
+describe('notification popup', () => {
+  it('renders the notification status indicator as a circle', () => {
+    const host = document.createElement('div');
+    document.body.append(host);
+
+    activeApp = createApp({
+      render: () => h(Notification, { dot: true }),
+    });
+    activeApp.mount(host);
+
+    const indicator = host.querySelector<HTMLElement>('.bell-button > span');
+
+    expect(indicator).not.toBeNull();
+    expect(indicator?.classList).toContain('rounded-full');
+    expect(indicator?.classList).not.toContain('rounded-sm');
+  });
+});

packages/effects/layouts/src/widgets/notification/notification.vue

@@ -65,7 +65,7 @@ defineExpose({ toggle });
         <VbenIconButton class="bell-button relative text-foreground">
           <span
             v-if="dot"
-            class="absolute top-0.5 right-0.5 size-2 rounded-sm bg-primary"
+            class="absolute top-0.5 right-0.5 size-2 rounded-full bg-primary"
           ></span>
           <Bell class="size-4" />
         </VbenIconButton>