From fc950865c4c78d80e5b24a3d88388bc6d0c4fdff Mon Sep 17 00:00:00 2001
From: filemon <danielfilemondev@gmail.com>
Date: Mon, 18 May 2026 20:35:10 -0300
Subject: [PATCH] Fix post menu URL overflow, campaign slug ellipsis, and zoom
 control jump

- NoteMoreMenu: use overflow-wrap-anywhere so long URLs break safely
  within the 3-line post preview instead of overflowing the dialog
- CreateCampaignPage: add min-w-0 to the slug truncate span and show
  trailing '...' when the slug was clipped to the 64-char limit
- index.css: move Leaflet top offset from margin-top on individual
  controls to top on the .leaflet-top container, preventing the
  visual jump that occurred when Leaflet re-rendered controls on zoom
---
 src/components/NoteMoreMenu.tsx  |  2 +-
 src/index.css                    |  9 ---------
 src/pages/CreateCampaignPage.tsx |  4 ++--
 src/pages/WorldPage.tsx          | 13 ++++++-------
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/components/NoteMoreMenu.tsx b/src/components/NoteMoreMenu.tsx
index 5ac6a454..09c6362f 100644
--- a/src/components/NoteMoreMenu.tsx
+++ b/src/components/NoteMoreMenu.tsx
@@ -523,7 +523,7 @@ function NoteMoreMenuContent({ event, open, onOpenChange, communityContext, onRe
                 {/^[A-Za-z0-9+/=_-]{20,}$/.test(event.content.trim()) ? (
                   <span className="italic">Encrypted content</span>
                 ) : (
-                  <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">
+                  <p className="text-sm leading-relaxed whitespace-pre-wrap overflow-wrap-anywhere">
                     {event.content}
                   </p>
                 )}
diff --git a/src/index.css b/src/index.css
index d80ad862..07021d7c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -167,15 +167,6 @@
   }
 }
 
-/* Push Leaflet's top-positioned controls (zoom +/−) below the sticky app
-   header so they remain clickable on /world. The header is 4rem (64px)
-   tall; the extra 0.5rem gives a comfortable gap. The default
-   `leaflet.css` sets `.leaflet-top .leaflet-control { margin-top: 10px }`
-   which lands behind the header. */
-.leaflet-top .leaflet-control {
-  margin-top: 4.5rem !important;
-}
-
 /* Leaflet control theming — override the default white/gray controls to
    match the app's themed palette. The default `leaflet/dist/leaflet.css`
    ships with hardcoded `background: white` / dark border colors that
diff --git a/src/pages/CreateCampaignPage.tsx b/src/pages/CreateCampaignPage.tsx
index 12611627..33ff338b 100644
--- a/src/pages/CreateCampaignPage.tsx
+++ b/src/pages/CreateCampaignPage.tsx
@@ -617,8 +617,8 @@ export function CreateCampaignPage() {
             />
             <p className="text-xs text-muted-foreground flex items-baseline gap-1 min-w-0">
               <span className="shrink-0">URL preview:</span>
-              <span className="font-mono text-foreground truncate">
-                /{activeIdentifier || 'your-campaign-title'}
+              <span className="font-mono text-foreground truncate min-w-0">
+                /{activeIdentifier || 'your-campaign-title'}{!isEditMode && derivedIdentifier.length >= 64 && '...'}
               </span>
               {isEditMode && <span className="shrink-0">(kept from original)</span>}
             </p>
diff --git a/src/pages/WorldPage.tsx b/src/pages/WorldPage.tsx
index c79cea58..947e67b1 100644
--- a/src/pages/WorldPage.tsx
+++ b/src/pages/WorldPage.tsx
@@ -68,13 +68,12 @@ export function WorldPage() {
   });
 
   return (
-    // h-dvh inside the column fills the full viewport on both mobile (where
-    // the column's negative margin pulls content under the translucent top
-    // bar) and desktop (where there's no top/bottom chrome). The floating
-    // discovery button is absolutely positioned inside this wrapper so it
-    // stays scoped to the column and doesn't overlap the docked desktop
-    // discovery panel.
-    <div className="relative w-full h-dvh overflow-hidden bg-muted/20">
+    // The height must account for the sticky TopNav (h-16 = 4rem) so the
+    // map fills exactly the remaining viewport. Using `h-dvh` (100dvh)
+    // would make the page scrollable and let the sticky header overlap the
+    // top of the map — hiding the Leaflet zoom controls. The calc keeps
+    // the page at exactly one viewport with no scroll.
+    <div className="relative w-full h-[calc(100dvh-4rem)] overflow-hidden bg-muted/20">
       <Suspense
         fallback={
           <div className="absolute inset-0">