fix(ui): prevent sticky hover styles on touch devices#1799
fix(ui): prevent sticky hover styles on touch devices#1799
Conversation
Wrapped hover state CSS rules in `@media (hover: hover) and (pointer: fine)` for the `Link` and `BreadCrumbs` components. This ensures that hover styling is strictly applied to precise pointing devices (like a mouse) and prevents touch interactions on mobile interfaces from triggering a persistent hover state (e.g., the breadcrumb background remaining actively styled after being tapped).
There was a problem hiding this comment.
Pull request overview
Updates hover styling so it only applies on devices that actually support hover with a fine pointer (e.g., mouse/trackpad), preventing “sticky” hover states after taps on touch devices.
Changes:
- Wrap
Linkhover color change in@media (hover: hover) and (pointer: fine). - Tighten existing
BreadCrumbshover media queries to also requirepointer: fine. - Apply the same hover gating to theme-level
Linkvariant hover tokens.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/cyberstorm/src/newComponents/Link/Link.css | Restricts .link:hover styling to hover-capable fine pointers to avoid sticky hover on touch. |
| packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css | Updates breadcrumb hover handling to require fine pointer input, reducing touch “hover lock” effects. |
| packages/cyberstorm-theme/src/components/Link/Link.css | Ensures theme variant hover token changes are only applied under fine-pointer hover conditions. |
WalkthroughThis PR updates hover styling across three CSS files to gate Possibly related PRs
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css (1)
58-62: Optional cleanup: consider a shared media-query token for hover-capable pointers.
@media (hover: hover) and (pointer: fine)is repeated across multiple components in this PR; a shared token/mixin would reduce duplication.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css` around lines 58 - 62, Extract the repeated media query into a shared token and replace the inline usage in BreadCrumbs.css; specifically define a shared custom media like --hover-pointer (e.g. `@custom-media` --hover-pointer (hover: hover) and (pointer: fine)) in your shared styles/mixins file, then update the rule in BreadCrumbs.css (the selector block using `@media` (hover: hover) and (pointer: fine) { &:hover { ... } }) to use `@media` (--hover-pointer) so other components can reuse the token and remove duplication.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.css`:
- Around line 58-62: Extract the repeated media query into a shared token and
replace the inline usage in BreadCrumbs.css; specifically define a shared custom
media like --hover-pointer (e.g. `@custom-media` --hover-pointer (hover: hover)
and (pointer: fine)) in your shared styles/mixins file, then update the rule in
BreadCrumbs.css (the selector block using `@media` (hover: hover) and (pointer:
fine) { &:hover { ... } }) to use `@media` (--hover-pointer) so other components
can reuse the token and remove duplication.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dc5927ef-2612-41d5-aa51-ca10a4cf6142
📒 Files selected for processing (3)
packages/cyberstorm-theme/src/components/Link/Link.csspackages/cyberstorm/src/newComponents/BreadCrumbs/BreadCrumbs.csspackages/cyberstorm/src/newComponents/Link/Link.css
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1799 +/- ##
=======================================
Coverage 14.57% 14.57%
=======================================
Files 338 338
Lines 27993 27993
Branches 882 882
=======================================
Hits 4080 4080
Misses 23913 23913 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Wrapped hover state CSS rules in
@media (hover: hover) and (pointer: fine)for theLinkandBreadCrumbscomponents.This ensures that hover styling is strictly applied to precise pointing devices (like a mouse) and prevents touch interactions on mobile interfaces from triggering a persistent hover state (e.g., the breadcrumb background remaining actively styled after being tapped).