MenuList: fix tablet size

- remove the three different css classes use one class in @media css

src/pages/menu/components/MenuList/MenuList.module.css

@@ -33,12 +33,24 @@
   transition: color 0.3s ease;
 }
 
+.menuItemsGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
 /* Enhanced responsive menu section headers */
 @media (min-width: 769px) and (max-width: 1024px) {
   .menuSection h3 {
     margin: 40px 0px 20px 0px;
     font-size: 24px;
   }
+
+  .menuItemsGrid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+    margin-bottom: 20px;
+  }
 }
 
 @media (min-width: 1025px) {
@@ -46,39 +58,19 @@
     margin: 50px 0px 25px 0px;
     font-size: 28px;
   }
-}
 
-.menuItemsGrid {
+  .menuItemsGrid {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.menuItemsGridMobile {
-  gap: 12px;
-  grid-template-columns: 1fr;
-}
-
-.menuItemsGridTablet {
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  padding: 0 12px;
-  margin-bottom: 20px;
-}
-
-.menuItemsGridDesktop {
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
-  padding: 0 16px;
     margin-bottom: 24px;
+  }
 }
 
 /* Enhanced responsive menu items grid */
 @media (min-width: 1280px) {
-  .menuItemsGridDesktop {
+  .menuItemsGrid {
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
-    padding: 0 20px;
     margin-bottom: 28px;
   }
 }

src/pages/menu/components/MenuList/MenuList.tsx

@@ -28,14 +28,12 @@ const { useBreakpoint } = Grid;
 export function MenuList({ data, categoryRefs }: MenuListProps) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const products = data?.products;
-  const { xs, md, lg } = useBreakpoint();
+  const { xs, md } = useBreakpoint();
   const { items } = useAppSelector((state) => state.order);
   const restaurantName = localStorage.getItem("restaurantName");
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { themeName } = useAppSelector((state) => state.theme);
-  const isMobile = xs;
-  const isTablet = !xs && !md;
 
   // Show error state if data exists but has no products
   if (data && (!data.products || data.products.length === 0)) {
@@ -104,15 +102,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
               >
                 {isRTL ? category.name : category.name}
               </ProTitle>
-              <div
+              <div className={styles.menuItemsGrid}>
-                className={
-                  styles.menuItemsGrid + " " + isMobile
-                    ? styles.menuItemsGridMobile
-                    : isTablet
-                    ? styles.menuItemsGridTablet
-                    : styles.menuItemsGridDesktop
-                }
-              >
                 {categoryProducts.map((item: Product) => (
                   <div
                     key={item.id}