Fix notification badge sizing (#34655)

* Fix notification badge sizing

* Update snapshots

* Add space panel badge regression test

* Update snapshot

* Updated test to test assert screenshot

* Update snapshot to look correct

* Update playwright test

* fix aliased issues

apps/web/playwright/e2e/spaces/spaces.spec.ts

@@ -261,6 +261,66 @@ test.describe("Spaces", () => {
         await expect(buttons.nth(2)).toHaveAttribute("aria-label", "My Space");
     });
 
+    test(
+        "should render readable notification badges in the space panel",
+        { tag: "@screenshot" },
+        async ({ app, user, bot }) => {
+            const roomId = await app.client.createRoom({
+                name: "Unread Room",
+            });
+            await app.client.createSpace({
+                name: "Unread Space",
+                initial_state: [spaceChildInitialState(user.homeServer, roomId)],
+            });
+            const spaceButton = await app.getSpacePanelButton("Unread Space");
+            await expect(spaceButton).toBeVisible();
+
+            await bot.prepareClient();
+            const botUserId = await bot.evaluate((client) => client.getSafeUserId());
+            await app.client.evaluate(
+                async (client, { botUserId, roomId }) => {
+                    await client.invite(roomId, botUserId);
+                },
+                { botUserId, roomId },
+            );
+            await bot.joinRoom(roomId);
+
+            for (let i = 0; i < 10; i++) {
+                await bot.sendMessage(roomId, `${user.displayName} unread message ${i}`);
+            }
+
+            const badge = spaceButton.locator(".mx_SpacePanel_notificationBadge");
+            await expect(badge).toHaveText("10");
+
+            await expect(spaceButton).toMatchScreenshot("space-panel-notification-badge.png", {
+                css: `
+                    /* Mask the unstable anti-aliased badge edge at the screenshot crop boundary. */
+                    .mx_SpacePanel .mx_SpaceButton {
+                        position: relative !important;
+                    }
+
+                    .mx_SpacePanel .mx_SpaceButton::before {
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        height: 3px;
+                        background: var(--cpd-color-bg-canvas-default);
+                        z-index: 1;
+                        pointer-events: none;
+                    }
+
+                    /* Avatar initials can render differently in CI; keep this snapshot focused on the badge. */
+                    .mx_SpacePanel [role="img"][data-color],
+                    .mx_SpacePanel .mx_BaseAvatar {
+                        color: transparent !important;
+                    }
+                `,
+            });
+        },
+    );
+
     test("should include rooms in space home", async ({ page, app, user }) => {
         const roomId1 = await app.client.createRoom({
             name: "Music",

apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap

@@ -640,13 +640,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               <span>
                 Show a badge 
                 <div
-                  class="mx_NotificationSettings2_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _badge2Char_kb9ny_56 cpd-theme-light"
+                  class="mx_NotificationSettings2_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
                   data-badge-type="badge_2char"
                   data-notification-level="notification"
                   data-testid="notification-badge"
                 >
                   <span
-                    class="_count_kb9ny_39"
+                    class="_count_19whq_40"
                   >
                     1
                   </span>
@@ -1658,13 +1658,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               <span>
                 Show a badge 
                 <div
-                  class="mx_NotificationSettings2_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _badge2Char_kb9ny_56 cpd-theme-light"
+                  class="mx_NotificationSettings2_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
                   data-badge-type="badge_2char"
                   data-notification-level="notification"
                   data-testid="notification-badge"
                 >
                   <span
-                    class="_count_kb9ny_39"
+                    class="_count_19whq_40"
                   >
                     1
                   </span>

apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap

@@ -27,7 +27,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
         >
           <button
             aria-label="Jump to first unread room."
-            class="mx_SpacePanel_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _badge2Char_kb9ny_56 cpd-theme-light"
+            class="mx_SpacePanel_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
             data-badge-type="badge_2char"
             data-notification-level="notification"
             data-testid="notification-badge"
@@ -35,7 +35,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
             type="button"
           >
             <span
-              class="_count_kb9ny_39"
+              class="_count_19whq_40"
             >
               8
             </span>

apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -66,13 +66,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         />
       </svg>
       <div
-        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
         data-badge-type="dot"
         data-notification-level="highlight"
         data-testid="notification-badge"
       >
         <span
-          class="_count_kb9ny_39"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -117,13 +117,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         />
       </svg>
       <div
-        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _notification_kb9ny_8 _dot_kb9ny_32"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _dot_19whq_33"
         data-badge-type="dot"
         data-notification-level="notification"
         data-testid="notification-badge"
       >
         <span
-          class="_count_kb9ny_39"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -231,13 +231,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         />
       </svg>
       <div
-        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
         data-badge-type="dot"
         data-notification-level="highlight"
         data-testid="notification-badge"
       >
         <span
-          class="_count_kb9ny_39"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -282,13 +282,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         />
       </svg>
       <div
-        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
         data-badge-type="dot"
         data-notification-level="highlight"
         data-testid="notification-badge"
       >
         <span
-          class="_count_kb9ny_39"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -333,13 +333,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         />
       </svg>
       <div
-        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_kb9ny_8 _visible_kb9ny_15 _highlight_kb9ny_47 _dot_kb9ny_32"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
         data-badge-type="dot"
         data-notification-level="highlight"
         data-testid="notification-badge"
       >
         <span
-          class="_count_kb9ny_39"
+          class="_count_19whq_40"
         />
       </div>
     </button>

packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.module.css

@@ -6,7 +6,8 @@
  */
 
 .notificationBadge {
-    box-sizing: border-box;
+    /* App-side badge borders should sit outside the fixed badge size. */
+    box-sizing: content-box;
     padding: 0;
     border: 0;
     font: inherit;