fix(viewer): apply legend gradient via background-image, not shorthand#9
Merged
Merged
Conversation
The earlier border-box fix (#4) never took effect: the legend bar sets its gradient with the `background` shorthand, which resets every background sub-property — including `background-origin` — back to its initial `padding-box` on each render, overriding the stylesheet's `background-origin: border-box`. The gradient was sized to the padding box and tiled under the 1px translucent border, leaking the opposite end's colour as a sliver at the top and bottom. Use the `background-image` longhand so the stylesheet's `background-origin: border-box` survives. Verified in the running app (elevation legend) that both ends are now clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Deploying caveviewer with
|
| Latest commit: |
3ba1a16
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://2798c9e8.caveviewer.pages.dev |
| Branch Preview URL: | https://fix-legend-gradient-shorthan.caveviewer.pages.dev |
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.
Background
background-origin: border-boxto.legend-barin CSS, butlegend.tsapplies the gradient with thebackgroundshorthand. The shorthand resets every background sub-property — includingbackground-origin— to its initialpadding-boxon each render, silently defeating the stylesheet rule. The gradient is then sized to the padding box and tiles under the 1px translucent border, leaking the opposite end's colour.background-imagelonghand, so it passed while the real app stayed broken.What Has Changed
legend.ts: set the gradient viabackground-image:(longhand) instead of thebackground:shorthand, so the mergedbackground-origin: border-boxrule actually applies. One-line change plus an explanatory comment.Verification
background-originis nowborder-box, and the enlarged legend bar is clean at both ends.npm run buildpasses; all 80 unit tests pass.Screenshots/Video
Checklist
🤖 Generated with Claude Code