From c6088bb2dec11e6a1af407ab57305b27784dbeec Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Thu, 30 Jul 2026 21:39:50 +0200
Subject: [PATCH] fix: the stop button overlapped the recording counter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two absolutely-positioned boxes at guessed offsets: right-14 and right-2. They
collided as soon as the counter passed a minute and the text grew — a layout
that only looked right for the first 60 seconds, and did not even manage that at
this font size.

One flex row with a gap, so spacing is a consequence of the content rather than
an arithmetic guess about it. The callsign field also gains right padding while
the badges are shown, so a long call runs under them instead of being typed over.
---
 frontend/src/App.tsx | 50 +++++++++++++++++++++++++-------------------
 1 file changed, 28 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f80d58b..0ff75f2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3735,7 +3735,7 @@ export default function App() {
           recording. Both sit where the counter is, which has shifted left to
           make room. */}
       {recording && recStopped && RECORDABLE_MODES.has(mode.toUpperCase()) && (
-        <span className="absolute right-2 top-1/2 -translate-y-1/2 z-10 inline-flex items-center gap-1">
+        <span className="absolute right-2 top-1/2 -translate-y-1/2 z-10 inline-flex items-center gap-1.5">
           <button
             type="button"
             onMouseDown={(e) => e.preventDefault()}
@@ -3759,28 +3759,31 @@ export default function App() {
           </span>
         </span>
       )}
+      {/* Stop and the running counter share ONE flex row. They were two absolute
+          boxes at guessed offsets and overlapped as soon as the counter passed a
+          minute — a layout that only looked right for the first 60 seconds. */}
       {recording && !recStopped && RECORDABLE_MODES.has(mode.toUpperCase()) && (
-        <button
-          type="button"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={(e) => { e.stopPropagation(); stopRecording(); }}
-          title={t('rec.stop')}
-          className="absolute right-14 top-1/2 -translate-y-1/2 z-10 inline-flex items-center justify-center size-4 rounded text-muted-foreground hover:bg-muted"
-        >
-          <span className="size-2 bg-current" />
-        </button>
-      )}
-      {recording && !recStopped && RECORDABLE_MODES.has(mode.toUpperCase()) && (
-        <button
-          type="button"
-          onMouseDown={(e) => e.preventDefault()}
-          onClick={resetRecordingClock}
-          title="Click to restart the recording from 0 — drops everything captured so far (incl. pre-roll) so the file holds only your exchange"
-          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 inline-flex items-center gap-1 text-[10px] font-semibold tabular-nums text-destructive whitespace-nowrap cursor-pointer rounded px-1 hover:bg-destructive-muted"
-        >
-          <span className="size-2 rounded-full bg-destructive animate-pulse" />
-          {String(Math.floor(recSeconds / 60)).padStart(2, '0')}:{String(recSeconds % 60).padStart(2, '0')}
-        </button>
+        <span className="absolute right-2 top-1/2 -translate-y-1/2 z-10 inline-flex items-center gap-1.5">
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={(e) => { e.stopPropagation(); stopRecording(); }}
+            title={t('rec.stop')}
+            className="inline-flex items-center justify-center size-4 rounded text-muted-foreground hover:bg-muted"
+          >
+            <span className="size-2 bg-current" />
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={resetRecordingClock}
+            title="Click to restart the recording from 0 — drops everything captured so far (incl. pre-roll) so the file holds only your exchange"
+            className="inline-flex items-center gap-1 text-[10px] font-semibold tabular-nums text-destructive whitespace-nowrap cursor-pointer rounded px-1 hover:bg-destructive-muted"
+          >
+            <span className="size-2 rounded-full bg-destructive animate-pulse" />
+            {String(Math.floor(recSeconds / 60)).padStart(2, '0')}:{String(recSeconds % 60).padStart(2, '0')}
+          </button>
+        </span>
       )}
       <Input
         ref={callsignRef}
@@ -3789,7 +3792,10 @@ export default function App() {
         // exactly the same. A primary-tinted border plus an inset left bar make
         // it the obvious one without adding a colour the theme doesn't own. The
         // contest-dupe state still overrides it — that one is a warning.
+        // Room on the right for the REC badges while they are shown, so a long
+        // callsign runs under them instead of being typed over.
         className={cn('font-mono text-base font-bold tracking-wider uppercase h-9 bg-muted/40 focus:bg-card',
+          recording && RECORDABLE_MODES.has(mode.toUpperCase()) && 'pr-24',
           'border-primary/45 shadow-[inset_3px_0_0_0_var(--primary)]',
           contest.active && contestDupe && 'ring-2 ring-destructive !bg-destructive-muted focus:!bg-destructive-muted text-destructive-muted-foreground shadow-none')}
         value={callsign}