fix skeleton styles

src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx

@@ -19,21 +19,21 @@ const MenuSkeleton = ({
   itemCount = 8,
   variant = "default",
 }: MenuSkeletonProps) => {
-  const { xs, sm, md } = useBreakpoint();
+  const { xs, md } = useBreakpoint();
   const isMobile = xs;
-  const isTablet = sm && !md;
-  const isDesktop = md;
+  const isTablet = !xs && !md;
+  // const isDesktop = md;
 
   const getCategoryCardStyle = () => {
     if (isMobile) {
       return {
         width: 90,
-        height: 95,
+        height: 110,
       };
     } else if (isTablet) {
       return {
         width: 120,
-        height: 140,
+        height: 110,
       };
     } else {
       return {
@@ -66,23 +66,23 @@ const MenuSkeleton = ({
     if (isMobile) {
       return {
         width: 90,
-        height: 60,
+        height: 78,
         borderTopLeftRadius: 8,
         borderTopRightRadius: 8,
       };
     } else if (isTablet) {
       return {
         width: 120,
-        height: 90,
-        borderTopLeftRadius: 12,
-        borderTopRightRadius: 12,
+        height: 78,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
       };
     } else {
       return {
-        width: 120,
-        height: 100,
-        borderTopLeftRadius: 16,
-        borderTopRightRadius: 16,
+        width: 140,
+        height: 78,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
       };
     }
   };
@@ -116,25 +116,8 @@ const MenuSkeleton = ({
     }
   };
 
-  const getPageContainerStyle = () => {
-    if (isDesktop) {
-      return {
-        maxWidth: "1200px",
-        margin: "0 auto",
-        padding: "32px",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "24px",
-      };
-    }
-  };
-
   return (
-    <div
-      className={`${styles.pageContainer} ${styles.skeletonContainer}`}
-      style={getPageContainerStyle()}
-    >
+    <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
       {/* Restaurant Header Skeleton */}
       <div className={styles.restaurantHeader}>
         {/* Cover Image Skeleton */}
@@ -153,10 +136,10 @@ const MenuSkeleton = ({
           style={{
             position: "absolute",
             left: isMobile ? "33px" : "40px",
-            top: isMobile ? "133px" : "-70px",
+            top: isMobile ? "133px" : isTablet ? "170px" : "170px",
             borderRadius: "50%",
-            width: isMobile ? "72px" : "80px",
-            height: isMobile ? "72px" : "80px",
+            width: isMobile ? "72px" : isTablet ? "80px" : "80px",
+            height: isMobile ? "72px" : isTablet ? "80px" : "80px",
             border: "3px solid var(--background)",
             zIndex: 10,
             overflow: "hidden",
@@ -262,7 +245,15 @@ const MenuSkeleton = ({
         variant === "minimal" ||
         variant === "detailed" ||
         variant === "categories-only") && (
-        <div style={{ padding: "0 1rem", display: "flex", gap: 8, overflow: "hidden" }}>
+        <div
+          style={{
+            padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
+            display: "flex",
+            gap: 8,
+            overflow: "hidden",
+            marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
+          }}
+        >
           {Array.from({
             length:
               variant === "minimal"
@@ -313,7 +304,7 @@ const MenuSkeleton = ({
                   >
                     <Skeleton
                       active
-                      paragraph={{ rows: 1 }}
+                      paragraph={{ rows: 0 }}
                       style={{
                         margin: 0,
                         padding: isMobile ? 3 : 8,
@@ -332,7 +323,12 @@ const MenuSkeleton = ({
         variant === "minimal" ||
         variant === "detailed" ||
         variant === "menu-only") && (
-        <div className={styles.menuSections} style={{ padding: "0 1rem" }}>
+        <div
+          className={styles.menuSections}
+          style={{
+            padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
+          }}
+        >
           {Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
             (_, sectionIndex) => (
               <div key={sectionIndex} className={styles.menuSection}>
@@ -387,18 +383,11 @@ const MenuSkeleton = ({
                             lineHeight: 1,
                             height: "100%",
                             flex: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
                           }}
                         >
-                          {/* Item Name Skeleton */}
-                          <Skeleton.Input
-                            active
-                            style={{
-                              marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
-                              height: isMobile ? 16 : isTablet ? 18 : 20,
-                              width: "80%",
-                            }}
-                          />
-
                           {/* Item Description Skeleton */}
                           <Skeleton
                             active