From ebe384c69840251d149edc8ad3790a55e4a64a28 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Mon, 1 Jun 2026 19:41:48 -0600
Subject: [PATCH] style(player): add relative positioning to TTS control
 buttons

Apply "relative" class to IconButton components in TTSPlayer to enable
positioning of child elements or overlays. This prepares the UI for
potential enhancements such as loading indicators or tooltips.
---
 src/components/player/TTSPlayer.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/player/TTSPlayer.tsx b/src/components/player/TTSPlayer.tsx
index 94dea14..1badd9b 100644
--- a/src/components/player/TTSPlayer.tsx
+++ b/src/components/player/TTSPlayer.tsx
@@ -53,6 +53,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
           onClick={skipBackward}
           aria-label="Skip backward"
           disabled={isProcessing}
+          className="relative"
         >
           {isProcessing ? <LoadingSpinner /> : <SkipBackwardIcon className="w-5 h-5" />}
         </IconButton>
@@ -61,6 +62,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
           onClick={togglePlay}
           aria-label={isPlaying ? 'Pause' : 'Play'}
           disabled={isProcessing && !isPlaying}
+          className="relative"
         >
           {isPlaying ? <PauseIcon className="w-5 h-5" /> : <PlayIcon className="w-5 h-5" />}
         </IconButton>
@@ -69,6 +71,7 @@ export default function TTSPlayer({ currentPage, numPages }: {
           onClick={skipForward}
           aria-label="Skip forward"
           disabled={isProcessing}
+          className="relative"
         >
           {isProcessing ? <LoadingSpinner /> : <SkipForwardIcon className="w-5 h-5" />}
         </IconButton>