From 99889adf1edd660b7f0161de3e2295c5d03a3b87 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Sat, 29 Aug 2026 14:41:06 +0330
Subject: [PATCH] fix(ui): move profile action button outside of main container

Relocate the profile edit/lock button from inside the `<main>` element
to outside of it. This prevents the `page-slide-enter` animation's
`will-change: transform` property from creating a new containing block,
which was causing layout issues with `position: fixed` elements.
---
 .../finding-match/finding-match-client.tsx    | 46 ++++++++++---------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/app/finding-match/finding-match-client.tsx b/src/app/finding-match/finding-match-client.tsx
index abc9f47..d330b89 100644
--- a/src/app/finding-match/finding-match-client.tsx
+++ b/src/app/finding-match/finding-match-client.tsx
@@ -189,30 +189,32 @@ export default function FindingMatchClient() {
             onGetAdvisor={openAdvisors}
           />
         </div>
-
-        <FixToTheEnd>
-          {profile?.can_edit_profile === false ? (
-            <div
-              className="inline-flex h-[52px] w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] dark:bg-[#3D3E42] px-4 text-center text-[#747474] dark:text-[#A1A1A1] shadow-none"
-              aria-live="polite"
-            >
-              <Ic name="lock" aria-hidden="true" className="size-[18px] shrink-0" />
-              <span className="group-16 leading-none font-semibold">
-                {t["Profile is locked"]}
-              </span>
-            </div>
-          ) : (
-            <Button
-              variant="dark"
-              href={localizePath("/questions-list", locale)}
-            >
-              <Ic name="pencil" aria-hidden="true" className="size-[18px] shrink-0" />
-              <span>{copy.editProfile}</span>
-            </Button>
-          )}
-        </FixToTheEnd>
       </main>
 
+      {/* Outside <main>: page-slide-enter sets will-change:transform which makes
+          main the containing block for position:fixed and narrows the button. */}
+      <FixToTheEnd>
+        {profile?.can_edit_profile === false ? (
+          <div
+            className="inline-flex h-[52px] w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] dark:bg-[#3D3E42] px-4 text-center text-[#747474] dark:text-[#A1A1A1] shadow-none"
+            aria-live="polite"
+          >
+            <Ic name="lock" aria-hidden="true" className="size-[18px] shrink-0" />
+            <span className="group-16 leading-none font-semibold">
+              {t["Profile is locked"]}
+            </span>
+          </div>
+        ) : (
+          <Button
+            variant="dark"
+            href={localizePath("/questions-list", locale)}
+          >
+            <Ic name="pencil" aria-hidden="true" className="size-[18px] shrink-0" />
+            <span>{copy.editProfile}</span>
+          </Button>
+        )}
+      </FixToTheEnd>
+
       <MarriageAdvisorsOverlay
         open={isAdvisorOpen}
         onClose={closeAdvisors}