Rule off under each heading in the camera menu

- A rule under "Camera" as well as under "Background effects"
- Both run edge to edge: a separator insets itself by default, which
  leaves it floating short of the menu's sides
- The divider that separated the two groups goes; the rules do that work
- Closer to what they name than a separator's own spacing allows, which
  is set for one dividing two sections
- Scoped to the camera menu: the microphone menu still divides its two
  sections instead, which is the design the audio menu was drawn to

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

src/components/MediaMuteAndSwitchButton.module.css

@@ -136,6 +136,16 @@ Please see LICENSE in the repository root for full details.
   outline-offset: calc(-1 * var(--cpd-border-width-2));
 }
 
+/* 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
+   sections; under a heading that reads as the heading floating away from
+   what it names. */
+.menu .sectionRule {
+  margin-inline: 0;
+  margin-block-end: var(--cpd-space-3x);
+}
+
 /*
  * The Background effects grid.
  *

src/components/MediaMuteAndSwitchButton.tsx

@@ -650,6 +650,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             <div ref={heading} aria-hidden className={styles.sectionHeading}>
               <MenuTitle title={optionsButtonLabel} />
             </div>
+            {/* The camera menu rules off under each heading. The microphone
+                menu still divides its two sections instead, which is the
+                design the audio menu was drawn to. */}
+            {iconsAndLabels === "video" && (
+              <Separator className={styles.sectionRule} />
+            )}
             {/* The heading sits outside, so the meter can never ride up over it:
               sticky only holds while this block is in view. */}
             <div role="none">
@@ -672,22 +678,18 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           {iconsAndLabels === "video" &&
             backgroundEffects !== undefined &&
             backgroundEffects.length > 0 && (
-              <>
+              <div
-                <Separator />
+                role="group"
-                <div
+                aria-label={t("settings.background_effects_header")}
-                  role="group"
+              >
-                  aria-label={t("settings.background_effects_header")}
+                <div aria-hidden className={styles.sectionHeading}>
-                >
+                  <MenuTitle title={t("settings.background_effects_header")} />
-                  <div aria-hidden className={styles.sectionHeading}>
-                    <MenuTitle
-                      title={t("settings.background_effects_header")}
-                    />
-                  </div>
-                  <div role="none" className={styles.effectGrid}>
-                    {effectTiles()}
-                  </div>
                 </div>
-              </>
+                <Separator className={styles.sectionRule} />
+                <div role="none" className={styles.effectGrid}>
+                  {effectTiles()}
+                </div>
+              </div>
             )}
         </div>
         {toggles.length > 0 && <hr />}