From 9398cd1da4d43e60a9323132fa1a3e547dc09402 Mon Sep 17 00:00:00 2001
From: Cristian Magherusan-Stanciu <cristi.magherusan@gmail.com>
Date: Thu, 23 Jul 2026 01:15:20 +0200
Subject: [PATCH 1/2] test(frontend/mobile): regression coverage for #989 44x44
 touch minimums on .btn-small / .toggle-password / .modal-confirm-close (refs
 #983)

Issue #983 asked for min-height:44px on these three selectors. Verified
they already inherit the 44x44 minimum on touch devices from the
generic `button` rule PR #989 added under @media (pointer: coarse),
since all three render as plain <button> elements and no rule
overrides min-height/min-width on them. Add a regression test so a
future edit can't silently reintroduce a sub-44px override.
---
 frontend/src/__tests__/css.test.ts | 43 ++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/frontend/src/__tests__/css.test.ts b/frontend/src/__tests__/css.test.ts
index fc84802ba..2a30d4285 100644
--- a/frontend/src/__tests__/css.test.ts
+++ b/frontend/src/__tests__/css.test.ts
@@ -418,6 +418,49 @@ describe('CSS File Organization', () => {
   });
 });
 
+describe('Touch Target Minimums (issue #983 / PR #989)', () => {
+  let css: string;
+
+  beforeAll(() => {
+    const stylesDir = path.join(__dirname, '..', 'styles');
+    const cssFiles = fs.readdirSync(stylesDir)
+      .filter(file => file.endsWith('.css'))
+      .map(file => fs.readFileSync(path.join(stylesDir, file), 'utf8'));
+    css = cssFiles.join('\n');
+  });
+
+  test('coarse-pointer media query sets a 44x44 minimum on generic button selectors', () => {
+    // PR #989 added this rule so touch devices get HIG/WCAG-compliant tap
+    // targets. .btn-small, .toggle-password and .modal-confirm-close all
+    // render as plain <button> elements (recommendations.ts, auth.ts,
+    // confirmDialog.ts), so they inherit the minimum from `button` here
+    // rather than needing a class-specific rule (verified: no rule for
+    // any of the three sets its own min-height/min-width, see below).
+    const media = css.match(/@media\s*\(pointer:\s*coarse\)\s*\{([\s\S]*?)\n\}/);
+    expect(media).not.toBeNull();
+    const block = media?.[1] ?? '';
+    expect(block).toMatch(/\bbutton\b/);
+    expect(block).toMatch(/\[role="button"\]/);
+    expect(block).toMatch(/min-height:\s*44px/);
+    expect(block).toMatch(/min-width:\s*44px/);
+  });
+
+  test.each(['.btn-small', '.toggle-password', '.modal-confirm-close'])(
+    '%s does not declare its own min-height/height (would override the coarse-pointer 44px minimum by specificity)',
+    (selector) => {
+      const escaped = selector.replace('.', '\\.');
+      const rule = css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`));
+      expect(rule).not.toBeNull();
+      const declarations = rule?.[1] ?? '';
+      const sizingProps = declarations
+        .split(';')
+        .map(decl => decl.split(':')[0]?.trim())
+        .filter(prop => /^(min-|max-)?(height|width)$/.test(prop ?? ''));
+      expect(sizingProps).toEqual([]);
+    }
+  );
+});
+
 describe('CSS Applied Correctly', () => {
   beforeEach(() => {
     document.body.innerHTML = `

From 95b9bc15067e625a10f6c0185ef1ae6956d41a76 Mon Sep 17 00:00:00 2001
From: Cristian Magherusan-Stanciu <cristi.magherusan@gmail.com>
Date: Thu, 23 Jul 2026 16:11:21 +0200
Subject: [PATCH 2/2] fix(frontend/mobile): drop cross-PR collision from
 touch-target test (#983)

The test.each list asserting .btn-small / .toggle-password /
.modal-confirm-close declare no sizing props collides with PR #985
(bottom-sheet modal), which gives .modal-confirm-close its own explicit
min-width/min-height: 44px (needed since it is absolutely positioned,
not sized by content). With both merged, this test goes red.

Drop .modal-confirm-close from the list: its explicit 44x44 is a
stronger, more direct guarantee than inheriting from the generic
coarse-pointer rule, not a regression. .btn-small and .toggle-password
still verify against the shared rule as before.
---
 frontend/src/__tests__/css.test.ts | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/__tests__/css.test.ts b/frontend/src/__tests__/css.test.ts
index 2a30d4285..01a8829c4 100644
--- a/frontend/src/__tests__/css.test.ts
+++ b/frontend/src/__tests__/css.test.ts
@@ -431,11 +431,15 @@ describe('Touch Target Minimums (issue #983 / PR #989)', () => {
 
   test('coarse-pointer media query sets a 44x44 minimum on generic button selectors', () => {
     // PR #989 added this rule so touch devices get HIG/WCAG-compliant tap
-    // targets. .btn-small, .toggle-password and .modal-confirm-close all
-    // render as plain <button> elements (recommendations.ts, auth.ts,
-    // confirmDialog.ts), so they inherit the minimum from `button` here
-    // rather than needing a class-specific rule (verified: no rule for
-    // any of the three sets its own min-height/min-width, see below).
+    // targets. .btn-small and .toggle-password render as plain <button>
+    // elements (recommendations.ts, auth.ts), so they inherit the minimum
+    // from `button` here rather than needing a class-specific rule
+    // (verified: neither declares its own min-height/min-width, see below).
+    // .modal-confirm-close is deliberately excluded from that guarantee:
+    // PR #985 (bottom-sheet modal, issue #985) gives it an explicit
+    // min-width/min-height: 44px of its own (needed because it is
+    // absolutely positioned, not sized by content), which is a stronger
+    // guarantee than the generic coarse-pointer rule, not a regression.
     const media = css.match(/@media\s*\(pointer:\s*coarse\)\s*\{([\s\S]*?)\n\}/);
     expect(media).not.toBeNull();
     const block = media?.[1] ?? '';
@@ -445,7 +449,7 @@ describe('Touch Target Minimums (issue #983 / PR #989)', () => {
     expect(block).toMatch(/min-width:\s*44px/);
   });
 
-  test.each(['.btn-small', '.toggle-password', '.modal-confirm-close'])(
+  test.each(['.btn-small', '.toggle-password'])(
     '%s does not declare its own min-height/height (would override the coarse-pointer 44px minimum by specificity)',
     (selector) => {
       const escaped = selector.replace('.', '\\.');