From 304373e7357e23c1c6913303d8848b47e6012175 Mon Sep 17 00:00:00 2001
From: fkwp <github-fkwp@w4ve.de>
Date: Thu, 17 Sep 2026 18:12:58 +0200
Subject: [PATCH] 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>
---
 .../MediaMuteAndSwitchButton.module.css       | 10 ++++++
 src/components/MediaMuteAndSwitchButton.tsx   | 32 ++++++++++---------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 0d36b8fd3..39925337e 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/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.
  *
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 35ef1b2ea..530cf62a2 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/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 && (
-              <>
-                <Separator />
-                <div
-                  role="group"
-                  aria-label={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
+                role="group"
+                aria-label={t("settings.background_effects_header")}
+              >
+                <div aria-hidden className={styles.sectionHeading}>
+                  <MenuTitle title={t("settings.background_effects_header")} />
                 </div>
-              </>
+                <Separator className={styles.sectionRule} />
+                <div role="none" className={styles.effectGrid}>
+                  {effectTiles()}
+                </div>
+              </div>
             )}
         </div>
         {toggles.length > 0 && <hr />}