Shrink-to-fit (w-fit + auto grid track) keeps collapsing the text column
inside Leaflet's popup engine — the title truncates to "Lo" in a squashed
box. Revert to the definite responsive width that renders correctly:
w-[calc(100vw-2rem)] max-w-[463px] with a minmax(0,1fr) text track. Keeps
the close-button vertical alignment (top:12px) from the prior change.
- Release the px width Leaflet pins inline on .leaflet-popup-content
(width:auto) so the card can shrink-to-fit. The event card now uses
w-fit with an `auto` text track, capped at min(463px, 100vw-2rem) — no
empty gutter beside short titles, still responsive on mobile.
- Nudge the close button to top:12px so it lines up vertically with the
title row instead of floating above it.
Root cause (verified against leaflet.css source, not guesswork):
- .leaflet-popup-content p { margin: 1.3em 0 } injected ~17px vertical
margins onto the card's time/location <p> tags, spreading the text off
the design grid
- .leaflet-popup-content { font-size: 1.08333em } bumped the base font
- .leaflet-container a { color: #0078A8 } turned the card title blue
- Popup maxWidth=360 capped the card at 340px, forcing the title to wrap
to two lines so it never matched the 463px Upcoming Events card
Fixes:
- Reset Leaflet content font/line-height and per-paragraph margins; force
anchor colour to inherit
- Event card now uses the exact EventCard geometry (w-[463px], 123px
cover, truncated single-line title, identical padding/radius)
- Raise Popup maxWidth to 480 (minWidth 340) so the full-width card fits
- Reposition close button with balanced 16px/18px inset
- Add !important to Leaflet popup overrides so they win over component-level
leaflet.css imports
- Position close button with equal 12px top/right spacing on the card
- Explicitly set text-brand-dark-green on event title to prevent browser
default link colour from showing
- Allow event title to wrap (remove truncate) since card can be taller
Apply logos-circle-popup CSS class to strip the default Leaflet popup
wrapper (background, border, shadow, tip arrow) so the gray card sits
directly on the map. Also align event and no-event card styles with
the existing Upcoming Events card design.
- Introduced a new JSON snapshot for active circles, including details about events and statistics.
- Added a script to sync the active circles snapshot from the live Logos API.
- Updated package.json to include a new build step for syncing active circles.
- Modified footer component to include an interactive newsletter signup form.
- Adjusted various links in content to point to updated resources and initiatives.
- Enhanced link validation to support same-page anchors.
jinhojang6