menu: unify the height of each row based on highest item

This commit is contained in:
2025-10-11 10:04:57 +03:00
parent 26f05c9a27
commit cef2804ee6
2 changed files with 29 additions and 7 deletions

View File

@@ -64,9 +64,11 @@
} }
.menuItemsGrid { .menuItemsGrid {
display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 20px; gap: 20px;
margin-bottom: 24px; margin-bottom: 24px;
grid-auto-rows: 1fr;
} }
} }
@@ -77,6 +79,7 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 24px; gap: 24px;
margin-bottom: 28px; margin-bottom: 28px;
grid-auto-rows: 1fr;
} }
} }
@@ -669,9 +672,33 @@
border-radius: 8px; 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 { .categoryMenuItemImage {
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
width: 100%;
overflow: hidden;
} }

View File

@@ -4,12 +4,12 @@ import ImageWithFallback from "components/ImageWithFallback";
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons"; import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
import ProText from "components/ProText"; import ProText from "components/ProText";
import ProTitle from "components/ProTitle"; import ProTitle from "components/ProTitle";
import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useAppSelector } from "redux/hooks"; import { useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants"; import { colors } from "ThemeConstants";
import { Product } from "utils/types/appTypes"; import { Product } from "utils/types/appTypes";
import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
import styles from "./MenuList.module.css"; import styles from "./MenuList.module.css";
interface MenuListProps { interface MenuListProps {
@@ -82,12 +82,6 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
alt={category.name} alt={category.name}
width="100%" width="100%"
height={130} height={130}
style={{
width: "100%",
objectFit: "cover",
borderRadius: 8,
overflow: "hidden",
}}
className={styles.categoryMenuItemImage} className={styles.categoryMenuItemImage}
loadingContainerStyle={{ loadingContainerStyle={{
width: "100%", width: "100%",
@@ -120,6 +114,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
style={{ style={{
borderRadius: 8, borderRadius: 8,
overflow: "hide", overflow: "hide",
width: "100%",
}} }}
styles={{ styles={{
body: { body: {