fix(settings/profile): anchor share dropdowns to their trigger buttons

Reverted fixed viewport positioning back to absolute — the parent cards
no longer have overflow-hidden so absolute works correctly now. Both
dropdowns (profile share and per-product share) appear directly below/above
their trigger button instead of floating at a random screen corner.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-23 22:37:13 +05:30
parent f806e4d3bd
commit 94b80fd862

View file

@ -221,7 +221,7 @@ export default function ProfileSettingsPage() {
{profileShareOpen && ( {profileShareOpen && (
<> <>
<div className="fixed inset-0 z-30" onClick={() => setProfileShareOpen(false)} /> <div className="fixed inset-0 z-30" onClick={() => setProfileShareOpen(false)} />
<div className="fixed right-4 z-40 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 p-3 w-52 space-y-1" style={{ top: "auto" }}> <div className="absolute right-0 top-10 z-40 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 p-3 w-52 space-y-1">
<p className="text-xs text-gray-400 px-2 pb-1">Share your profile page</p> <p className="text-xs text-gray-400 px-2 pb-1">Share your profile page</p>
<button onClick={() => { copyLink(profileUrl); setProfileShareOpen(false); }} <button onClick={() => { copyLink(profileUrl); setProfileShareOpen(false); }}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-200"> className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-200">
@ -391,7 +391,7 @@ export default function ProfileSettingsPage() {
{shareProductId === p.id && ( {shareProductId === p.id && (
<> <>
<div className="fixed inset-0 z-30" onClick={() => setShareProductId(null)} /> <div className="fixed inset-0 z-30" onClick={() => setShareProductId(null)} />
<div className="fixed right-4 bottom-28 z-40 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 p-3 w-52 space-y-1"> <div className="absolute right-0 bottom-8 z-40 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 p-3 w-52 space-y-1">
<p className="text-xs text-gray-400 px-2 pb-1 truncate">{p.title}</p> <p className="text-xs text-gray-400 px-2 pb-1 truncate">{p.title}</p>
<button onClick={() => { copyLink(p.url); setShareProductId(null); }} <button onClick={() => { copyLink(p.url); setShareProductId(null); }}
className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-200"> className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 text-sm text-gray-700 dark:text-gray-200">