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
This commit is contained in:
filemon
2026-05-18 20:35:10 -03:00
parent 2f8569c302
commit fc950865c4
4 changed files with 9 additions and 19 deletions
+1 -1
View File
@@ -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>
)}
-9
View File
@@ -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
+2 -2
View File
@@ -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>
+6 -7
View File
@@ -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">