From 00dccd86b4418381b87e338eb94066fb76f21dc9 Mon Sep 17 00:00:00 2001
From: BOUTIER Charly <charly.boutier@rte-france.com>
Date: Fri, 8 Dec 2023 18:29:41 +0100
Subject: [PATCH] Fixes ellipsis in the about dialog that could hide the
 module's version.

Signed-off-by: BOUTIER Charly <charly.boutier@rte-france.com>
---
 src/components/TopBar/AboutDialog.js | 57 ++++++++++++++++++----------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
index f0199c27..76550ff1 100644
--- a/src/components/TopBar/AboutDialog.js
+++ b/src/components/TopBar/AboutDialog.js
@@ -22,6 +22,7 @@ import {
     Fade,
     Grid,
     Stack,
+    Tooltip,
     Typography,
     useMediaQuery,
     useTheme,
@@ -377,26 +378,44 @@ const Module = ({ type, name, version, license }) => {
                 },
             }}
         >
-            <Stack
-                direction="row"
-                justifyContent="flex-start"
-                alignItems="baseline"
-                spacing={1}
-            >
-                {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
-                <Typography display="inline-block" noWrap>
-                    {name || '<?>'}
-                </Typography>
-                <Typography
-                    variant="caption"
-                    color={(theme) => theme.palette.text.secondary}
-                    display="inline"
-                    marginLeft={1}
-                    noWrap
+            <Tooltip title={(name || '<?>') + ' ' + (version || '')}>
+                <Stack
+                    direction="row"
+                    justifyContent="flex-start"
+                    alignItems="baseline"
+                    spacing={1}
                 >
-                    {version || null}
-                </Typography>
-            </Stack>
+                    <Box
+                        sx={{
+                            flexGrow: 0,
+                            position: 'relative',
+                            top: '4px',
+                            flexShrink: 0,
+                        }}
+                    >
+                        {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
+                    </Box>
+                    <Typography display="inline" noWrap>
+                        {name || '<?>'}
+                    </Typography>
+                    <Box
+                        sx={{
+                            flexGrow: 0,
+                            alignSelf: 'flex-end',
+                            flexShrink: 0,
+                        }}
+                    >
+                        <Typography
+                            variant="caption"
+                            color={(theme) => theme.palette.text.secondary}
+                            display="inline"
+                            noWrap
+                        >
+                            {version || null}
+                        </Typography>
+                    </Box>
+                </Stack>
+            </Tooltip>
         </Grid>
     );
 };