From 3ba1a161bbfc3d95c48be1a9bcbf29397d5e1807 Mon Sep 17 00:00:00 2001
From: MattNotarangelo <matt.notarangelo@rokt.com>
Date: Fri, 26 Jun 2026 18:47:27 -0700
Subject: [PATCH] fix(viewer): apply legend gradient via background-image, not
 shorthand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/viewer/legend.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/viewer/legend.ts b/src/viewer/legend.ts
index 5b1c86e..09681a4 100644
--- a/src/viewer/legend.ts
+++ b/src/viewer/legend.ts
@@ -30,7 +30,9 @@ export class Legend {
     this.el.innerHTML = `
       <div class="legend-title">${escapeHtml(spec.title)}</div>
       <div class="legend-body">
-        <div class="legend-bar" style="background:${gradientCss()}"></div>
+        <!-- background-image (not the background shorthand) so the stylesheet's
+             background-origin: border-box survives; the shorthand would reset it. -->
+        <div class="legend-bar" style="background-image:${gradientCss()}"></div>
         <div class="legend-labels">
           <span>${escapeHtml(spec.hi)}</span>
           <span>${escapeHtml(spec.mid)}</span>