Fixes ellipsis in the about dialog that could hide the module's versi…

…on. (#324) * Fixes ellipsis in the about dialog that could hide the module's version. --------- Signed-off-by: BOUTIER Charly <[email protected]>
gridsuite · Dec 12, 2023 · 9c52821 · 9c52821
1 parent cb9a3d6
commit 9c52821
Showing 1 changed file with 39 additions and 22 deletions.
diff --git a/src/components/TopBar/AboutDialog.js b/src/components/TopBar/AboutDialog.js
@@ -22,6 +22,7 @@ import {
     Fade,
     Grid,
     Stack,
+    Tooltip,
     Typography,
     useMediaQuery,
     useTheme,
@@ -358,10 +359,24 @@ AboutDialog.propTypes = {
     getAdditionalModules: PropTypes.func,
 };
 
+const style = {
+    icons: {
+        flexGrow: 0,
+        position: 'relative',
+        top: '4px',
+        flexShrink: 0,
+    },
+    version: {
+        flexGrow: 0,
+        alignSelf: 'flex-end',
+        flexShrink: 0,
+    },
+};
+
 const ModuleTypesIcons = {
-    app: <WidgetsOutlined fontSize="small" color="primary" />,
-    server: <DnsOutlined fontSize="small" color="secondary" />,
-    other: <QuestionMark fontSize="small" />,
+    app: <WidgetsOutlined sx={style.icons} fontSize="small" color="primary" />,
+    server: <DnsOutlined sx={style.icons} fontSize="small" color="secondary" />,
+    other: <QuestionMark sx={style.icons} fontSize="small" />,
 };
 
 const Module = ({ type, name, version, license }) => {
@@ -377,26 +392,28 @@ 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>
+                    {ModuleTypesIcons[type] || ModuleTypesIcons['other']}
+                    <Typography display="inline" noWrap>
+                        {name || '<?>'}
+                    </Typography>
+                    <Typography
+                        variant="caption"
+                        color={(theme) => theme.palette.text.secondary}
+                        display="inline"
+                        noWrap
+                        sx={style.version}
+                    >
+                        {version || null}
+                    </Typography>
+                </Stack>
+            </Tooltip>
         </Grid>
     );
 };