Sit the notice as far from the menu's foot as from its sides

- The menu carries bottom padding of its own, so setting one on the notice
  as well made the gap under it twice the gap beside it.
- Guarded as the relationship rather than the number, which is what anyone
  looking at it would notice. Fails at 32 against 16 without the fix.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/components/MediaMuteAndSwitchButton.module.css

@@ -411,7 +411,10 @@ Please see LICENSE in the repository root for full details.
   display: flex;
   align-items: flex-start;
   gap: var(--cpd-space-3x);
-  margin: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-4x);
+  /* Nothing below: the menu's own bottom padding is already the inset, and
+     setting one here as well made the gap under the notice twice the gap
+     beside it. The same reason the grid leaves its own bottom alone. */
+  margin: var(--cpd-space-2x) var(--cpd-space-4x) 0;
   padding: var(--cpd-space-3x);
   border-radius: var(--cpd-space-2x);
   background: var(--cpd-color-bg-subtle-secondary);

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -909,6 +909,17 @@ export const BackgroundEffectsSlowInThisBrowser: Story = {
     await expect(
       await body.findByText(/runs background effects slowly/),
     ).toBeInTheDocument();
+
+    // It sits as far from the menu's foot as from its sides. The menu carries
+    // bottom padding of its own, so setting one here as well doubled the gap —
+    // stated as the relationship, which is what anyone would notice.
+    const menu = document.body.querySelector("[role='menu']")!;
+    const notice = menu.querySelector(`.${styles.effectNotice}`)!;
+    const frame = menu.getBoundingClientRect();
+    const box = notice.getBoundingClientRect();
+    await expect(Math.round(frame.bottom - box.bottom)).toBe(
+      Math.round(box.left - frame.left),
+    );
   },
 };