From 46e90a709c306026479bad9ba7ed0bf3db3c4ff4 Mon Sep 17 00:00:00 2001 From: sneak Date: Mon, 10 Aug 2026 13:54:58 +0000 Subject: [PATCH] fix(frontend): meet the 44x44 minimum tap target on every control (closes #43) Every interactive control measured below the 44x44 CSS px floor (Apple HIG, WCAG 2.2 SC 2.5.5) on touch viewports: .pin-btn at 16x16, the debug-log label at 89.3x14, #interval-select at 64x28 and, in the narrow layout, #pause-btn at 108.2x39.8. The pin button keeps its 16x16 layout footprint: the button box grows to 44x44 and matching negative margins take the growth back out of layout, so neither row height nor the icon's position changes in either layout. The select and the pause button get a min-height, the debug-log label becomes an inline-flex box 44 tall. Applied unconditionally rather than under a breakpoint, since a phone in landscape is above the 768px breakpoint and still a touch device. --- TODO.md | 4 ++++ src/main.js | 2 +- src/styles.css | 35 ++++++++++++++++++++++++++++++++++- 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/TODO.md b/TODO.md index 2545dc2..351ef48 100644 --- a/TODO.md +++ b/TODO.md @@ -22,6 +22,10 @@ files, so merging it also closes most compliance gaps. # Completed Steps +- 2026-08-10: every interactive control now meets the 44x44 CSS px minimum tap + target (`.pin-btn`, `#interval-select`, the debug-log label and, on narrow + viewports, `#pause-btn`). The pin button's hit area grows via matching + negative margins, so its layout footprint and row density are unchanged - 2026-08-09: dotfile compliance — lifted `backend/.editorconfig` to the repo root so `root = true` covers the frontend too, and replaced `.gitignore` with the org model (OS, editor, node, and environment/secrets sections) plus this diff --git a/src/main.js b/src/main.js index 3ab6bb8..3555c2a 100644 --- a/src/main.js +++ b/src/main.js @@ -671,7 +671,7 @@ function buildUI(state) {

${__COMMIT_HASH__}

-