docs(carto-create-builder-maps): add wrapper background rule to popup HTML templates#37
Open
anamanvil wants to merge 1 commit into
Open
docs(carto-create-builder-maps): add wrapper background rule to popup HTML templates#37anamanvil wants to merge 1 commit into
anamanvil wants to merge 1 commit into
Conversation
… HTML templates Discovered while visually verifying the prior gradient/close-✕ fix: tooltip surfaces (`light`, `lightWithHiFirst`, `dark`, `darkWithHiFirst`) suppress the popup card chrome when `templateMode: true`, so a template whose outer wrapper has `border-radius` / `box-shadow` / `overflow: hidden` but NO `background` renders transparently over the basemap — text floats against the map and is often unreadable. The bug was masked by the `panel` surface, which paints its own white chrome behind any template, so the same wrapper that "worked" on `panel` breaks the moment the author switches the click style to `light`. - Add a new subsection "Set a background on the outer wrapper" right beside the close-✕ headroom rule, spelling out the chrome-suppression behaviour and the per-style background colour to use (`#fff` for light, `#1d2733` for dark). - Update the concrete recipe to include `background: #fff` on the outer `<div>` so it is portable across `light` / `dark` / `panel` without edits. - Rewrite the trailing prose to enumerate the three details that make the recipe portable (background, 32 px right padding, solid fill). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
anamanvil
force-pushed
the
claude/popup-template-background
branch
from
ea85f4a to
1d0ab27
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #36, found while visually verifying the recipe.
Tooltip surfaces (
light,lightWithHiFirst,dark,darkWithHiFirst) suppress the popup card chrome whentemplateMode: true— the template IS the whole popup. If the outer<div>hasborder-radius/box-shadow/overflow: hiddenbut nobackground, the body renders transparently over the basemap and the text floats against the map.The
panelsurface masked this bug because the docked side panel paints its own white chrome behind any template, so the same wrapper that "worked" onpanelbreaks the moment the author switches the click style tolight. Caught it in a live demo map with a Supermarket popup over Buffalo, WY where the body text was sitting on top of the basemap.#ffffor light,#1d2733for dark).background: #fffon the outer<div>so it renders identically onlight/dark/panelwithout further edits.Single file: popups.md.
Test plan
make validate— 523 snippets validated