From 8ba54273b7d93942319211f78ee8e7d345fd66f2 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Wed, 2 Sep 2026 22:16:09 +0700
Subject: [PATCH] ShareProfileDialog: no horizontal scroll + canonical share
 URL

- Dialog now sizes to the viewport (w-[calc(100vw-2rem)] max-w-sm) with
  overflow-hidden and min-w-0 children so the QR + URL never force lateral scroll
- Slightly smaller QR (48/52) to fit comfortably in the narrow dialog
- Share links/QRs now always anchor to https://skate-spots.org instead of
  window.location.origin, which in the editor resolves to the sandbox iframe host
  (the *.iframe.diy URL you saw)

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/ShareProfileDialog.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/ShareProfileDialog.tsx b/src/components/ShareProfileDialog.tsx
index fb501c6..51709c2 100644
--- a/src/components/ShareProfileDialog.tsx
+++ b/src/components/ShareProfileDialog.tsx
@@ -25,10 +25,11 @@ export function ShareProfileDialog({ open, onOpenChange, npub, displayName }: Sh
   const [qr, setQr] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
 
-  // Prefer the deployed public URL so the link works anywhere; fall back to the
-  // current origin (dev / self-hosted).
-  const origin = typeof window !== 'undefined' ? window.location.origin : 'https://skate-spots.org';
-  const shareUrl = `${origin}/${npub}`;
+  // Always anchor to the canonical public site so shared links/QRs point to the
+  // real domain — never the preview/sandbox iframe host that window.location
+  // would give us inside the editor.
+  const CANONICAL_ORIGIN = 'https://skate-spots.org';
+  const shareUrl = `${CANONICAL_ORIGIN}/${npub}`;
 
   useEffect(() => {
     if (!open) return;
@@ -71,10 +72,10 @@ export function ShareProfileDialog({ open, onOpenChange, npub, displayName }: Sh
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-sm bg-black border-white/10">
-        <DialogHeader>
+      <DialogContent className="w-[calc(100vw-2rem)] max-w-sm overflow-hidden bg-black border-white/10">
+        <DialogHeader className="min-w-0">
           <DialogTitle className="flex items-center gap-2 uppercase font-black">
-            <Share2 className="h-5 w-5 text-[#ff0040]" />
+            <Share2 className="h-5 w-5 text-[#ff0040] flex-shrink-0" />
             Share profile
           </DialogTitle>
           <DialogDescription className="text-gray-400">
@@ -83,12 +84,12 @@ export function ShareProfileDialog({ open, onOpenChange, npub, displayName }: Sh
         </DialogHeader>
 
         {/* QR */}
-        <div className="flex flex-col items-center gap-4 py-2">
+        <div className="flex flex-col items-center gap-4 py-2 min-w-0 w-full">
           <div className="rounded-2xl bg-white p-3 shadow-lg">
             {qr ? (
-              <img src={qr} alt="Profile QR code" className="w-56 h-56" />
+              <img src={qr} alt="Profile QR code" className="w-48 h-48 sm:w-52 sm:h-52" />
             ) : (
-              <div className="w-56 h-56 flex items-center justify-center">
+              <div className="w-48 h-48 sm:w-52 sm:h-52 flex items-center justify-center">
                 <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
               </div>
             )}
@@ -97,7 +98,7 @@ export function ShareProfileDialog({ open, onOpenChange, npub, displayName }: Sh
           {/* URL + copy */}
           <button
             onClick={handleCopy}
-            className="group w-full flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 hover:border-[#ff0040]/40 transition-colors"
+            className="group w-full max-w-full flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2.5 hover:border-[#ff0040]/40 transition-colors"
           >
             <span className="flex-1 min-w-0 text-left text-sm text-gray-300 truncate font-mono">
               {shareUrl.replace(/^https?:\/\//, '')}