fix skeleton styles

src/pages/menu/page.tsx

@@ -43,8 +43,9 @@ function MenuPage() {
       skip: !restaurantDetails?.restaurant.id,
     }
   );
-  const { categoryRefs, isCategoriesSticky } = useScrollHandler();
+  const { categoryRefs } = useScrollHandler();
   const { xs, md } = useBreakpoint();
+  const isTablet = !xs && !md;
 
   const isLoading = isLoadingRestaurant || isLoadingMenu;
 
@@ -67,10 +68,10 @@ function MenuPage() {
               alt={t("menu.restaurantCover")}
               className={styles.cover}
               width={"100%"}
-              height={182}
+              height={xs ? 182 : isTablet ? 200 : 220}
               preview={false}
               loadingContainerStyle={{
-                width:"100vw"
+                width: "100vw",
               }}
             />
 
@@ -102,7 +103,7 @@ function MenuPage() {
             <SearchButton />
           </div>
 
-          <div className={`${styles.pageContainer}`}>
+          <div className={`${styles.headerContainer}`}>
             <div className={styles.contentWrapper}>
               <ProTitle level={4} className={styles.restaurantTitle}>
                 {isRTL ? restaurant?.nameAR : restaurant?.name}