Monorepo for Aesthetic.Computer
aesthetic.computer
prompt: tighten notepat button width + add stacked-mode spacing
TextButtonSmall assumes 4px/char, but MatrixChunky8 is proportional
(spaces advance 2px). Measure the real rendered width and override
box.w so the plum pill hugs the text instead of overshooting to the
right. Bump the vertical gap between notepat and the commit button
from 2px to 6px when stacked so they stop crowding each other.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+14
-2
+14
-2
system/public/aesthetic.computer/disks/prompt.mjs
+14
-2
system/public/aesthetic.computer/disks/prompt.mjs
···
5934
5934
// starts at box.x + 2 + 2*spaces. Icon frame (13×9) ends at box.x + 14,
5935
5935
// so 8 spaces (x+18) leaves a 3px gap after the frame.
5936
5936
const notepatLabel = " notepat";
5937
-
const notepatWidth = notepatLabel.length * 4 + 4; // cw=4, padL+padR=4
5937
+
// TextButtonSmall sizes the box as label.length * 4, but MatrixChunky8
5938
+
// is proportional (spaces advance only 2px), so the button overshoots.
5939
+
// Measure the actual rendered width and tighten the box below.
5940
+
const notepatTextWidth = $.text.box(
5941
+
notepatLabel, undefined, undefined, undefined, undefined, "MatrixChunky8",
5942
+
).box.width;
5943
+
const notepatWidth = notepatTextWidth + 4; // padL + padR
5938
5944
const notepatHeight = 7 + 2 * 2; // ch=7, padY*2
5939
5945
const pairGap = 4;
5946
+
const stackedGap = 6; // breathing room between stacked notepat and commit
5940
5947
const enterBoxForStack = $.system.prompt.input?.enter?.btn?.box;
5941
5948
const pasteBoxForStack = $.system.prompt.input?.paste?.btn?.box;
5942
5949
// Commit is centered; pair extends rightward by pairGap + notepatWidth.
···
5946
5953
const leftLimit = pasteBoxForStack ? pasteBoxForStack.x + pasteBoxForStack.w + 4 : 4;
5947
5954
const stackVertically = pairRightEdge > rightLimit || pairLeftEdge < leftLimit;
5948
5955
const notepatPos = stackVertically
5949
-
? { center: "x", y: buttonY - notepatHeight - 2, screen }
5956
+
? { center: "x", y: buttonY - notepatHeight - stackedGap, screen }
5950
5957
: { x: cBox.x + cBox.w + pairGap, y: buttonY };
5951
5958
if (!notepatBtn) {
5952
5959
notepatBtn = new $.ui.TextButtonSmall(notepatLabel, notepatPos);
5953
5960
} else {
5954
5961
notepatBtn.reposition(notepatPos, notepatLabel);
5955
5962
notepatBtn.btn.disabled = false;
5963
+
}
5964
+
// Shrink the box to the real text width and re-center when stacked.
5965
+
notepatBtn.btn.box.w = notepatWidth;
5966
+
if (stackVertically) {
5967
+
notepatBtn.btn.box.x = Math.floor((screen.width - notepatWidth) / 2);
5956
5968
}
5957
5969
const nBox = notepatBtn.btn.box;
5958
5970
const nHover = notepatBtn.btn.over && !notepatBtn.btn.down;