From f806e4d3bd0432b4cc3b4af5825b5c3bb566a4fd Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 23 May 2026 22:29:38 +0530
Subject: [PATCH] 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>
---
 src/app/settings/profile/page.tsx | 94 +++++++++++++++----------------
 1 file changed, 46 insertions(+), 48 deletions(-)

diff --git a/src/app/settings/profile/page.tsx b/src/app/settings/profile/page.tsx
index dc314b6..d2b181d 100644
--- a/src/app/settings/profile/page.tsx
+++ b/src/app/settings/profile/page.tsx
@@ -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">