diff --git a/CHANGELOG.md b/CHANGELOG.md index 89ca22357..4212b7d23 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/govtool/frontend/src/components/molecules/DataActionsFilters.tsx b/govtool/frontend/src/components/molecules/DataActionsFilters.tsx index 98ec187e3..16e7b2e5e 100644 --- a/govtool/frontend/src/components/molecules/DataActionsFilters.tsx +++ b/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(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", diff --git a/govtool/frontend/src/components/molecules/DataActionsSorting.tsx b/govtool/frontend/src/components/molecules/DataActionsSorting.tsx index 65487da1d..f72bb0454 100644 --- a/govtool/frontend/src/components/molecules/DataActionsSorting.tsx +++ b/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", diff --git a/govtool/frontend/src/components/molecules/DataMissingHeader.tsx b/govtool/frontend/src/components/molecules/DataMissingHeader.tsx index ef6e278b4..c715b7117 100644 --- a/govtool/frontend/src/components/molecules/DataMissingHeader.tsx +++ b/govtool/frontend/src/components/molecules/DataMissingHeader.tsx @@ -33,11 +33,11 @@ export const DataMissingHeader = ({ diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx index c396f8f46..ed044d0ba 100644 --- a/govtool/frontend/src/components/organisms/DRepCard.tsx +++ b/govtool/frontend/src/components/organisms/DRepCard.tsx @@ -106,7 +106,15 @@ export const DRepCard = ({ src={image || ICONS.defaultDRepIcon} data-testid="drep-image" /> - + @@ -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 = ({ {type === "DRep" && ( @@ -251,4 +265,5 @@ const ellipsisStyles = { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", + maxWidth: { xxs: "200px", xs: "100%" }, } as const; diff --git a/govtool/frontend/src/components/organisms/DRepDetailsCard.tsx b/govtool/frontend/src/components/organisms/DRepDetailsCard.tsx index 29d2a0716..90518a64a 100644 --- a/govtool/frontend/src/components/organisms/DRepDetailsCard.tsx +++ b/govtool/frontend/src/components/organisms/DRepDetailsCard.tsx @@ -239,8 +239,19 @@ const DRepDetailsInfoItem = ({ if (!children && !text) return null; const dataTestIdInfoItemCategoryPrefix = "info-item"; return ( -
- + + -
+
); }; @@ -306,7 +317,17 @@ const ReferencesGroup = ({ references }: { references: ReferenceItem[] }) => ( ); const ReferencesLink = ({ label, uri }: ReferenceItem) => ( - + {label} - app-logo + + app-logo + - app-logo + + app-logo + setIsDrawerOpen(false)}