fix(demo): overlay compare-cell label and correct baseline explanation

cursoragent · cursoragent · commit b645fc39a78b · 2026-05-27T22:18:22.000Z
- .compare-image-cell::before used position: sticky inside a flex row,
  making the label a flex item that consumed horizontal space beside
  the img and produced slightly different widths for left vs right
  labels. Switch to position: absolute (cell is already
  position: relative) so the label overlays the image without
  affecting layout.

- The 'Both panels show the unmodified source' message only checked
  right.kind === 'baseline', which was incorrect when the user
  swapped the left picker to a tile while right was baseline. Guard
  it on both sides being baseline; add a right-only baseline case.
diff --git a/src/demo-page.ts b/src/demo-page.ts
@@ -274,12 +274,12 @@ export const DEMO_PAGE_HTML = `<!DOCTYPE html>
   }
   .compare-image-cell::before {
     content: attr(data-side);
-    position: sticky; top: 6px; left: 6px;
+    position: absolute; top: 6px; left: 6px;
     background: rgba(0,0,0,0.65); color: var(--text);
     font-size: 10px; font-family: var(--mono);
     padding: 2px 6px; border-radius: 3px;
     text-transform: uppercase; letter-spacing: 0.08em;
-    z-index: 2; align-self: flex-start;
+    z-index: 2;
   }
   .compare-image-cell img {
     display: block; width: 100%; height: auto;
@@ -851,8 +851,10 @@ function renderCompare() {
 
   // Explanation pulled from the right-hand entry's binding (the "strategy")
   let explain = '';
-  if (right.kind === 'baseline') {
+  if (left.kind === 'baseline' && right.kind === 'baseline') {
     explain = 'Both panels show the unmodified source. Pan and zoom to inspect the original.';
+  } else if (right.kind === 'baseline') {
+    explain = 'Right panel shows the unmodified source. Compare against the left panel'+'\u2019'+'s encode.';
   } else if (right.binding === 'target') {
     explain =
       'Right panel: proxy encoded at <code>' + right.encodeW + '×' + right.encodeH + '</code> ' +
