skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity Actions 1

ShareProfileDialog: no horizontal scroll + canonical share URL

Browse source 
- 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>
This commit is contained in:
shakespeare.diy 2026-09-02 22:16:09 +07:00
parent 1b57f79cba
commit 8ba54273b7
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/ShareProfileDialog.tsx
View file

@ -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?:\/\//, '')}