diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 111788d9c..9dffd659b 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/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);
diff --git a/src/components/MediaMuteAndSwitchButton.stories.tsx b/src/components/MediaMuteAndSwitchButton.stories.tsx
index da5fd9917..c6c48ee68 100644
--- a/src/components/MediaMuteAndSwitchButton.stories.tsx
+++ b/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),
+    );
   },
 };