Merge pull request #2541 from IntersectMBO/fix/2493-remaining-mobile-responsiveness-issue

fix(#2493): fix mobile responsiveness issue

Author: MSzalowski

CHANGELOG.md

@@ -18,6 +18,7 @@ changes.
 
 - Move matomo initalization out of the react code
 - Fix some non-ipfs related errors while fetching the DRep images [Issue 2546](https://github.com/IntersectMBO/govtool/issues/2546)
+- Remaining mobile responsiveness issue [Issue 2493](https://github.com/IntersectMBO/govtool/issues/2493)
 
 ### Changed
 

govtool/frontend/src/components/molecules/DataActionsFilters.tsx

@@ -43,7 +43,7 @@ export const DataActionsFilters = ({
     [chosenFilters, setChosenFilters],
   );
 
-  const { isMobile, screenWidth } = useScreenDimension();
+  const { isMobile } = useScreenDimension();
 
   const wrapperRef = useRef<HTMLDivElement>(null);
   useOnClickOutside(wrapperRef, closeFilters);
@@ -58,7 +58,10 @@ export const DataActionsFilters = ({
         boxShadow: "1px 2px 11px 0px #00123D5E",
         borderRadius: "10px",
         padding: "12px 0px",
-        width: screenWidth < 850 ? "315px" : "415px",
+        width: {
+          xxs: "250px",
+          md: "415px",
+        },
         zIndex: "1",
         right: isMobile ? "59px" : "115px",
         top: "53px",

govtool/frontend/src/components/molecules/DataActionsSorting.tsx

@@ -41,7 +41,10 @@ export const DataActionsSorting = ({
         boxShadow: "1px 2px 11px 0px #00123D5E",
         borderRadius: "10px",
         padding: "12px 0px",
-        width: "315px",
+        width: {
+          xxs: "250px",
+          md: "415px",
+        },
         zIndex: "1",
         right: "3px",
         top: "53px",

govtool/frontend/src/components/molecules/DataMissingHeader.tsx

@@ -33,11 +33,11 @@ export const DataMissingHeader = ({
     <Box
       sx={{
         flexDirection: {
-          sm: "column",
-          lg: "row",
+          xxs: "column",
+          md: "row",
         },
         alignItems: {
-          lg: "center",
+          md: "center",
         },
         display: "flex",
       }}
@@ -52,8 +52,8 @@ export const DataMissingHeader = ({
       )}
       <Typography
         sx={{
-          ...(isDRep && { ml: { lg: 3 } }),
-          ...(isDRep && { mt: { sm: 2, lg: 0 } }),
+          ...(isDRep && { ml: { md: 3 } }),
+          ...(isDRep && { mt: { xxs: 2, md: 0 } }),
           textOverflow: "ellipsis",
           fontWeight: 600,
           ...(isDataMissing && { color: "errorRed" }),

govtool/frontend/src/components/molecules/DataMissingInfoBox.tsx

@@ -56,6 +56,10 @@ export const DataMissingInfoBox = ({
       sx={{
         mb: 4,
         pr: 6,
+        maxWidth: {
+          xxs: "295px",
+          md: "100%",
+        },
         ...sx,
       }}
     >

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -106,7 +106,15 @@ export const DRepCard = ({
                 src={image || ICONS.defaultDRepIcon}
                 data-testid="drep-image"
               />
-              <Box ml={3}>
+              <Box
+                sx={{
+                  marginLeft: {
+                    xxs: 1,
+                    xs: 2,
+                    sm: 3,
+                  },
+                }}
+              >
                 <Typography
                   sx={{ ellipsisStyles, color: metadataStatus && "errorRed" }}
                 >
@@ -124,7 +132,10 @@ export const DRepCard = ({
                   sx={{
                     gap: 1,
                     width: "250px",
-                    maxWidth: "100%",
+                    maxWidth: {
+                      xxs: "200px",
+                      xs: "100%",
+                    },
                     "&:hover": {
                       opacity: 0.6,
                       transition: "opacity 0.3s",
@@ -195,12 +206,15 @@ export const DRepCard = ({
         <Box
           display="flex"
           gap={2.5}
-          minWidth={isConnected ? 233 : 310}
           sx={{
             "@container root (min-width: 480px)": {
               justifyContent: "flex-end",
               alignItems: "center",
             },
+            minWidth: {
+              xxs: "233px",
+              xs: isConnected ? "233px" : "310px",
+            },
           }}
         >
           {type === "DRep" && (
@@ -251,4 +265,5 @@ const ellipsisStyles = {
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
+  maxWidth: { xxs: "200px", xs: "100%" },
 } as const;

govtool/frontend/src/components/organisms/DRepDetailsCard.tsx

@@ -239,8 +239,19 @@ const DRepDetailsInfoItem = ({
   if (!children && !text) return null;
   const dataTestIdInfoItemCategoryPrefix = "info-item";
   return (
-    <div>
-      <Box sx={{ mb: 0.5 }}>
+    <Box
+      sx={{
+        maxWidth: {
+          xxs: "295px",
+          md: "100%",
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 0.5,
+        }}
+      >
         <Typography
           color="neutralGray"
           fontWeight={600}
@@ -260,7 +271,7 @@ const DRepDetailsInfoItem = ({
         )}
         {children}
       </div>
-    </div>
+    </Box>
   );
 };
 
@@ -306,7 +317,17 @@ const ReferencesGroup = ({ references }: { references: ReferenceItem[] }) => (
 );
 
 const ReferencesLink = ({ label, uri }: ReferenceItem) => (
-  <Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
+  <Box
+    sx={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 0.5,
+      maxWidth: {
+        xxs: "295px",
+        md: "100%",
+      },
+    }}
+  >
     <Typography fontWeight={400}>{label}</Typography>
     <Link
       data-testid={`${testIdFromLabel(label)}-link`}

govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx

@@ -1,7 +1,8 @@
 import { Box, Grid, IconButton, SwipeableDrawer } from "@mui/material";
+import { NavLink } from "react-router-dom";
 
 import { Background, Link } from "@atoms";
-import { CONNECTED_NAV_ITEMS, ICONS } from "@consts";
+import { CONNECTED_NAV_ITEMS, ICONS, PATHS } from "@consts";
 import { DRepInfoCard, WalletInfoCard } from "@molecules";
 import { useGetVoterInfo, useScreenDimension } from "@hooks";
 import { openInNewTab } from "@utils";
@@ -57,7 +58,13 @@ export const DashboardDrawerMobile = ({
                 width: screenWidth - CALCULATED_DRAWER_PADDING,
               }}
             >
-              <img alt="app-logo" src={ICONS.appLogoIcon} height={25} />
+              <NavLink
+                data-testid="logo-button"
+                style={{ display: "flex", justifyContent: "center" }}
+                to={PATHS.dashboard}
+              >
+                <img alt="app-logo" src={ICONS.appLogoIcon} height={25} />
+              </NavLink>
               <IconButton
                 data-testid="close-drawer-button"
                 onClick={closeDrawer}

govtool/frontend/src/components/organisms/DrawerMobile.tsx

@@ -1,7 +1,8 @@
+import { NavLink } from "react-router-dom";
 import { Box, Grid, IconButton, SwipeableDrawer } from "@mui/material";
 
 import { Background, Button, Link, Typography } from "@atoms";
-import { ICONS, IMAGES, NAV_ITEMS } from "@consts";
+import { ICONS, IMAGES, NAV_ITEMS, PATHS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { useFeatureFlag, useModal } from "@context";
 import { openInNewTab } from "@utils";
@@ -48,7 +49,13 @@ export const DrawerMobile = ({
               width: screenWidth - CALCULATED_DRAWER_PADDING,
             }}
           >
-            <img alt="app-logo" height={25} src={IMAGES.appLogo} />
+            <NavLink
+              data-testid="logo-button"
+              style={{ display: "flex", justifyContent: "center" }}
+              to={PATHS.dashboard}
+            >
+              <img alt="app-logo" height={25} src={IMAGES.appLogo} />
+            </NavLink>
             <IconButton
               sx={{ padding: 0 }}
               onClick={() => setIsDrawerOpen(false)}