Skip to content

fix(titlebar): remove touch-device button enlargement that broke layout on mobile - #19

Merged
MegaBlackLabel merged 2 commits into
mainfrom
fix/titlebar-mobile-layout
Jul 2, 2026
Merged

fix(titlebar): remove touch-device button enlargement that broke layout on mobile#19
MegaBlackLabel merged 2 commits into
mainfrom
fix/titlebar-mobile-layout

Conversation

@MegaBlackLabel

Copy link
Copy Markdown
Owner

Summary

Fix for mobile title bar layout breakage caused by @media (pointer: coarse) block that enlarged control buttons on touch devices.

What changed

  • TitleBar.module.css: Removed @media (pointer: coarse) block that set min-width/min-height: 24px on title bar control buttons, overriding the base 16×14px sizing and making the title bar excessively thick on mobile devices
  • TitleBar.test.tsx: Added regression test to prevent re-introduction of touch-device button enlargement

What stays the same

  • Base button sizing (16×14px) applies uniformly across all devices
  • Resize handle hit areas in Window.module.css (@media (pointer: coarse)) remain unchanged — those don't affect visual layout

Test results

  • 12/12 tests passing
  • Build (build:lib) successful

Files changed

2 files, +16 / -7 lines

…ut 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.
Copilot AI review requested due to automatic review settings July 2, 2026 15:23

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a mobile layout regression in the TitleBar component by removing a touch-pointer-specific CSS override that enlarged title bar control buttons, while adding a regression test to prevent reintroduction of that override.

Changes:

  • Removed the @media (pointer: coarse) rule that forced 24px minimum control-button sizing in TitleBar.module.css.
  • Added a regression test to ensure TitleBar.module.css does not include the coarse-pointer min-size override.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
src/components/window/TitleBar.module.css Removes the coarse-pointer button min-size override that made the title bar too tall on mobile.
src/components/window/TitleBar.test.tsx Adds a regression test that inspects raw CSS to prevent reintroducing the coarse-pointer enlargement rule.

Comment thread src/components/window/TitleBar.test.tsx Outdated
Replace brittle block-parsing regex with direct @media (pointer: coarse)
presence check — more robust against formatting variations.
@MegaBlackLabel

Copy link
Copy Markdown
Owner Author

@copilot 修正しました。再レビューお願いします。正規表現をシンプルにして、 の存在チェックだけにしました。

Copilot AI commented Jul 2, 2026

Copy link
Copy Markdown

@copilot 修正しました。再レビューお願いします。正規表現をシンプルにして、 の存在チェックだけにしました。

確認しました。@media (pointer: coarse) の存在有無だけを見る今の形なら、前の正規表現より堅牢で問題ありません。こちらからの追加修正はありません。

@MegaBlackLabel
MegaBlackLabel merged commit 7c12cf5 into main Jul 2, 2026
1 check passed
@MegaBlackLabel
MegaBlackLabel deleted the fix/titlebar-mobile-layout branch July 2, 2026 15:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants