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 {
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;
}

View File

@@ -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: {