From 3c2b8d6385ace50599c747b7a34922c68fca518c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=95=E3=81=AA=E3=81=97=E6=B2=BC=E3=81=AE=E9=AD=94?=
 =?UTF-8?q?=E5=A5=B3?= <megablacklabel@gmail.com>
Date: Fri, 3 Jul 2026 00:20:13 +0900
Subject: [PATCH 1/2] fix(titlebar): remove touch-device button enlargement
 that broke layout on mobile

The @media (pointer: coarse) block set min-width/min-height to 24px on
title bar control buttons, overriding the base 16x14px sizing and causing
the title bar to become excessively thick on mobile devices.

Added regression test to prevent re-introduction.
---
 src/components/window/TitleBar.module.css |  7 -------
 src/components/window/TitleBar.test.tsx   | 16 ++++++++++++++++
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/window/TitleBar.module.css b/src/components/window/TitleBar.module.css
index 0be491b..6e2bbf3 100644
--- a/src/components/window/TitleBar.module.css
+++ b/src/components/window/TitleBar.module.css
@@ -26,13 +26,6 @@
   cursor: pointer !important;
 }
 
-/* Enlarge button touch targets on coarse pointers (WCAG AA: ≥24px) */
-@media (pointer: coarse) {
-  .titleBar :global(.title-bar-controls) button {
-    min-width: 24px !important;
-    min-height: 24px !important;
-  }
-}
 
 .titleBarLeft {
   display: flex;
diff --git a/src/components/window/TitleBar.test.tsx b/src/components/window/TitleBar.test.tsx
index a4ab33a..6713c0c 100644
--- a/src/components/window/TitleBar.test.tsx
+++ b/src/components/window/TitleBar.test.tsx
@@ -77,4 +77,20 @@ describe('TitleBar', () => {
     expect(img).toBeInTheDocument();
     expect(img).toHaveAttribute('src', '/icon.png');
   });
+
+  it('does not enlarge title bar buttons on touch devices (no pointer:coarse min-size override)', async () => {
+    const { default: titleBarStyles } = await import('./TitleBar.module.css?raw');
+    const rawCss =
+      typeof titleBarStyles === 'string'
+        ? titleBarStyles
+        : await import('node:fs/promises').then(({ readFile }) =>
+            readFile(join(process.cwd(), 'src/components/window/TitleBar.module.css'), 'utf8'),
+          );
+
+    // There must be NO @media (pointer: coarse) block that enlarges buttons
+    // because that would make the title bar too thick on mobile devices.
+    // Instead, base button sizing (16x14) should apply uniformly.
+    const coarseBlock = rawCss.match(/@media\s*\(\s*pointer\s*:\s*coarse\s*\)\s*\{[^}]*min-(width|height)\s*:\s*24px[^}]*\}/s);
+    expect(coarseBlock).toBeNull();
+  });
 });

From ffbcb3a648486b79f5579303074d1ad97ed8799b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BA=95=E3=81=AA=E3=81=97=E6=B2=BC=E3=81=AE=E9=AD=94?=
 =?UTF-8?q?=E5=A5=B3?= <megablacklabel@gmail.com>
Date: Fri, 3 Jul 2026 00:27:22 +0900
Subject: [PATCH 2/2] fix: simplify regression test regex per Copilot review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace brittle block-parsing regex with direct @media (pointer: coarse)
presence check — more robust against formatting variations.
---
 src/components/window/TitleBar.test.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/window/TitleBar.test.tsx b/src/components/window/TitleBar.test.tsx
index 6713c0c..fcae03b 100644
--- a/src/components/window/TitleBar.test.tsx
+++ b/src/components/window/TitleBar.test.tsx
@@ -87,10 +87,9 @@ describe('TitleBar', () => {
             readFile(join(process.cwd(), 'src/components/window/TitleBar.module.css'), 'utf8'),
           );
 
-    // There must be NO @media (pointer: coarse) block that enlarges buttons
-    // because that would make the title bar too thick on mobile devices.
-    // Instead, base button sizing (16x14) should apply uniformly.
-    const coarseBlock = rawCss.match(/@media\s*\(\s*pointer\s*:\s*coarse\s*\)\s*\{[^}]*min-(width|height)\s*:\s*24px[^}]*\}/s);
-    expect(coarseBlock).toBeNull();
+    // TitleBar must not contain any pointer:coarse media rule
+    // — it would enlarge buttons and make the title bar too thick on mobile.
+    const coarseRule = rawCss.match(/@media\s*\(\s*pointer\s*:\s*coarse\s*\)/);
+    expect(coarseRule).toBeNull();
   });
 });