Skip to content

Commit c7ae457

Browse files
Remove sticky hover states on touch devices in sketch toolbar
Wrap all :hover rules in @media (hover: hover) so touch taps don't leave buttons in a stuck highlighted state on mobile. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 094ee71 commit c7ae457

1 file changed

Lines changed: 3 additions & 3 deletions

File tree

client/src/components/SketchToolbar.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const RoundBtn = styled.button.attrs(() => ({ type: 'button' }))`
3030
pointer-events: ${p => p.$disabled ? 'none' : 'auto'};
3131
flex-shrink: 0;
3232
box-shadow: ${p => p.$outlined ? 'inset 0 0 0 2px var(--text-color)' : 'none'};
33-
&:hover { background: var(--button-bg); }
33+
@media (hover: hover) { &:hover { background: var(--button-bg); } }
3434
`;
3535

3636
// ── pill ──────────────────────────────────────────────────────────────────────
@@ -110,7 +110,7 @@ const ColorSwatch = styled.button.attrs(() => ({ type: 'button' }))`
110110
flex-shrink: 0;
111111
outline: none;
112112
box-shadow: ${p => p.$active ? '0 0 0 1px var(--note-bg-color, #fff) inset' : 'none'};
113-
&:hover { transform: scale(1.1); }
113+
@media (hover: hover) { &:hover { transform: scale(1.1); } }
114114
`;
115115

116116
// ── combined indicator+caret button (pill-shaped, for size and color) ──────────
@@ -129,7 +129,7 @@ const LongBtn = styled.button.attrs(() => ({ type: 'button' }))`
129129
flex-shrink: 0;
130130
opacity: ${p => p.$disabled ? 0.25 : 1};
131131
pointer-events: ${p => p.$disabled ? 'none' : 'auto'};
132-
&:hover { background: ${p => p.$disabled ? 'transparent' : 'var(--button-bg)'}; }
132+
@media (hover: hover) { &:hover { background: ${p => p.$disabled ? 'transparent' : 'var(--button-bg)'}; } }
133133
`;
134134

135135
// small non-interactive circle showing current color

0 commit comments

Comments
 (0)