From 1a9a0457a56ca9d3d9f000d17ce54b4a4ab899aa Mon Sep 17 00:00:00 2001
From: Muhammad Fezan <72183873+faizan7800@users.noreply.github.com>
Date: Mon, 6 Jul 2026 13:49:23 +0500
Subject: [PATCH] Fix routine table log icons wrapping to new line

---
 .../screens/Detail/RoutineDetailsTable.tsx      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx b/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx
index 067df9c4..d1f3d92d 100644
--- a/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx
+++ b/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx
@@ -13,6 +13,7 @@ import FlagCircleIcon from '@mui/icons-material/FlagCircle';
 import NorthEastIcon from "@mui/icons-material/NorthEast";
 import SouthEastIcon from "@mui/icons-material/SouthEast";
 import {
+    Box,
     Container,
     FormControlLabel,
     Stack,
@@ -275,40 +276,40 @@ export const RoutineTable = (props: {
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
+                                <Box component="span" sx={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: '2px' }}>
                                     {log.repetitions ?? '-/-'}
                                     {getComparisonIcon(log.repetitions, setConfig?.repetitions, setConfig?.maxRepetitions)}
-                                </span>
+                                </Box>
                             </Stack>
                         )}
                     </TableCell>
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
+                                <Box component="span" sx={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: '2px' }}>
                                     {log.weight ?? '-/-'}
                                     {getComparisonIcon(log.weight, setConfig?.weight, setConfig?.maxWeight)}
-                                </span>
+                                </Box>
                             </Stack>
                         )}
                     </TableCell>
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
+                                <Box component="span" sx={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: '2px' }}>
                                     {log.restTime ?? '-/-'}
                                     {getComparisonIcon(log.restTime, setConfig?.restTime, setConfig?.maxRestTime)}
-                                </span>
+                                </Box>
                             </Stack>
                         )}
                     </TableCell>
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
+                                <Box component="span" sx={{ whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: '2px' }}>
                                     {log.rir ?? '-/-'}
                                     {getComparisonIcon(log.rir, setConfig?.rir, setConfig?.maxRir, false)}
-                                </span>
+                                </Box>
                             </Stack>
                         )}
                     </TableCell>