From 9bfeade905cb294b1a370039becb019e8063bebf Mon Sep 17 00:00:00 2001
From: Joseph Yaksich <294273268+gitcommit90@users.noreply.github.com>
Date: Mon, 6 Jul 2026 09:03:20 +0000
Subject: [PATCH] fix: keep comparison icons beside logged values in routine
 table

Wrap logged metrics and comparison icons in a nowrap flex row so icons
stay aligned with their values in the table view.

Fixes wger-project/react#1264
---
 .../screens/Detail/RoutineDetailsTable.tsx    | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx b/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx
index 067df9c4..41bc36b1 100644
--- a/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx
+++ b/src/components/Routines/screens/Detail/RoutineDetailsTable.tsx
@@ -259,6 +259,24 @@ export const RoutineTable = (props: {
 
     }
 
+    function renderLoggedValueWithIcon(
+        value: React.ReactNode,
+        icon: React.ReactNode,
+    ) {
+        return (
+            <Stack
+                direction="row"
+                alignItems="center"
+                justifyContent="center"
+                spacing={0.25}
+                sx={{ whiteSpace: 'nowrap' }}
+            >
+                <span>{value}</span>
+                {icon}
+            </Stack>
+        );
+    }
+
     function getTableRowLogged(slotEntry: SlotEntry, day: Day) {
         return <TableRow>
             <TableCell sx={{ verticalAlign: "top", backgroundColor: "white" }} className={classes.stickyColumn}>
@@ -275,40 +293,40 @@ export const RoutineTable = (props: {
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
-                                    {log.repetitions ?? '-/-'}
-                                    {getComparisonIcon(log.repetitions, setConfig?.repetitions, setConfig?.maxRepetitions)}
-                                </span>
+                                {renderLoggedValueWithIcon(
+                                    log.repetitions ?? '-/-',
+                                    getComparisonIcon(log.repetitions, setConfig?.repetitions, setConfig?.maxRepetitions),
+                                )}
                             </Stack>
                         )}
                     </TableCell>
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
-                                    {log.weight ?? '-/-'}
-                                    {getComparisonIcon(log.weight, setConfig?.weight, setConfig?.maxWeight)}
-                                </span>
+                                {renderLoggedValueWithIcon(
+                                    log.weight ?? '-/-',
+                                    getComparisonIcon(log.weight, setConfig?.weight, setConfig?.maxWeight),
+                                )}
                             </Stack>
                         )}
                     </TableCell>
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
-                                    {log.restTime ?? '-/-'}
-                                    {getComparisonIcon(log.restTime, setConfig?.restTime, setConfig?.maxRestTime)}
-                                </span>
+                                {renderLoggedValueWithIcon(
+                                    log.restTime ?? '-/-',
+                                    getComparisonIcon(log.restTime, setConfig?.restTime, setConfig?.maxRestTime),
+                                )}
                             </Stack>
                         )}
                     </TableCell>
                     <TableCell align={'center'} sx={{ verticalAlign: "top" }}>
                         {logs.map((log) =>
                             <Stack key={log.id}>
-                                <span>
-                                    {log.rir ?? '-/-'}
-                                    {getComparisonIcon(log.rir, setConfig?.rir, setConfig?.maxRir, false)}
-                                </span>
+                                {renderLoggedValueWithIcon(
+                                    log.rir ?? '-/-',
+                                    getComparisonIcon(log.rir, setConfig?.rir, setConfig?.maxRir, false),
+                                )}
                             </Stack>
                         )}
                     </TableCell>