From 77820efd7b9baff595f35bcbb26ff1daa9af24e3 Mon Sep 17 00:00:00 2001 From: Jeffrey Alan Scudder Date: Thu, 26 Mar 2026 11:46:59 -0700 Subject: [PATCH] =?UTF-8?q?fix:=20blank.mjs=20=E2=80=94=20measure=20wrappe?= =?UTF-8?q?d=20description=20text=20to=20position=20BUY=20button=20below?= =?UTF-8?q?=20it?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use text.box() to get actual wrapped height instead of hardcoded y=90, so the button never overlaps the prose on narrow screens. Co-Authored-By: Claude Opus 4.6 (1M context) --- system/public/aesthetic.computer/disks/blank.mjs | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/system/public/aesthetic.computer/disks/blank.mjs b/system/public/aesthetic.computer/disks/blank.mjs index a83c277131..78835dfc75 100644 --- a/system/public/aesthetic.computer/disks/blank.mjs +++ b/system/public/aesthetic.computer/disks/blank.mjs @@ -179,7 +179,7 @@ async function fetchCheckout(api) { } function paint($) { - const { wipe, ink, line, screen, dark: isDark, tri } = $; + const { wipe, ink, line, screen, dark: isDark, tri, text } = $; frame += 1; const w = screen.width; const h = screen.height; @@ -725,8 +725,14 @@ function paint($) { // Title + product description (painted on top of laptop wireframe) ink(sr, sg, sb, shadowAlpha).write("AC Blank Laptop", { center: "x", y: 30 + shadowOff, size: 2, screen }); ink(fg).write("AC Blank Laptop", { center: "x", y: 30, size: 2, screen }); - ink(sr, sg, sb, shadowAlpha).write(DESCRIPTION_PLAIN, { center: "x", y: 54 + shadowOff, screen }, undefined, floor(w * 0.85)); - ink(fgDim).write(DESCRIPTION, { center: "x", y: 54, screen }, undefined, floor(w * 0.85)); + // Measure wrapped description to position buy button below it + const descBounds = floor(w * 0.85); + const descY = 54; + const descBox = text.box(DESCRIPTION_PLAIN, { center: "x", y: descY, screen }, descBounds); + const descBottom = descY + (descBox ? descBox.box.height : charH); + + ink(sr, sg, sb, shadowAlpha).write(DESCRIPTION_PLAIN, { center: "x", y: descY + shadowOff, screen }, undefined, descBounds); + ink(fgDim).write(DESCRIPTION, { center: "x", y: descY, screen }, undefined, descBounds); // Buy button — custom rendered in Unifont for larger, more active CTA const $btn = { ink }; @@ -737,7 +743,7 @@ function paint($) { const boxW = buyText.length * unifontCharW + padX * 2; const boxH = unifontH + padY * 2; const boxX = floor((screen.width - boxW) / 2); - const boxY = 90; // directly under the prose + const boxY = descBottom + 6; // directly under the prose buyBtn.btn.box.x = boxX; buyBtn.btn.box.y = boxY; buyBtn.btn.box.w = boxW; -- 2.51.2