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:
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user