From 8ffc8e27206d6f0c584fc38c3935fe303b8cbdef Mon Sep 17 00:00:00 2001 From: fkwp Date: Fri, 18 Sep 2026 15:04:40 +0200 Subject: [PATCH] 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) --- src/components/MediaMuteAndSwitchButton.module.css | 5 ++++- src/components/MediaMuteAndSwitchButton.stories.tsx | 11 +++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) 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), + ); }, };