From fb8fc419942ca52e7c55b37ddc2dace3b5e1e706 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Sun, 25 Jan 2026 14:55:45 -0700
Subject: [PATCH] fix(ui): adjust dropdown positioning and scrolling in voices
 control and improve the ui label for speed controls

---
 src/components/player/SpeedControl.tsx      | 34 +++++++++++++++++++--
 src/components/player/VoicesControlBase.tsx |  4 +--
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/player/SpeedControl.tsx b/src/components/player/SpeedControl.tsx
index eafe41a..768effd 100644
--- a/src/components/player/SpeedControl.tsx
+++ b/src/components/player/SpeedControl.tsx
@@ -45,7 +45,36 @@ export const SpeedControl = ({
     }
   }, [localAudioSpeed, audioPlayerSpeed, setAudioPlayerSpeedAndRestart]);
 
-  const displaySpeed = useMemo(() => (localAudioSpeed !== 1.0 ? localAudioSpeed : localVoiceSpeed), [localAudioSpeed, localVoiceSpeed]);
+  const formatSpeed = useCallback((speed: number, maxDecimals: number) => {
+    const rounded = Number(speed.toFixed(maxDecimals));
+    return rounded.toString();
+  }, []);
+
+  const triggerLabel = useMemo(
+    () => {
+      const parts: string[] = [];
+      if (localVoiceSpeed !== 1.0) parts.push(`${formatSpeed(localVoiceSpeed, 1)}x`);
+      if (localAudioSpeed !== 1.0) parts.push(`${formatSpeed(localAudioSpeed, 1)}x`);
+      return parts.length > 0 ? parts.join(' • ') : '1x';
+    },
+    [formatSpeed, localVoiceSpeed, localAudioSpeed]
+  );
+
+  const compactTriggerLabel = useMemo(() => {
+    const voiceIsDefault = localVoiceSpeed === 1.0;
+    const audioIsDefault = localAudioSpeed === 1.0;
+
+    let combined = 1.0;
+    if (!voiceIsDefault && !audioIsDefault) {
+      combined = (localVoiceSpeed + localAudioSpeed) / 2;
+    } else if (!voiceIsDefault) {
+      combined = localVoiceSpeed;
+    } else if (!audioIsDefault) {
+      combined = localAudioSpeed;
+    }
+
+    return `${formatSpeed(combined, 2)}x`;
+  }, [formatSpeed, localVoiceSpeed, localAudioSpeed]);
 
   const min = 0.5;
   const max = 3;
@@ -55,7 +84,8 @@ export const SpeedControl = ({
     <Popover className="relative">
       <PopoverButton className="flex items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-offbase rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1 transform transition-transform duration-200 ease-in-out hover:scale-[1.04] hover:text-accent">
         <SpeedometerIcon className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
-        <span>{Number.isInteger(displaySpeed) ? displaySpeed.toString() : displaySpeed.toFixed(1)}x</span>
+        <span className="sm:hidden">{compactTriggerLabel}</span>
+        <span className="hidden sm:inline">{triggerLabel}</span>
         <ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
       </PopoverButton>
       <PopoverPanel anchor="top" className="absolute z-50 bg-base p-3 rounded-md shadow-lg border border-offbase">
diff --git a/src/components/player/VoicesControlBase.tsx b/src/components/player/VoicesControlBase.tsx
index 1501586..92d7b87 100644
--- a/src/components/player/VoicesControlBase.tsx
+++ b/src/components/player/VoicesControlBase.tsx
@@ -96,7 +96,7 @@ export function VoicesControlBase({
             <span>{selectedVoices.length > 1 ? selectedVoices.join(' + ') : selectedVoices[0] || currentVoice}</span>
             <ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
           </ListboxButton>
-          <ListboxOptions anchor="top end" className="absolute z-50 w-40 sm:w-44 max-h-64 overflow-auto rounded-lg bg-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <ListboxOptions className="absolute bottom-full right-0 mb-1 z-50 w-40 sm:w-44 !h-auto !min-h-0 !max-h-[50vh] overflow-y-auto overscroll-contain rounded-lg bg-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             {availableVoices.map((voiceId) => (
               <ListboxOption
                 key={voiceId}
@@ -117,7 +117,7 @@ export function VoicesControlBase({
             <span>{currentVoice}</span>
             <ChevronUpDownIcon className="h-2.5 w-2.5 sm:h-3 sm:w-3" />
           </ListboxButton>
-          <ListboxOptions anchor="top end" className="absolute z-50 w-28 sm:w-32 max-h-64 overflow-auto rounded-lg bg-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <ListboxOptions className="absolute bottom-full right-0 mb-1 z-50 w-28 sm:w-32 !h-auto !min-h-0 !max-h-[50vh] overflow-y-auto overscroll-contain rounded-lg bg-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
             {availableVoices.map((voiceId) => (
               <ListboxOption
                 key={voiceId}