Monorepo for Aesthetic.Computer
aesthetic.computer
prompt: stack notepat above version button on narrow screens
Detect collision with the TextInput's Enter (or Paste) button and
reposition notepat above the centered commit button instead of to its
right, so mobile layouts don't overlap the bottom controls.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
+19
-4
+19
-4
system/public/aesthetic.computer/disks/prompt.mjs
+19
-4
system/public/aesthetic.computer/disks/prompt.mjs
···
5926
5926
];
5927
5927
commitBtn.paint($, colors);
5928
5928
5929
-
// 🎹 Notepat shortcut button — sits to the right of the commit button.
5929
+
// 🎹 Notepat shortcut button — sits to the right of the commit button,
5930
+
// but stacks above it on narrow screens (phones) when the pair would
5931
+
// collide with the TextInput's Enter button.
5930
5932
// Leading spaces reserve room for the piano icon we draw afterward.
5931
5933
// MatrixChunky8 space advance = 2px (proportional), padL = 2px ⇒ text
5932
5934
// starts at box.x + 2 + 2*spaces. Icon frame (13×9) ends at box.x + 14,
5933
5935
// so 8 spaces (x+18) leaves a 3px gap after the frame.
5934
5936
const notepatLabel = " notepat";
5935
-
const notepatX = cBox.x + cBox.w + 4;
5937
+
const notepatWidth = notepatLabel.length * 4 + 4; // cw=4, padL+padR=4
5938
+
const notepatHeight = 7 + 2 * 2; // ch=7, padY*2
5939
+
const pairGap = 4;
5940
+
const enterBoxForStack = $.system.prompt.input?.enter?.btn?.box;
5941
+
const pasteBoxForStack = $.system.prompt.input?.paste?.btn?.box;
5942
+
// Commit is centered; pair extends rightward by pairGap + notepatWidth.
5943
+
const pairRightEdge = (screen.width + cBox.w) / 2 + pairGap + notepatWidth;
5944
+
const pairLeftEdge = (screen.width - cBox.w) / 2;
5945
+
const rightLimit = enterBoxForStack ? enterBoxForStack.x - 4 : screen.width - 4;
5946
+
const leftLimit = pasteBoxForStack ? pasteBoxForStack.x + pasteBoxForStack.w + 4 : 4;
5947
+
const stackVertically = pairRightEdge > rightLimit || pairLeftEdge < leftLimit;
5948
+
const notepatPos = stackVertically
5949
+
? { center: "x", y: buttonY - notepatHeight - 2, screen }
5950
+
: { x: cBox.x + cBox.w + pairGap, y: buttonY };
5936
5951
if (!notepatBtn) {
5937
-
notepatBtn = new $.ui.TextButtonSmall(notepatLabel, { x: notepatX, y: buttonY });
5952
+
notepatBtn = new $.ui.TextButtonSmall(notepatLabel, notepatPos);
5938
5953
} else {
5939
-
notepatBtn.reposition({ x: notepatX, y: buttonY }, notepatLabel);
5954
+
notepatBtn.reposition(notepatPos, notepatLabel);
5940
5955
notepatBtn.btn.disabled = false;
5941
5956
}
5942
5957
const nBox = notepatBtn.btn.box;