MenuList: fix tablet size

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

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
-                className={
-                  styles.menuItemsGrid + " " + isMobile
-                    ? styles.menuItemsGridMobile
-                    : isTablet
-                    ? styles.menuItemsGridTablet
-                    : styles.menuItemsGridDesktop
-                }
-              >
+              <div className={styles.menuItemsGrid}>
                 {categoryProducts.map((item: Product) => (
                   <div
                     key={item.id}