исправление поехавшей верстки в тарифах
This commit is contained in:
parent
b333527103
commit
6cb618ed1e
@ -1,4 +1,4 @@
|
|||||||
import { Box, Typography, Tooltip, SxProps, Theme, Button, Badge } from "@mui/material";
|
import { Box, Typography, Tooltip, SxProps, Theme, Button, Badge, useTheme, useMediaQuery, } from "@mui/material";
|
||||||
import { MouseEventHandler, ReactNode } from "react";
|
import { MouseEventHandler, ReactNode } from "react";
|
||||||
import { cardShadow } from "@root/utils/theme";
|
import { cardShadow } from "@root/utils/theme";
|
||||||
import { relative } from "path";
|
import { relative } from "path";
|
||||||
@ -18,7 +18,8 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function TariffCard({ icon, headerText, text, sx, price, buttonProps, discount }: Props) {
|
export default function TariffCard({ icon, headerText, text, sx, price, buttonProps, discount }: Props) {
|
||||||
|
const theme = useTheme();
|
||||||
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
@ -30,6 +31,7 @@ export default function TariffCard({ icon, headerText, text, sx, price, buttonPr
|
|||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
alignItems: "start",
|
alignItems: "start",
|
||||||
p: "20px",
|
p: "20px",
|
||||||
|
zIndex: isMobile ? -1 : undefined,
|
||||||
|
|
||||||
boxShadow: cardShadow,
|
boxShadow: cardShadow,
|
||||||
...sx,
|
...sx,
|
||||||
@ -54,6 +56,7 @@ export default function TariffCard({ icon, headerText, text, sx, price, buttonPr
|
|||||||
flexWrap: "wrap",
|
flexWrap: "wrap",
|
||||||
columnGap: "10px",
|
columnGap: "10px",
|
||||||
rowGap: 0,
|
rowGap: 0,
|
||||||
|
flexDirection: isMobile ? "column-reverse" : undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{price}
|
{price}
|
||||||
|
Loading…
Reference in New Issue
Block a user