Sit the grid evenly in the menu, and the headings closer to their rules

- The grid now stands the same distance from the menu's frame on every
  side: 16px left, right, bottom, and above from its rule. It was 16 at
  the sides but 12 above and 28 below, since its own bottom padding and
  the menu's were both in play
- A ruled heading sits closer to its rule than the menu's own spacing
  allows, which is set for a heading with nothing under it: 14.5px from
  the heading's text rather than 18.5px, and the same in both sections
- Scoped to headings that are ruled off, so the microphone menu keeps the
  spacing it was drawn with

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

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

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