fix input autofill code

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

@@ -520,36 +520,44 @@ export default function NewMatchClient() {
     return (
       <>
         <PageBackground />
-        <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
-          <PageHeader className="-mx-[6px]" profile={profile} />
+        <main
+          style={{
+            paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16 + bottom}px`,
+            paddingTop: `${Math.max(12, top + 4)}px`,
+          }}
+          className="-mx-[17px] flex h-dvh flex-col overflow-hidden px-4 text-center"
+        >
+          <div className="shrink-0">
+            <PageHeader profile={profile} />
+          </div>
 
-          <div className="flex flex-1 flex-col justify-between gap-4 pt-2">
+          <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
             {/* Header Section Skeleton */}
-            <section className="flex flex-col items-center">
+            <section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
               <LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
-              <LoadingSkeleton className="h-6 w-[220px] mt-3" />
+              <LoadingSkeleton className="h-6 w-[220px] mt-2.5 sm:mt-3" />
               <LoadingSkeleton className="h-4 w-[280px] mt-2" />
               <LoadingSkeleton className="h-4 w-[240px] mt-1" />
             </section>
 
+            <div className="flex flex-col justify-between shrink-0">
               {/* Match Card Skeleton */}
-            <section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
+              <section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
                 {/* Name line */}
                 <LoadingSkeleton className="h-5 w-[140px]" />
 
                 {/* Subtitle / Details lines */}
-              <div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
+                <div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
                   <LoadingSkeleton className="h-3 w-[180px]" />
-                <LoadingSkeleton className="h-3 w-[120px]" />
                   <LoadingSkeleton className="h-3 w-[150px]" />
                 </div>
 
                 {/* Button skeleton */}
-              <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
+                <LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
               </section>
 
               {/* Advisor Card Skeleton */}
-            <section>
+              <section className="mt-4 sm:mt-6">
                 <div className="rounded-[13px] border border-white/80 bg-white px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
                   <LoadingSkeleton className="h-[16px] w-[140px]" />
                   <div className="mt-2 space-y-1">
@@ -570,10 +578,17 @@ export default function NewMatchClient() {
                 </div>
               </section>
             </div>
+          </div>
         </main>
       </>
     );
   }
+
+  const pairedPersonalFields = [
+    matchDisplay.age,
+    matchDisplay.residence,
+  ].filter((field): field is DisplayField => Boolean(field));
+
   const pairedEduFields = [
     matchDisplay.educationLevel,
     matchDisplay.fieldOfStudy,
@@ -602,11 +617,19 @@ export default function NewMatchClient() {
     <>
       <PageBackground />
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(12px,calc(var(--safe-top)+4px))] pb-[calc(20px+var(--safe-bottom))] text-center">
-        <PageHeader className="-mx-[6px]" profile={profile} />
+      <main
+        style={{
+          paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 16 + bottom}px`,
+          paddingTop: `${Math.max(12, top + 4)}px`,
+        }}
+        className="-mx-[17px] flex h-dvh flex-col overflow-hidden px-4 text-center"
+      >
+        <div className="shrink-0">
+          <PageHeader profile={profile} />
+        </div>
 
-        <div className="flex flex-1 flex-col justify-between gap-4 pt-2">
-          <section className="flex flex-col items-center">
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-y-contain flex flex-col justify-between">
+          <section className="flex flex-col items-center mt-3.5 sm:mt-5 shrink-0">
             <div
               aria-hidden="true"
               className="relative flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_12px_28px_rgba(240,68,91,0.22)]"
@@ -618,35 +641,35 @@ export default function NewMatchClient() {
                 alt="notification"
               />
             </div>
-            <h1 className="mt-3 text-center text-[20px] font-bold leading-[1.25] text-[#1A1A1A]">
+            <h2 className="text-[22px] font-bold mt-2.5 sm:mt-3">
               {matchHeadingTitle}
-            </h1>
-            <p className="mt-2 max-w-[315px] text-center text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
+            </h2>
+            <p className="mt-2 max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
               {matchHeadingDescription}
             </p>
           </section>
 
+          <div className="flex flex-col justify-between shrink-0">
             {isLoading ? (
-            <section className="rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
+              <section className="mt-4 sm:mt-6 rounded-[15px] border border-white/80 bg-white px-[17px] pt-[16px] pb-[16px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
                 <div className="flex flex-col items-center py-2">
                   {/* Name line */}
                   <LoadingSkeleton className="h-5 w-[140px]" />
 
                   {/* Subtitle / Details lines */}
-                <div className="mt-3 w-full flex flex-col items-center gap-2 min-h-[48px]">
+                  <div className="mt-2 w-full flex flex-col items-center gap-2 min-h-[40px]">
                     <LoadingSkeleton className="h-3 w-[180px]" />
-                  <LoadingSkeleton className="h-3 w-[120px]" />
                     <LoadingSkeleton className="h-3 w-[150px]" />
                   </div>
 
                   {/* Button skeleton */}
-                <LoadingSkeleton className="mt-[15px] h-[40px] w-full rounded-[10px]" />
+                  <LoadingSkeleton className="mt-3 sm:mt-3.5 h-[40px] w-full rounded-[10px]" />
                 </div>
               </section>
             ) : (
-            <section className="rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
+              <section className="mt-4 sm:mt-6 rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[16px] pb-[16px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
                 {isError ? (
-                <p className="py-6 text-[13px] font-semibold">
+                  <p className="py-8 text-[13px] font-semibold">
                     Unable to load match summary.
                   </p>
                 ) : matchSummary ? (
@@ -655,13 +678,21 @@ export default function NewMatchClient() {
                       <span>{matchDisplay.name}</span>
                     </h2>
 
-                  <div className="mt-[6px] min-h-[44px] space-y-0.5 text-left">
-                    {matchDisplay.age ? (
-                      <FieldLine field={matchDisplay.age} />
+                    <div className="mt-1.5 min-h-[40px] space-y-0.5 text-left">
+                      {pairedPersonalFields.length ? (
+                        <p className="break-words text-[11px] leading-[1.65] font-medium text-white">
+                          {pairedPersonalFields.map((field, index) => (
+                            <span key={field.id}>
+                              {index > 0 ? (
+                                <span className="opacity-75"> | </span>
                               ) : null}
-
-                    {matchDisplay.residence ? (
-                      <FieldLine field={matchDisplay.residence} />
+                              <span className="font-semibold">
+                                {field.label}:{" "}
+                              </span>
+                              <span>{field.value}</span>
+                            </span>
+                          ))}
+                        </p>
                       ) : null}
 
                       {pairedEduFields.length ? (
@@ -705,20 +736,21 @@ export default function NewMatchClient() {
                           openProfile();
                         }
                       }}
-                    className="mt-[14px] inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
+                      className="mt-3 sm:mt-3.5 inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[40px] text-[16px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
                     >
                       {t["View more details"]}
                     </button>
                   </>
                 ) : (
-                <p className="py-6 text-[13px] font-semibold">
+                  <p className="py-8 text-[13px] font-semibold">
                     No match summary is available yet.
                   </p>
                 )}
               </section>
             )}
-
+            <div className="w-full space-y-3">
               <AdvisorActionsCard
+                className="mt-4 sm:mt-6"
                 title={t["Get an advisor"]}
                 description={
                   t[
@@ -731,6 +763,8 @@ export default function NewMatchClient() {
                 onGetAdvisor={openAdvisors}
               />
             </div>
+          </div>
+        </div>
       </main>
 
       {profile?.can_edit_profile === false && (