From ec7717ec70258673a3621775e9bf8c14fda9c6f3 Mon Sep 17 00:00:00 2001
From: everettjf <everettjf@live.com>
Date: Mon, 1 Jun 2026 21:31:21 -0700
Subject: [PATCH] Fix double window chrome on code blocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

kramdown emits both <div class="highlight"> and <pre class="highlight">, so the
panel chrome (title bar, traffic-light dots) and the copy button were applied to
both — stacking two window frames per code block. Scope the chrome CSS to
div.highlight and attach the copy button only to the container div.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 pages/assets/css/wasmpatch.css | 12 +++++++-----
 pages/assets/js/site.js        |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/pages/assets/css/wasmpatch.css b/pages/assets/css/wasmpatch.css
index 35d4bda..d649f00 100644
--- a/pages/assets/css/wasmpatch.css
+++ b/pages/assets/css/wasmpatch.css
@@ -234,18 +234,20 @@ a:hover { color: var(--accent); }
 .doc__body tbody tr:hover { background: var(--bg-1); }
 .doc__body td code { white-space: nowrap; }
 
-/* ---- Code panels (rouge) ------------------------------------------------- */
-.doc__body .highlight, .home .highlight {
+/* ---- Code panels (rouge) -------------------------------------------------
+   kramdown emits BOTH <div class="highlight"> and <pre class="highlight">,
+   so the chrome is scoped to the container div to avoid drawing it twice. */
+.doc__body div.highlight, .home div.highlight {
   position: relative; margin: 1.4em 0; border-radius: var(--radius);
   background: var(--code-bg); border: 1px solid var(--line-strong);
   box-shadow: var(--shadow); overflow: hidden;
 }
-.doc__body .highlight::before, .home .highlight::before {
+.doc__body div.highlight::before, .home div.highlight::before {
   content: ""; display: block; height: 38px;
   background: linear-gradient(var(--bg-3), color-mix(in srgb, var(--bg-3) 60%, transparent));
   border-bottom: 1px solid var(--line);
 }
-.doc__body .highlight::after, .home .highlight::after {
+.doc__body div.highlight::after, .home div.highlight::after {
   content: ""; position: absolute; top: 15px; left: 16px;
   width: 9px; height: 9px; border-radius: 50%;
   background: var(--accent);
@@ -253,7 +255,7 @@ a:hover { color: var(--accent); }
   opacity: 0.9;
 }
 .highlight pre, .highlight code { background: none; margin: 0; }
-.highlight pre {
+div.highlight pre {
   padding: 16px 18px 18px; overflow-x: auto;
   font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.65; color: var(--code-ink);
 }
diff --git a/pages/assets/js/site.js b/pages/assets/js/site.js
index c4b1196..caf0f14 100644
--- a/pages/assets/js/site.js
+++ b/pages/assets/js/site.js
@@ -27,7 +27,7 @@
   });
 
   /* ---- Copy buttons on code blocks ---- */
-  document.querySelectorAll(".highlight").forEach(function (block) {
+  document.querySelectorAll("div.highlight").forEach(function (block) {
     var pre = block.querySelector("pre");
     if (!pre) return;
     var btn = document.createElement("button");