Skip to content

Commit

Permalink
fix(#2493): fix mobile responsiveness issue
Browse files Browse the repository at this point in the history
  • Loading branch information
MSzalowski committed Dec 17, 2024
1 parent 2f2c6f9 commit 23692f0
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 16 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ changes.

### Fixed

-
- Remaining mobile responsiveness issue [Issue 2493](https://github.com/IntersectMBO/govtool/issues/2493)

### Changed

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const DataActionsFilters = ({
[chosenFilters, setChosenFilters],
);

const { isMobile, screenWidth } = useScreenDimension();
const { isMobile } = useScreenDimension();

const wrapperRef = useRef<HTMLDivElement>(null);
useOnClickOutside(wrapperRef, closeFilters);
Expand All @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 5 additions & 5 deletions govtool/frontend/src/components/molecules/DataMissingHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}}
Expand All @@ -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" }),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ export const DataMissingInfoBox = ({
sx={{
mb: 4,
pr: 6,
maxWidth: {
xxs: "295px",
md: "100%",
},
...sx,
}}
>
Expand Down
21 changes: 18 additions & 3 deletions govtool/frontend/src/components/organisms/DRepCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" }}
>
Expand All @@ -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",
Expand Down Expand Up @@ -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" && (
Expand Down Expand Up @@ -251,4 +265,5 @@ const ellipsisStyles = {
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: { xxs: "200px", xs: "100%" },
} as const;
29 changes: 25 additions & 4 deletions govtool/frontend/src/components/organisms/DRepDetailsCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -260,7 +271,7 @@ const DRepDetailsInfoItem = ({
)}
{children}
</div>
</div>
</Box>
);
};

Expand Down Expand Up @@ -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`}
Expand Down

0 comments on commit 23692f0

Please sign in to comment.