Keep the refusal out of the scrolling list

- It sat inside the device list, which scrolls and is bounded by the size
  of the call, so the menu's own height cut it off
- Now below that list, where nothing can clip it or leave it under the
  fold: no way to tell someone something failed
- 16px from the menu on every side, a step of which the menu's own column
  gap supplies

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

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;
 }

src/components/MediaMuteAndSwitchButton.tsx

@@ -775,20 +775,21 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                 <div role="none" className={styles.effectGrid}>
                   {effectTiles()}
                 </div>
-                {backgroundEffectError !== undefined && !refusalSeen && (
-                  // Beside the grid rather than over the call: the user is
-                  // looking here, having just chosen the file this is about.
-                  <div role="none" className={styles.effectError}>
-                    <Alert
-                      type="critical"
-                      title={backgroundEffectError}
-                      onClose={(): void => setRefusalSeen(true)}
-                    />
-                  </div>
-                )}
               </div>
             )}
         </div>
+        {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.
+          <div role="none" className={styles.effectError}>
+            <Alert
+              type="critical"
+              title={backgroundEffectError}
+              onClose={(): void => setRefusalSeen(true)}
+            />
+          </div>
+        )}
         {toggles.length > 0 && <hr />}
         {toggles.map((toggle) => (
           <ToggleMenuItem