From cb3c34ee9035aa200e1302d024624cd10109afe7 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Thu, 20 Aug 2026 19:06:37 +0330
Subject: [PATCH] fix input autofill code

---
 src/app/new-match/new-match-client.tsx        | 104 +++++++++---------
 .../Componentes/advisor-actions-card.tsx      |   6 +-
 2 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/src/app/new-match/new-match-client.tsx b/src/app/new-match/new-match-client.tsx
index 4a7d827..8f9321c 100644
--- a/src/app/new-match/new-match-client.tsx
+++ b/src/app/new-match/new-match-client.tsx
@@ -385,7 +385,7 @@ function useMatchSummaryDisplay(
 
 function FieldLine({ field }: { field: DisplayField }) {
   return (
-    <p className="break-words text-[11px] leading-[1.65] font-medium text-white">
+    <p className="break-words text-[11px] leading-[1.4] font-medium text-white">
       <span className="font-semibold">{field.label}: </span>
       <span>{field.value}</span>
     </p>
@@ -522,57 +522,57 @@ export default function NewMatchClient() {
         <PageBackground />
         <main
           style={{
-            paddingBottom: `${bottom + 20}px`,
-            paddingTop: `${Math.max(12, top + 4)}px`,
+            paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 12 + bottom}px`,
+            paddingTop: `${Math.max(8, top + 2)}px`,
           }}
-          className="-mx-[17px] min-h-screen h-full text-center px-4"
+          className="-mx-[17px] flex min-h-full flex-col px-4 text-center justify-between"
         >
           <PageHeader profile={profile} />
 
-          <div>
+          <div className="flex flex-1 flex-col justify-between">
             {/* Header Section Skeleton */}
-            <section className="flex flex-col items-center mt-9">
-              <LoadingSkeleton className="h-[60px] w-[60px] rounded-full" />
-              <LoadingSkeleton className="h-6 w-[220px] mt-4" />
-              <LoadingSkeleton className="h-4 w-[280px] mt-3" />
-              <LoadingSkeleton className="h-4 w-[240px] mt-1.5" />
+            <section className="flex flex-col items-center mt-2 sm:mt-4">
+              <LoadingSkeleton className="h-[52px] w-[52px] rounded-full" />
+              <LoadingSkeleton className="h-5 w-[200px] mt-2 sm:mt-3" />
+              <LoadingSkeleton className="h-3.5 w-[260px] mt-1.5" />
+              <LoadingSkeleton className="h-3.5 w-[220px] mt-1" />
             </section>
 
-            <div className="flex h-full flex-col justify-between">
+            <div className="flex flex-col justify-between">
               {/* Match Card Skeleton */}
-              <section className="mt-[36px] 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-2.5 sm:mt-4 rounded-[15px] border border-white/80 bg-white px-3.5 py-3 shadow-[0_18px_45px_rgba(15,23,42,0.06)] flex flex-col items-center">
                 {/* Name line */}
-                <LoadingSkeleton className="h-5 w-[140px]" />
+                <LoadingSkeleton className="h-4.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-1.5 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-2.5 h-[38px] w-full rounded-[10px]" />
               </section>
 
               {/* Advisor Card Skeleton */}
-              <section className="mt-[36px]">
-                <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">
-                    <LoadingSkeleton className="h-[10px] w-[260px]" />
-                    <LoadingSkeleton className="h-[10px] w-[180px]" />
+              <section className="mt-2.5 sm:mt-4">
+                <div className="rounded-[13px] border border-white/80 bg-white px-3 py-3 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
+                  <LoadingSkeleton className="h-[15px] w-[130px]" />
+                  <div className="mt-1.5 space-y-1">
+                    <LoadingSkeleton className="h-[10px] w-[240px]" />
+                    <LoadingSkeleton className="h-[10px] w-[160px]" />
                   </div>
 
-                  <div className="mt-4 flex items-center justify-between gap-3">
+                  <div className="mt-3 flex items-center justify-between gap-3">
                     <div className="flex items-center pl-1">
-                      <LoadingSkeleton className="h-[30px] w-[30px] rounded-full border-2 border-white" />
-                      <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
-                      <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
-                      <LoadingSkeleton className="-ml-1.5 h-[30px] w-[30px] rounded-full border-2 border-white" />
+                      <LoadingSkeleton className="h-[28px] w-[28px] rounded-full border-2 border-white" />
+                      <LoadingSkeleton className="-ml-1.5 h-[28px] w-[28px] rounded-full border-2 border-white" />
+                      <LoadingSkeleton className="-ml-1.5 h-[28px] w-[28px] rounded-full border-2 border-white" />
+                      <LoadingSkeleton className="-ml-1.5 h-[28px] w-[28px] rounded-full border-2 border-white" />
                     </div>
 
-                    <LoadingSkeleton className="h-[38px] w-[120px] rounded-[9px]" />
+                    <LoadingSkeleton className="h-[36px] w-[110px] rounded-[9px]" />
                   </div>
                 </div>
               </section>
@@ -612,64 +612,65 @@ export default function NewMatchClient() {
 
       <main
         style={{
-          paddingBottom: `${profile?.can_edit_profile === false ? 100 + bottom : 20 + bottom}px`,
-          paddingTop: `${Math.max(12, top + 4)}px`,
+          paddingBottom: `${profile?.can_edit_profile === false ? 76 + bottom : 12 + bottom}px`,
+          paddingTop: `${Math.max(8, top + 2)}px`,
         }}
-        className="-mx-[17px] min-h-screen h-full text-center px-4"
+        className="-mx-[17px] flex min-h-full flex-col px-4 text-center justify-between"
       >
         <PageHeader profile={profile} />
 
-        <div className="">
-          <section className="flex flex-col items-center mt-9">
+        <div className="flex flex-1 flex-col justify-between">
+          <section className="flex flex-col items-center mt-2 sm:mt-4">
             <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)]"
+              className="relative flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#FF4E67] shadow-[0_10px_24px_rgba(240,68,91,0.22)]"
             >
               <Image
                 src={"/assets/images/Ellipse 1210.svg"}
-                width={70}
-                height={70}
+                width={60}
+                height={60}
                 alt="notification"
               />
             </div>
-            <h2 className="text-[22px] font-bold mt-3.5">
+            <h2 className="text-[19px] sm:text-[21px] font-bold mt-2 sm:mt-3">
               {matchHeadingTitle}
             </h2>
-            <p className="mt-[11px] max-w-[322px] text-[12px] leading-[1.35] font-semibold text-[#7C7C7C]">
+            <p className="mt-1 max-w-[322px] text-[11.5px] sm:text-[12px] leading-[1.3] font-semibold text-[#7C7C7C]">
               {matchHeadingDescription}
             </p>
           </section>
-          <div className="flex h-full flex-col justify-between">
+
+          <div className="flex flex-col justify-between">
             {isLoading ? (
-              <section className="mt-[36px] rounded-[15px] border border-white/80 bg-white px-[17px] pt-[18px] pb-[17px] shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
-                <div className="flex flex-col items-center py-2">
+              <section className="mt-2.5 sm:mt-4 rounded-[15px] border border-white/80 bg-white px-3.5 py-3 shadow-[0_18px_45px_rgba(15,23,42,0.06)]">
+                <div className="flex flex-col items-center py-1">
                   {/* Name line */}
-                  <LoadingSkeleton className="h-5 w-[140px]" />
+                  <LoadingSkeleton className="h-4.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-1.5 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-2.5 h-[38px] w-full rounded-[10px]" />
                 </div>
               </section>
             ) : (
-              <section className="mt-[36px] rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-[17px] pt-[18px] pb-[17px] text-white shadow-[0_18px_38px_rgba(240,68,91,0.25)]">
+              <section className="mt-2.5 sm:mt-4 rounded-[15px] bg-[linear-gradient(180deg,#F0445B_0%,#F4556E_100%)] px-3.5 sm:px-[17px] pt-3 pb-3 text-white shadow-[0_14px_30px_rgba(240,68,91,0.22)]">
                 {isError ? (
-                  <p className="py-8 text-[13px] font-semibold">
+                  <p className="py-4 text-[13px] font-semibold">
                     Unable to load match summary.
                   </p>
                 ) : matchSummary ? (
                   <>
-                    <h2 className="break-words text-[14px] leading-[1.4] font-bold">
+                    <h2 className="break-words text-[13.5px] sm:text-[14px] leading-tight font-bold">
                       <span>{matchDisplay.name}</span>
                     </h2>
 
-                    <div className="mt-[6px] min-h-[48px] space-y-0.5 text-left">
+                    <div className="mt-1.5 min-h-[40px] space-y-0.5 text-left">
                       {matchDisplay.age ? (
                         <FieldLine field={matchDisplay.age} />
                       ) : null}
@@ -679,7 +680,7 @@ export default function NewMatchClient() {
                       ) : null}
 
                       {pairedEduFields.length ? (
-                        <p className="break-words text-[11px] leading-[1.65] font-medium text-white">
+                        <p className="break-words text-[11px] leading-[1.4] font-medium text-white">
                           {pairedEduFields.map((field, index) => (
                             <span key={field.id}>
                               {index > 0 ? (
@@ -719,21 +720,20 @@ export default function NewMatchClient() {
                           openProfile();
                         }
                       }}
-                      className="mt-[15px] 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-2 sm:mt-3 inline-flex w-full items-center justify-center rounded-[10px] border-none bg-white h-[38px] text-[15px] font-semibold text-[#F0445B] no-underline shadow-none hover:bg-white/95 transition-colors cursor-pointer"
                     >
                       {t["View more details"]}
                     </button>
                   </>
                 ) : (
-                  <p className="py-8 text-[13px] font-semibold">
+                  <p className="py-4 text-[13px] font-semibold">
                     No match summary is available yet.
                   </p>
                 )}
               </section>
             )}
-            <div className="w-full space-y-3">
+            <div className="w-full space-y-2 mt-2.5 sm:mt-4">
               <AdvisorActionsCard
-                className="mt-[36px]"
                 title={t["Get an advisor"]}
                 description={
                   t[
diff --git a/src/components/Componentes/advisor-actions-card.tsx b/src/components/Componentes/advisor-actions-card.tsx
index f1722a6..2cf7ac0 100644
--- a/src/components/Componentes/advisor-actions-card.tsx
+++ b/src/components/Componentes/advisor-actions-card.tsx
@@ -56,15 +56,15 @@ export function AdvisorActionsCard({
 
   return (
     <section className={["space-y-3", className].filter(Boolean).join(" ")}>
-      <div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3.5 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
+      <div className="rounded-[13px] border border-white/80 bg-white/72 px-3 py-3 text-left shadow-[0_18px_45px_rgba(15,23,42,0.06)] backdrop-blur-sm">
         <h2 className="group-16 leading-none font-bold text-[#1C1C1C]">
           {title}
         </h2>
-        <p className="mt-2 max-w-[280px] group-10 leading-[1.45] font-semibold text-[#8A8A8A]">
+        <p className="mt-1.5 max-w-[280px] group-10 leading-[1.4] font-semibold text-[#8A8A8A]">
           {description}
         </p>
 
-        <div className="mt-4 flex items-center justify-between gap-3">
+        <div className="mt-3 flex items-center justify-between gap-3">
           <div className="flex items-center pl-1">
             {isLoading
               ? /* ── Shimmer circles while API loads ── */