cart: adjust layout

src/components/ProHeader/ProHeader.tsx

@@ -1,4 +1,4 @@
-import { Button, Typography } from "antd";
+import { Button, Typography, Layout } from "antd";
 import BackIcon from "components/Icons/BackIcon";
 import { FunctionComponent, ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
@@ -33,9 +33,12 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
   };
 
   return (
-    <div
+    <Layout.Header
       style={{
+        position: "sticky",
+        top: 0,
         display: "flex",
+        zIndex: 1,
         flexDirection: isRTL ? "row-reverse" : "row",
         justifyContent: "space-between",
         alignItems: "center", // This centers vertically
@@ -97,7 +100,7 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
       ) : (
         children
       )}
-    </div>
+    </Layout.Header>
   );
 };