Browse Source

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.
master
mortezaei 3 weeks ago
parent
commit
99889adf1e
  1. 46
      src/app/finding-match/finding-match-client.tsx

46
src/app/finding-match/finding-match-client.tsx

@ -189,30 +189,32 @@ export default function FindingMatchClient() {
onGetAdvisor={openAdvisors} onGetAdvisor={openAdvisors}
/> />
</div> </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> </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 <MarriageAdvisorsOverlay
open={isAdvisorOpen} open={isAdvisorOpen}
onClose={closeAdvisors} onClose={closeAdvisors}

Loading…
Cancel
Save