feat(#2391): display supporing links in columns

IntersectMBO · Nov 20, 2024 · 0c2f2aa · 0c2f2aa
1 parent 1663f56
commit 0c2f2aa
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 34 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@ changes.
 ### Changed
 
 - Bump CSL version to 13.1.0 [Issue 2169](https://github.com/IntersectMBO/govtool/issues/2169)
+- Display supporting links below labels than in same row [Issue 2391](https://github.com/IntersectMBO/govtool/issues/2391)
 
 ### Removed
 

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx
@@ -10,10 +10,12 @@ export const GovernanceActionDetailsCardLinks = ({
 }: {
   links?: Reference[];
 }) => {
-  const { isMobile } = useScreenDimension();
+  const { screenWidth } = useScreenDimension();
   const { t } = useTranslation();
   const { openModal } = useModal();
 
+  const isOneLine = screenWidth < 1600;
+
   return (
     !!links?.length && (
       <>
@@ -32,42 +34,37 @@ export const GovernanceActionDetailsCardLinks = ({
         >
           {t("govActions.supportingLinks")}
         </Typography>
-        <Box
-          sx={{
-            display: "grid",
-            gridTemplateColumns: isMobile ? undefined : "1fr 1fr",
-            columnGap: 2,
-            rowGap: 2,
-          }}
-        >
-          {links.map(({ uri, label }) => (
-            <Box flexDirection={isMobile ? "column" : "row"} display="flex">
-              {label && (
-                <Typography
-                  data-testid={`${label}-${uri}-label`}
-                  sx={{
-                    fontWeight: 400,
-                    flex: 1,
-                    fontSize: 16,
-                    lineHeight: "24px",
-                    mr: 8,
-                    overflow: "hidden",
-                    width: "auto",
-                    whiteSpace: "nowrap",
-                  }}
-                >
-                  {label}
-                </Typography>
-              )}
+        {links.map(({ uri, label }) => (
+          <Box display="flex" flexDirection="column" overflow="hidden">
+            {label && (
               <Typography
+                data-testid={`${label}-${uri}-label`}
                 sx={{
-                  fontSize: 16,
                   fontWeight: 400,
-                  maxWidth: "283px",
+                  flex: 1,
+                  fontSize: 16,
                   lineHeight: "24px",
-                  whiteSpace: "nowrap",
+                  mr: 8,
                   overflow: "hidden",
-                  textOverflow: "ellipsis",
+                  width: "auto",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {label}
+              </Typography>
+            )}
+            <Box display="flex" flexDirection="row">
+              <Typography
+                sx={{
+                  fontSize: 16,
+                  fontWeight: 400,
+                  maxWidth: isOneLine ? "283px" : "auto",
+                  lineHeight: "24px",
+                  ...(isOneLine && {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }),
                   color: "primaryBlue",
                 }}
               >
@@ -92,8 +89,8 @@ export const GovernanceActionDetailsCardLinks = ({
                 </Box>
               )}
             </Box>
-          ))}
-        </Box>
+          </Box>
+        ))}
       </>
     )
   );