From 31e67577b042d45c40ed1a1a11d66f1a5bb583d1 Mon Sep 17 00:00:00 2001
From: fkwp <github-fkwp@w4ve.de>
Date: Thu, 17 Sep 2026 19:23:14 +0200
Subject: [PATCH] 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>
---
 .../MediaMuteAndSwitchButton.module.css       |  4 +++-
 src/components/MediaMuteAndSwitchButton.tsx   | 23 ++++++++++---------
 2 files changed, 15 insertions(+), 12 deletions(-)

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