fix(settings/profile): fix share dropdown invisible + expand click broken
Root cause: parent div had overflow-hidden which clipped absolute-positioned dropdowns, making them render but be invisible (looked like click did nothing). - Removed overflow-hidden from profile card container - Share dropdowns now use fixed positioning to escape any parent overflow - Merged chevron into the expand button so the whole left area is one tap target - Per-product share sheet also changed to fixed bottom-28 right-4 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
fb402e9898
commit
f806e4d3bd
1 changed files with 46 additions and 48 deletions
|
|
@ -188,65 +188,63 @@ export default function ProfileSettingsPage() {
|
||||||
|
|
||||||
<div className="px-4 space-y-4">
|
<div className="px-4 space-y-4">
|
||||||
{/* Profile section — collapsible */}
|
{/* Profile section — collapsible */}
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
|
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm">
|
||||||
{/* Always-visible header row */}
|
{/* Always-visible header row — single tappable button + share action */}
|
||||||
<div className="flex items-center justify-between px-4 py-3">
|
<div className="flex items-center gap-2 px-4 py-3">
|
||||||
|
{/* Main expand/collapse — takes all remaining space */}
|
||||||
<button
|
<button
|
||||||
onClick={() => setProfileExpanded(v => !v)}
|
onClick={() => setProfileExpanded(v => !v)}
|
||||||
className="flex items-center gap-3 flex-1 text-left"
|
className="flex items-center gap-3 flex-1 text-left min-w-0"
|
||||||
>
|
>
|
||||||
<span className="text-xl">👤</span>
|
<span className="text-xl">👤</span>
|
||||||
<div>
|
<div className="min-w-0">
|
||||||
<p className="font-semibold text-gray-800 dark:text-white text-sm">
|
<p className="font-semibold text-gray-800 dark:text-white text-sm truncate">
|
||||||
{displayName || "Set up your profile"}
|
{displayName || "Set up your profile"}
|
||||||
</p>
|
</p>
|
||||||
{!profileExpanded && slug && (
|
{!profileExpanded && slug && (
|
||||||
<p className="text-xs text-gray-400">{baseUrl}/m/{slug}</p>
|
<p className="text-xs text-gray-400 truncate">{baseUrl}/m/{slug}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
<span className={`text-gray-400 text-sm transition-transform flex-shrink-0 ${profileExpanded ? "rotate-180" : ""}`}>▼</span>
|
||||||
</button>
|
</button>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{/* Profile page share — only when slug is set */}
|
{/* Profile page share — floats outside the expand button to avoid triggering expand */}
|
||||||
{slug && slugValid && (
|
{slug && slugValid && (
|
||||||
<div className="relative">
|
<div className="relative flex-shrink-0">
|
||||||
<button
|
<button
|
||||||
onClick={e => { e.stopPropagation(); setProfileShareOpen(v => !v); }}
|
onClick={() => setProfileShareOpen(v => !v)}
|
||||||
className="p-2 rounded-xl bg-rose-50 dark:bg-rose-900/20 text-rose-500 text-sm"
|
className="p-2 rounded-xl bg-rose-50 dark:bg-rose-900/20 text-rose-500 text-sm"
|
||||||
title="Share your profile page"
|
title="Share your profile page"
|
||||||
>
|
>
|
||||||
↗
|
↗
|
||||||
</button>
|
</button>
|
||||||
{profileShareOpen && (
|
{profileShareOpen && (
|
||||||
<>
|
<>
|
||||||
<div className="fixed inset-0 z-30" onClick={() => setProfileShareOpen(false)} />
|
<div className="fixed inset-0 z-30" onClick={() => setProfileShareOpen(false)} />
|
||||||
<div className="absolute right-0 top-9 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="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" }}>
|
||||||
<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">
|
||||||
|
<span className="text-lg">{copied ? "✅" : "📋"}</span>
|
||||||
|
{copied ? "Copied!" : "Copy link"}
|
||||||
|
</button>
|
||||||
|
<button onClick={() => { shareViaWhatsApp(profileUrl, "Check out my baby product recommendations!"); 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">
|
||||||
|
<span className="text-lg">💬</span>
|
||||||
|
WhatsApp
|
||||||
|
</button>
|
||||||
|
{typeof navigator !== "undefined" && "share" in navigator && (
|
||||||
|
<button onClick={() => { shareNative(`${displayName}'s baby picks`, 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">
|
||||||
<span className="text-lg">{copied ? "✅" : "📋"}</span>
|
<span className="text-lg">📤</span>
|
||||||
{copied ? "Copied!" : "Copy link"}
|
More options
|
||||||
</button>
|
</button>
|
||||||
<button onClick={() => { shareViaWhatsApp(profileUrl, "Check out my baby product recommendations!"); 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">
|
</div>
|
||||||
<span className="text-lg">💬</span>
|
</>
|
||||||
WhatsApp
|
)}
|
||||||
</button>
|
</div>
|
||||||
{typeof navigator !== "undefined" && "share" in navigator && (
|
)}
|
||||||
<button onClick={() => { shareNative(`${displayName}'s baby picks`, 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">
|
|
||||||
<span className="text-lg">📤</span>
|
|
||||||
More options
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<button onClick={() => setProfileExpanded(v => !v)} className="p-2 text-gray-400 text-sm">
|
|
||||||
<span className={`inline-block transition-transform ${profileExpanded ? "rotate-180" : ""}`}>▼</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Expanded form */}
|
{/* Expanded form */}
|
||||||
|
|
@ -393,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="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">
|
<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">
|
||||||
<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">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue