From 17caded88bca05b215dd67deb9afbe0eef4905e1 Mon Sep 17 00:00:00 2001
From: "Timo K." <toger5@hotmail.de>
Date: Wed, 28 Oct 2026 16:11:49 +0100
Subject: [PATCH] clean up css calc in ts code

---
 src/components/MediaMuteAndSwitchButton.module.css | 14 +++++++++++---
 src/components/MediaMuteAndSwitchButton.tsx        | 10 +++-------
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index fb298a635..41c4e1830 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -45,8 +45,16 @@ Please see LICENSE in the repository root for full details.
    so CSS can't size it against the call. */
 .deviceList {
   max-block-size: var(--device-list-max-height);
-  /* Keeps a row reached by keyboard clear of the sticky heading. */
-  scroll-padding-block-start: var(--device-list-scroll-padding-start, 0);
+  /* Keeps a row focused by keyboard clear of the sticky heading… */
+  scroll-padding-block-start: var(--device-list-heading-height, 0px);
+}
+
+/* …and of the sticky meter and the padding strip beneath it. */
+.deviceListWithMeter {
+  scroll-padding-block-end: calc(
+    var(--device-list-meter-height, 0px) +
+      var(--cpd-menu-padding-block-end, 0px)
+  );
 }
 
 /* Compound's heading rule heads each section; the design adds space below it. */
@@ -73,7 +81,7 @@ Please see LICENSE in the repository root for full details.
   background: var(--cpd-color-bg-canvas-default);
 }
 
-/* Fills the band between the meter and the frame, or rows show through it. */
+/* Fills the padding strip between the audio meter and the frame. Prohibits overlaps. */
 .stickyMeter::after {
   content: "";
   position: absolute;
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 5e06cccba..361d88f43 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -363,14 +363,10 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             {
               "--device-list-max-height":
                 listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              // A row reached by keyboard stays above the meter and the band its
-              // ground fills.
-              scrollPaddingBlockEnd:
-                meterHeight === undefined
-                  ? undefined
-                  : `calc(${meterHeight}px + var(--cpd-menu-padding-block-end, 0px))`,
-              "--device-list-scroll-padding-start":
+              "--device-list-heading-height":
                 headingHeight === undefined ? undefined : `${headingHeight}px`,
+              "--device-list-meter-height":
+                meterHeight === undefined ? undefined : `${meterHeight}px`,
             } as CSSProperties
           }
         >