diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 231b4362e..4a326f310 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -136,6 +136,12 @@ Please see LICENSE in the repository root for full details.
   outline-offset: calc(-1 * var(--cpd-border-width-2));
 }
 
+/* A heading that is ruled off sits closer to its rule than the menu's own
+   spacing allows, which is set for a heading with nothing under it. */
+.menu .sectionHeadingRuled h3 {
+  padding-block-end: var(--cpd-space-1x);
+}
+
 /* The rule under a section heading, drawn edge to edge. A separator insets
    itself by default, which leaves it floating short of the menu's sides.
    The menu also gives a separator room beneath it, for one dividing two
@@ -174,10 +180,11 @@ Please see LICENSE in the repository root for full details.
      their left edge up with the "B" of the heading above them and with the
      radio buttons above that. Matching the surrounding boxes instead puts the
      tiles to the left of both, since a heading insets its own text. */
-  /* No room of its own at the top: the rule above already sets the distance,
-     and adding to it puts the tiles further from their heading than the device
-     rows are from theirs. */
-  padding: 0 var(--cpd-space-4x) var(--cpd-space-3x);
+  /* The same distance to the menu's frame on every side. The rule above and
+     the menu's own bottom padding already supply part of that, so what is set
+     here is only the remainder: the sides carry it all, the top is topped up
+     over the rule's spacing, and the bottom is left to the menu. */
+  padding: var(--cpd-space-1x) var(--cpd-space-4x) 0;
 }
 
 /*
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 530cf62a2..6f7eb9af9 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -647,7 +647,13 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             </>
           )}
           <div role="group" aria-label={optionsButtonLabel}>
-            <div ref={heading} aria-hidden className={styles.sectionHeading}>
+            <div
+              ref={heading}
+              aria-hidden
+              className={classNames(styles.sectionHeading, {
+                [styles.sectionHeadingRuled]: iconsAndLabels === "video",
+              })}
+            >
               <MenuTitle title={optionsButtonLabel} />
             </div>
             {/* The camera menu rules off under each heading. The microphone
@@ -682,7 +688,13 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
                 role="group"
                 aria-label={t("settings.background_effects_header")}
               >
-                <div aria-hidden className={styles.sectionHeading}>
+                <div
+                  aria-hidden
+                  className={classNames(
+                    styles.sectionHeading,
+                    styles.sectionHeadingRuled,
+                  )}
+                >
                   <MenuTitle title={t("settings.background_effects_header")} />
                 </div>
                 <Separator className={styles.sectionRule} />