diff --git a/src/pages/menu/components/MenuList/MenuList.module.css b/src/pages/menu/components/MenuList/MenuList.module.css index 67853a9..5c3d421 100644 --- a/src/pages/menu/components/MenuList/MenuList.module.css +++ b/src/pages/menu/components/MenuList/MenuList.module.css @@ -64,9 +64,11 @@ } .menuItemsGrid { + display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; + grid-auto-rows: 1fr; } } @@ -77,6 +79,7 @@ grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px; + grid-auto-rows: 1fr; } } @@ -669,9 +672,33 @@ border-radius: 8px; } +/* Desktop unified height styles */ +@media (min-width: 1025px) { + .productLink { + display: flex; + height: 100%; + width: 100%; + } + + .productLink .ant-card { + height: 100%; + display: flex; + flex-direction: column; + } + + .productLink .ant-card .ant-card-body { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + } +} + .categoryMenuItemImage { width: 100%; object-fit: cover; border-radius: 8px; text-align: center; + width: 100%; + overflow: hidden; } diff --git a/src/pages/menu/components/MenuList/MenuList.tsx b/src/pages/menu/components/MenuList/MenuList.tsx index 66b6989..64064df 100644 --- a/src/pages/menu/components/MenuList/MenuList.tsx +++ b/src/pages/menu/components/MenuList/MenuList.tsx @@ -4,12 +4,12 @@ import ImageWithFallback from "components/ImageWithFallback"; import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons"; import ProText from "components/ProText"; import ProTitle from "components/ProTitle"; +import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useAppSelector } from "redux/hooks"; import { colors } from "ThemeConstants"; import { Product } from "utils/types/appTypes"; -import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx"; import styles from "./MenuList.module.css"; interface MenuListProps { @@ -82,12 +82,6 @@ export function MenuList({ data, categoryRefs }: MenuListProps) { alt={category.name} width="100%" height={130} - style={{ - width: "100%", - objectFit: "cover", - borderRadius: 8, - overflow: "hidden", - }} className={styles.categoryMenuItemImage} loadingContainerStyle={{ width: "100%", @@ -120,6 +114,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) { style={{ borderRadius: 8, overflow: "hide", + width: "100%", }} styles={{ body: {