Skip to content

fix: enlarge close button hit area to fix unreliable click #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
quiet-node merged 1 commit into from
Apr 12, 2026
+22 −18
Merged

fix: enlarge close button hit area to fix unreliable click #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 20 additions & 16 deletions src/components/WindowControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,27 +132,31 @@ export const WindowControls = memo(function WindowControls({
return (
<div className="shrink-0">
<div className="group flex items-center px-4 py-2.5">
{/* Close button — reveals × icon on group hover */}
{/* Close button — reveals × icon on group hover.
Padding enlarges the hit area to ~24×24px without changing the
12×12px visual dot; negative margin preserves flex spacing. */}
<button
type="button"
onClick={onClose}
className="w-3 h-3 rounded-full bg-[#FF5F57] flex items-center justify-center transition-transform duration-150 hover:scale-125 active:scale-90"
className="group/close-btn p-1.5 -m-1.5 flex items-center justify-center rounded-full cursor-pointer"
aria-label="Close window"
>
<svg
width="6"
height="6"
viewBox="0 0 6 6"
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
aria-hidden="true"
>
<path
d="M0.5 0.5L5.5 5.5M5.5 0.5L0.5 5.5"
stroke="rgba(0,0,0,0.6)"
strokeWidth="1.2"
strokeLinecap="round"
/>
</svg>
<div className="w-3 h-3 rounded-full bg-[#FF5F57] flex items-center justify-center transition-transform duration-150 group-hover/close-btn:scale-125 group-active/close-btn:scale-90">
<svg
width="6"
height="6"
viewBox="0 0 6 6"
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
aria-hidden="true"
>
<path
d="M0.5 0.5L5.5 5.5M5.5 0.5L0.5 5.5"
stroke="rgba(0,0,0,0.6)"
strokeWidth="1.2"
strokeLinecap="round"
/>
</svg>
</div>
</button>

{/* Minimize — decorative only */}
Expand Down
4 changes: 2 additions & 2 deletions src/components/__tests__/WindowControls.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ describe('WindowControls', () => {

it('close button has correct styling (bg-[#FF5F57])', () => {
const { container } = render(<WindowControls onClose={vi.fn()} />);
const closeBtn = container.querySelector('.bg-\\[\\#FF5F57\\]');
expect(closeBtn).not.toBeNull();
const closeDot = container.querySelector('.bg-\\[\\#FF5F57\\]');
expect(closeDot).not.toBeNull();
});

it('renders decorative minimize and zoom dots (aria-hidden elements)', () => {
Expand Down