fix skeleton styles

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

@@ -49,10 +49,9 @@
 }
 
 .menuItemsGrid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: 1fr;
-  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .menuItemsGridMobile {

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

@@ -28,12 +28,14 @@ const { useBreakpoint } = Grid;
 export function MenuList({ data, categoryRefs }: MenuListProps) {
   const { isRTL } = useAppSelector((state) => state.locale);
   const products = data?.products;
-  const { xs, md } = useBreakpoint();
+  const { xs, md, lg } = 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)) {
@@ -103,11 +105,13 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                 {isRTL ? category.name : category.name}
               </ProTitle>
               <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "1rem",
-                }}
+                className={
+                  styles.menuItemsGrid + " " + isMobile
+                    ? styles.menuItemsGridMobile
+                    : isTablet
+                    ? styles.menuItemsGridTablet
+                    : styles.menuItemsGridDesktop
+                }
               >
                 {categoryProducts.map((item: Product) => (
                   <div