Fix copy button: use wrapper div, fix 8GB RAM

Author: OpenClaw Sync

_posts/2026-03-11-nixclaw-declarative-ai-agents-on-nixos.md

@@ -59,7 +59,7 @@ curl -s https://mattermost.fitzsky.com/api/v4/teams \
 
 ## The VM
 
-In Proxmox, create a VM with UEFI (OVMF), q35 machine type, VirtIO SCSI, and QEMU agent enabled. I gave mine 256GB disk, 10 CPU threads, and 4GB RAM. That's probably overkill for what amounts to a gateway process, but I had the headroom.
+In Proxmox, create a VM with UEFI (OVMF), q35 machine type, VirtIO SCSI, and QEMU agent enabled. I gave mine 256GB disk, 10 CPU threads, and 8GB RAM. That's probably overkill for what amounts to a gateway process, but I had the headroom.
 
 Boot the NixOS 25.11 minimal ISO. At the boot menu, pick "Linux LTS" — that's a kernel option in the boot menu, not a separate ISO.
 

assets/css/main.css

@@ -405,7 +405,16 @@ main {
 .highlight .gd   { color: #e06c75; }                       /* diff deleted */
 .highlight .gi   { color: #98c379; }                       /* diff inserted */
 
-/* Copy button */
+/* Code block wrapper + copy button */
+.code-wrapper {
+  position: relative;
+  margin: 1.25rem 0;
+}
+
+.code-wrapper pre {
+  margin: 0;
+}
+
 .copy-btn {
   position: absolute;
   top: 0.6rem;
@@ -425,8 +434,7 @@ main {
   z-index: 2;
 }
 
-.highlight:hover .copy-btn,
-pre:hover .copy-btn {
+.code-wrapper:hover .copy-btn {
   opacity: 1;
 }
 
@@ -476,10 +484,9 @@ pre:hover .copy-btn {
 
 /* Highlight wrapper from Rouge */
 .post-content div.highlight {
-  position: relative;
   margin: 1.25rem 0;
   border-radius: var(--radius);
-  overflow: visible;
+  overflow: hidden;
 }
 
 .post-content div.highlight pre {

assets/js/main.js

@@ -1,21 +1,20 @@
 // Code block copy button
 document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.post-content .highlight, .post-content > pre').forEach(el => {
-    // Avoid duplicates: if this pre is inside a .highlight we already processed, skip
-    if (el.tagName === 'PRE' && el.closest('.highlight')) return;
-
-    const container = el;
-    container.style.position = 'relative';
-    container.style.overflow = 'visible';
+  document.querySelectorAll('.post-content pre.highlight, .post-content > pre').forEach(pre => {
+    // Create a wrapper div for positioning
+    const wrapper = document.createElement('div');
+    wrapper.className = 'code-wrapper';
+    pre.parentNode.insertBefore(wrapper, pre);
+    wrapper.appendChild(pre);
 
     const btn = document.createElement('button');
     btn.className = 'copy-btn';
     btn.textContent = 'Copy';
     btn.setAttribute('aria-label', 'Copy code to clipboard');
 
     btn.addEventListener('click', async () => {
-      const code = container.querySelector('code');
-      const text = code ? code.textContent : container.textContent;
+      const code = pre.querySelector('code');
+      const text = code ? code.textContent : pre.textContent;
 
       try {
         await navigator.clipboard.writeText(text.trim());
@@ -31,7 +30,7 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
 
-    container.appendChild(btn);
+    wrapper.appendChild(btn);
   });
 
   // Back to top button
@@ -42,16 +41,13 @@ document.addEventListener('DOMContentLoaded', () => {
   topBtn.textContent = '↑';
   document.body.appendChild(topBtn);
 
-  const toggleTopBtn = () => {
+  window.addEventListener('scroll', () => {
     if (window.scrollY > 400) {
       topBtn.classList.add('visible');
     } else {
       topBtn.classList.remove('visible');
     }
-  };
-
-  window.addEventListener('scroll', toggleTopBtn, { passive: true });
-  toggleTopBtn();
+  }, { passive: true });
 
   topBtn.addEventListener('click', (e) => {
     e.preventDefault();