diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css index 8c856a6a1..f46679f66 100644 --- a/src/components/MediaMuteAndSwitchButton.module.css +++ b/src/components/MediaMuteAndSwitchButton.module.css @@ -375,5 +375,7 @@ Please see LICENSE in the repository root for full details. supplies the lower half, so only the upper half is set here. Without it the message sits flush against the tiles with a gap twice its size underneath. */ .effectError { - padding: var(--cpd-space-4x) var(--cpd-space-4x) 0; + /* A step short of the margin it keeps at the sides: the menu is a column + with a gap of its own, which makes up the difference above. */ + padding: var(--cpd-space-3x) var(--cpd-space-4x) 0; } diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx index fc78900b6..4c0578456 100644 --- a/src/components/MediaMuteAndSwitchButton.tsx +++ b/src/components/MediaMuteAndSwitchButton.tsx @@ -775,20 +775,21 @@ export const MediaMuteAndSwitchButton: FC = ({
{effectTiles()}
- {backgroundEffectError !== undefined && !refusalSeen && ( - // Beside the grid rather than over the call: the user is - // looking here, having just chosen the file this is about. -
- setRefusalSeen(true)} - /> -
- )} )} + {backgroundEffectError !== undefined && !refusalSeen && ( + // Outside the list, which scrolls and is bounded by the call: inside + // it, a message could be cut off by the menu's own height or left + // below the fold, which is no way to tell someone something failed. +
+ setRefusalSeen(true)} + /> +
+ )} {toggles.length > 0 &&
} {toggles.map((toggle) => (