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">
|
||||
{/* Profile section — collapsible */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
|
||||
{/* Always-visible header row */}
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-2xl shadow-sm">
|
||||
{/* Always-visible header row — single tappable button + share action */}
|
||||
<div className="flex items-center gap-2 px-4 py-3">
|
||||
{/* Main expand/collapse — takes all remaining space */}
|
||||
<button
|
||||
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>
|
||||
<div>
|
||||
<p className="font-semibold text-gray-800 dark:text-white text-sm">
|
||||
<div className="min-w-0">
|
||||
<p className="font-semibold text-gray-800 dark:text-white text-sm truncate">
|
||||
{displayName || "Set up your profile"}
|
||||
</p>
|
||||
{!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>
|
||||
<span className={`text-gray-400 text-sm transition-transform flex-shrink-0 ${profileExpanded ? "rotate-180" : ""}`}>▼</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Profile page share — only when slug is set */}
|
||||
{slug && slugValid && (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); setProfileShareOpen(v => !v); }}
|
||||
className="p-2 rounded-xl bg-rose-50 dark:bg-rose-900/20 text-rose-500 text-sm"
|
||||
title="Share your profile page"
|
||||
>
|
||||
↗
|
||||
</button>
|
||||
{profileShareOpen && (
|
||||
<>
|
||||
<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">
|
||||
<p className="text-xs text-gray-400 px-2 pb-1">Share your profile page</p>
|
||||
<button onClick={() => { copyLink(profileUrl); setProfileShareOpen(false); }}
|
||||
|
||||
{/* Profile page share — floats outside the expand button to avoid triggering expand */}
|
||||
{slug && slugValid && (
|
||||
<div className="relative flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setProfileShareOpen(v => !v)}
|
||||
className="p-2 rounded-xl bg-rose-50 dark:bg-rose-900/20 text-rose-500 text-sm"
|
||||
title="Share your profile page"
|
||||
>
|
||||
↗
|
||||
</button>
|
||||
{profileShareOpen && (
|
||||
<>
|
||||
<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" }}>
|
||||
<p className="text-xs text-gray-400 px-2 pb-1">Share your profile page</p>
|
||||
<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">
|
||||
<span className="text-lg">{copied ? "✅" : "📋"}</span>
|
||||
{copied ? "Copied!" : "Copy link"}
|
||||
<span className="text-lg">📤</span>
|
||||
More options
|
||||
</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">
|
||||
<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>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expanded form */}
|
||||
|
|
@ -393,7 +391,7 @@ export default function ProfileSettingsPage() {
|
|||
{shareProductId === p.id && (
|
||||
<>
|
||||
<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>
|
||||
<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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue