Monorepo for Aesthetic.Computer aesthetic.computer
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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;