From 4e866db4984e77a9c81b8732d95ea6a30b7f90f5 Mon Sep 17 00:00:00 2001
From: Jeffrey Alan Scudder <me@jas.life>
Date: Sun, 22 Mar 2026 21:06:13 -0700
Subject: [PATCH] fix: use TextButtonSmall for KidLisp.com editor button
 padding

Switch from TextButton to TextButtonSmall so box sizing uses correct
MatrixChunky8 metrics (4px char width, 2px padding) instead of manual
overrides every frame.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../aesthetic.computer/disks/prompt.mjs       | 37 ++++++++-----------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/system/public/aesthetic.computer/disks/prompt.mjs b/system/public/aesthetic.computer/disks/prompt.mjs
index 5c3d1738e7..df3644915e 100644
--- a/system/public/aesthetic.computer/disks/prompt.mjs
+++ b/system/public/aesthetic.computer/disks/prompt.mjs
@@ -5268,47 +5268,47 @@ function paint($) {
 
     // 🟢 KidLisp.com button centered at bottom (between paste and enter buttons)
     const kidlispBtnText = "Edit on KidLisp.com";
-    
+
     // Get paste and enter button positions to center between them
     const pasteBox = $.system.prompt.input?.paste?.btn?.box;
     const enterBox = $.system.prompt.input?.enter?.btn?.box;
-    
+
     // Calculate center position between paste (left) and enter (right) buttons
     let kidlispBtnX, kidlispBtnY;
+    // TextButtonSmall: 4px per char + 2px left + 2px right padding
+    const btnWidth = kidlispBtnText.length * 4 + 4;
     if (pasteBox && enterBox) {
       // Position horizontally centered between paste's right edge and enter's left edge
       const gapStart = pasteBox.x + pasteBox.w;
       const gapEnd = enterBox.x;
       const gapCenter = gapStart + (gapEnd - gapStart) / 2;
-      const btnWidth = kidlispBtnText.length * 4 + 4; // MatrixChunky8: 4px per char + 4px padding
       kidlispBtnX = Math.floor(gapCenter - btnWidth / 2);
       kidlispBtnY = pasteBox.y; // Same Y position as the bottom buttons
     } else {
       // Fallback to bottom center if buttons not available
-      const btnWidth = kidlispBtnText.length * 4 + 4;
       kidlispBtnX = Math.floor(screen.width / 2 - btnWidth / 2);
       kidlispBtnY = screen.height - 18;
     }
-    
+
     if (!kidlispBtn) {
-      kidlispBtn = new $.ui.TextButton(kidlispBtnText, { x: kidlispBtnX, y: kidlispBtnY });
+      kidlispBtn = new $.ui.TextButtonSmall(kidlispBtnText, { x: kidlispBtnX, y: kidlispBtnY });
       kidlispBtn.stickyScrubbing = true;
     } else {
       kidlispBtn.reposition({ x: kidlispBtnX, y: kidlispBtnY }, kidlispBtnText);
       kidlispBtn.btn.disabled = false;
     }
-    
+
     // Paint the button with rainbow cycling colors (like GIVE button) + blinking
     const kidlispBtnBox = kidlispBtn.btn.box;
     const isKidlispBtnDown = kidlispBtn.btn.down;
     const isKidlispBtnOver = kidlispBtn.btn.over;
-    
+
     // 🌈 Rainbow cycling colors for attention-seeking effect
     const klT = performance.now() / 1000;
     const klHue = (klT * 60) % 360; // Cycle through hues
     const klPulse = Math.sin(klT * 4) * 0.5 + 0.5; // Pulsing effect (0-1)
     const klBlink = Math.floor(klT * 3) % 2; // Blink on/off 3 times per second
-    
+
     // Convert HSL to RGB
     const klHslToRgb = (h, s, l) => {
       h /= 360; s /= 100; l /= 100;
@@ -5331,19 +5331,12 @@ function paint($) {
       }
       return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
     };
-    
+
     // Bright saturated fill that cycles through rainbow
     const klFillColor = klHslToRgb(klHue, 90, 40 + klPulse * 15);
     const klTextColor = klHslToRgb((klHue + 180) % 360, 100, 85); // Complementary color for text
     const klOutlineColor = klHslToRgb((klHue + 120) % 360, 100, 60); // Triadic color for outline
-    
-    // Manually size the button box to fit the text tightly (reduce right padding)
-    const textWidth = kidlispBtnText.length * 4; // MatrixChunky8: 4px per char
-    const btnPadX = 2; // Tighter horizontal padding
-    const btnPadY = 2; // Tighter vertical padding  
-    kidlispBtnBox.w = textWidth + btnPadX * 2;
-    kidlispBtnBox.h = 7 + btnPadY * 2; // MatrixChunky8 height is 7px
-    
+
     // Background - rainbow cycling with blink effect
     if (klBlink || isKidlispBtnOver || isKidlispBtnDown) {
       const bgColor = isKidlispBtnDown ? [klFillColor[0] + 40, klFillColor[1] + 40, klFillColor[2] + 40] : klFillColor;
@@ -5351,12 +5344,12 @@ function paint($) {
     } else {
       ink(20, 20, 30).box(kidlispBtnBox); // Dark background during "off" blink
     }
-    
+
     // Animated outline
     ink(...klOutlineColor).box(kidlispBtnBox, "outline");
-    
-    // Text with complementary color (tighter positioning)
-    ink(...klTextColor).write(kidlispBtnText, { x: kidlispBtnBox.x + btnPadX, y: kidlispBtnBox.y + btnPadY }, undefined, undefined, false, "MatrixChunky8");
+
+    // Text with complementary color
+    ink(...klTextColor).write(kidlispBtnText, { x: kidlispBtnBox.x + 2, y: kidlispBtnBox.y + 2 }, undefined, undefined, false, "MatrixChunky8");
 
     // Keep animating
     $.needsPaint();
-- 
2.51.2