From 953ab545f8bc880d6dbe7eff6a77bf750ffe9197 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Wed, 26 Aug 2026 09:47:58 +0330
Subject: [PATCH] fix(ui): match AppBar specs exactly with Flutter 56px toolbar
 and safe area on scroll

---
 src/app/intro/intro-client.tsx             | 31 +++++++++++++---------
 src/app/new-match/new-match-client.tsx     |  8 +++---
 src/components/Componentes/page-header.tsx |  4 +--
 src/components/Componentes/slider-page.tsx |  4 +--
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/app/intro/intro-client.tsx b/src/app/intro/intro-client.tsx
index a2dc838..43bef57 100644
--- a/src/app/intro/intro-client.tsx
+++ b/src/app/intro/intro-client.tsx
@@ -125,19 +125,25 @@ export default function IntroClient() {
 
   return (
     <>
-      <div className="pt-[max(12px,calc(var(--safe-top)+4px))]">
+      <div
+        style={{
+          paddingTop: "max(12px, var(--safe-top))",
+        }}
+        className="sticky top-0 z-30 -mx-[17px] px-[17px] bg-[#F5F5F5]/90 backdrop-blur-md"
+      >
         <PageHeader profile={profile} />
-        <main className="pb-[calc(90px+var(--safe-bottom))]">
-          <div className="flex flex-col items-center mt-16">
-            <Image
-              src={"/assets/images/Group 1597880466.svg"}
-              alt={t["heavenly marriage"]}
-              width={168}
-              height={155}
-              priority
-              loading="eager"
-            />
-            <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
+      </div>
+      <main className="pb-[calc(90px+var(--safe-bottom))]">
+        <div className="flex flex-col items-center mt-16">
+          <Image
+            src={"/assets/images/Group 1597880466.svg"}
+            alt={t["heavenly marriage"]}
+            width={168}
+            height={155}
+            priority
+            loading="eager"
+          />
+          <h2 className="group-16 text-[#475569] font-bold mt-5 text-center">
               {t["A Path to Heavenly Marriage"]}
             </h2>
             <p className="text-center mt-2 group-12 text-[#4D4D4D]">
@@ -213,7 +219,6 @@ export default function IntroClient() {
             </div>
           </div>
         </main>
-      </div>
 
       <SectionOverlayHost
         open={isStepsOpen}
diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 6b717f7..af5ac58 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -638,9 +638,9 @@ export default function NewMatchClient() {
         >
           <div
             style={{
-              paddingTop: `${Math.max(12, top + 4)}px`,
+              paddingTop: `${Math.max(12, top)}px`,
             }}
-            className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+            className="sticky top-0 z-30 -mx-[18px] px-[18px] bg-[#F7F1F0]/90 backdrop-blur-md"
           >
             <PageHeader profile={profile} />
           </div>
@@ -727,9 +727,9 @@ export default function NewMatchClient() {
       >
         <div
           style={{
-            paddingTop: `${Math.max(12, top + 4)}px`,
+            paddingTop: `${Math.max(12, top)}px`,
           }}
-          className="sticky top-0 z-30 -mx-[18px] px-[18px] pb-2 bg-[#F7F1F0]/90 backdrop-blur-md"
+          className="sticky top-0 z-30 -mx-[18px] px-[18px] bg-[#F7F1F0]/90 backdrop-blur-md"
         >
           <PageHeader profile={profile} />
         </div>
diff --git a/src/components/Componentes/page-header.tsx b/src/components/Componentes/page-header.tsx
index 6d9603a..fa7dcc9 100644
--- a/src/components/Componentes/page-header.tsx
+++ b/src/components/Componentes/page-header.tsx
@@ -57,7 +57,7 @@ export function PageHeader({
 
   return (
     <header
-      className={["flex items-center justify-between pb-3", className]
+      className={["flex h-[56px] items-center justify-between", className]
         .filter(Boolean)
         .join(" ")}
     >
@@ -66,7 +66,7 @@ export function PageHeader({
       ) : (
         <NavigationButton icon="back" profile={profile} {...leftButton} />
       )}
-      <h1 className="font-faminela text-[20px] font-normal text-foreground">
+      <h1 className="font-faminela text-[20px] font-normal text-foreground leading-none select-none">
         {t["Habib Marriage"]}
       </h1>
 
diff --git a/src/components/Componentes/slider-page.tsx b/src/components/Componentes/slider-page.tsx
index 30d5129..f59316d 100644
--- a/src/components/Componentes/slider-page.tsx
+++ b/src/components/Componentes/slider-page.tsx
@@ -133,8 +133,8 @@ export default function SliderPage({ onClose }: SliderPageProps = {}) {
           onClose={() => setSubmitError(null)}
         />
       )}
-      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-3">
-        <div className="relative flex items-center justify-between">
+      <header className="relative -mx-[17px] rounded-b-[32px] px-[17px] pt-[max(12px,calc(var(--safe-top)))]">
+        <div className="relative flex h-[56px] items-center justify-between">
           <NavigationButton
             icon="back"
             iconLabel="Close slider"