More consistent tooltip spacing on record button

killergerbah · Feb 24, 2024 · 4300c9b · 4300c9b
1 parent bb0795a
commit 4300c9b
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/extension/src/ui/components/MobileVideoOverlay.tsx b/extension/src/ui/components/MobileVideoOverlay.tsx
@@ -180,13 +180,15 @@ const MobileVideoOverlay = () => {
                 <Grid item>
                     <Tooltip title={miningButtonTooltip(model)!}>
                         {model.emptySubtitleTrack && model.recordingEnabled ? (
-                            <IconButton onClick={handleMineSubtitle}>
-                                <FiberManualRecordIcon
-                                    className={model.recording ? classes.recordingButton : classes.button}
-                                />
-                            </IconButton>
+                            // Wrap in span so that Tooltip doesn't complain about disabled child. Spacing also looks better.
+                            <span>
+                                <IconButton onClick={handleMineSubtitle}>
+                                    <FiberManualRecordIcon
+                                        className={model.recording ? classes.recordingButton : classes.button}
+                                    />
+                                </IconButton>
+                            </span>
                         ) : (
-                            // Wrap in span so that Tooltip doesn't complain about disabled child
                             <span>
                                 <IconButton disabled={miningButtonDisabled} onClick={handleMineSubtitle}>
                                     <NoteAddIcon