fix(ui): make top PageHeader sticky on new-match screen during scroll

src/app/new-match/new-match-client.tsx

@@ -634,12 +634,14 @@ export default function NewMatchClient() {
       <>
         <PageBackground />
         <main
-          style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
-          }}
           className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
         >
-          <div className="shrink-0 mb-1">
+          <div
+            style={{
+              paddingTop: `${Math.max(12, top + 4)}px`,
+            }}
+            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+          >
             <PageHeader profile={profile} />
           </div>
 
@@ -721,12 +723,14 @@ export default function NewMatchClient() {
       <PageBackground />
 
       <main
-        style={{
-          paddingTop: `${Math.max(12, top + 4)}px`,
-        }}
         className="-mx-[17px] flex min-h-dvh flex-col px-[18px] text-center"
       >
-        <div className="shrink-0 mb-1">
+        <div
+          style={{
+            paddingTop: `${Math.max(12, top + 4)}px`,
+          }}
+          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+        >
           <PageHeader profile={profile} />
         </div>