fix: code block copy icon, light theme bg, horizontal scroll

- Use .icon-copy/.icon-check classes on <i> tags so Feather preserves them on generated <svg>; fixes copy button not swapping to checkmark
- Add .chroma to light theme background override so #eff1f5 applies correctly
- Change .chroma overflow: hidden to overflow-x: auto to restore horizontal scrolling for long code lines

Co-Authored-By: Claude Haiku 4.5 <redacted>

diff --git a/themes/danix-xyz-hacker/assets/css/chroma-custom.css b/themes/danix-xyz-hacker/assets/css/chroma-custom.css
index 11f4a4acff1ac4b7c8d79cfba54f75c8537cfce8..ef43ce29613ac5aa7a13a862cc9fe5772d7d714c 100644 (file)
--- a/themes/danix-xyz-hacker/assets/css/chroma-custom.css
+++ b/themes/danix-xyz-hacker/assets/css/chroma-custom.css
@@ -98,7 +98,8 @@
   overflow-x: auto;
 }
 
-.code-body .highlight {
+.code-body .highlight,
+.code-body .highlight .chroma {
   margin: 0;
   border-radius: 0;
   border: none;
@@ -148,10 +149,18 @@
   background-color: var(--ctp-surface0);
 }
 
+.highlight .lntd:first-child pre {
+  padding: 0.875rem 0;
+}
+
 .highlight .lntd:last-child pre {
   padding: 0.875rem 1rem;
 }
 
+.highlight .chroma {
+  overflow-x: auto;
+}
+
 /* === Syntax token colors (dark theme default) === */
 
 .highlight {
@@ -332,7 +341,8 @@ html.theme-light .code-copy-btn:hover {
   background: rgba(76, 79, 105, 0.08);
 }
 
-html.theme-light .code-body .highlight {
+html.theme-light .code-body .highlight,
+html.theme-light .code-body .highlight .chroma {
   background-color: #eff1f5;
   color: #4c4f69;
 }

diff --git a/themes/danix-xyz-hacker/assets/js/code-copy.js b/themes/danix-xyz-hacker/assets/js/code-copy.js
index bfcfd4af5700c0d11917cd35ca53450e75bd3cbb..8591436bf32d798362fe37589b50d43efff0fdd3 100644 (file)
--- a/themes/danix-xyz-hacker/assets/js/code-copy.js
+++ b/themes/danix-xyz-hacker/assets/js/code-copy.js
@@ -53,16 +53,16 @@
       if (!text) return;
 
       navigator.clipboard.writeText(text).then(function () {
-        var copyIcon   = btn.querySelector('[data-feather="copy"]');
-        var checkIcon  = btn.querySelector('[data-feather="check"]');
+        var copyIcon   = btn.querySelector('.icon-copy');
+        var checkIcon  = btn.querySelector('.icon-check');
         var liveRegion = wrapper.querySelector('.code-copy-status');
-        if (copyIcon)   copyIcon.style.display = 'none';
+        if (copyIcon)   copyIcon.classList.add('hidden');
         if (checkIcon)  checkIcon.classList.remove('hidden');
         btn.classList.add('is-copied');
         if (liveRegion) liveRegion.textContent = 'Code copied to clipboard.';
 
         setTimeout(function () {
-          if (copyIcon)   copyIcon.style.display = '';
+          if (copyIcon)   copyIcon.classList.remove('hidden');
           if (checkIcon)  checkIcon.classList.add('hidden');
           btn.classList.remove('is-copied');
           if (liveRegion) liveRegion.textContent = '';

diff --git a/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html b/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html
index 813c389833d4d165fc68a67b8100bb03846acef9..2b48840196400e0170921301697ebd13634026cc 100644 (file)
--- a/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html
+++ b/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html
@@ -11,8 +11,8 @@
     <div class="code-copy-wrapper">
       <span role="status" aria-live="polite" class="sr-only code-copy-status"></span>
       <button class="code-copy-btn" aria-label="Copy code" data-copy-target>
-        <i data-feather="copy" aria-hidden="true"></i>
-        <i data-feather="check" aria-hidden="true" class="hidden"></i>
+        <i data-feather="copy" class="icon-copy" aria-hidden="true"></i>
+        <i data-feather="check" class="icon-check hidden" aria-hidden="true"></i>
       </button>
     </div>
   </div>