fix: reveal hover-gated controls on touch devices - #471
Open
pat-s wants to merge 2 commits into
Open
Conversation
These controls are `opacity-0 group-hover:opacity-100`. Touch has no hover state, so they stay invisible while remaining hit-testable: invisible targets rather than absent ones, and the actions behind them cannot be performed at all. Use the `[@media(hover:hover)]` guard already established by `DataTable.vue`, so reveal-on-hover applies only where hover exists. - Download an attachment, and its name and size. - Edit or delete a custom attribute. - Select a conversation, which gates every bulk action. On touch the overlay is always live so tapping the avatar selects, while the checkbox stays transparent until selection is under way, keeping the avatar readable until then.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughConversation controls now remain visible on touch devices. Hover-only visibility and opacity behavior applies only to devices that support hover. Desktop hover behavior remains unchanged. ChangesTouch device conversation controls
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/apps/main/src/features/conversation/list/ConversationListItem.vue`:
- Around line 31-46: Update the Checkbox opacity classes in ConversationListItem
so keyboard-focused checkboxes become visible by adding the focus-visible
opacity behavior alongside the existing hover and selection states, while
preserving the current non-focused appearance.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: d6f28f04-0caf-4296-804e-61c1cd851c7c
📒 Files selected for processing (3)
frontend/apps/main/src/features/conversation/list/ConversationListItem.vuefrontend/apps/main/src/features/conversation/message/attachment/BubbleAttachmentItem.vuefrontend/apps/main/src/features/conversation/sidebar/CustomAttributes.vue
On a device without hover the selection overlay is always interactive, so the checkbox is in the tab order while sitting at `opacity-0`. Keyboard focus therefore landed on an invisible control, with only its focus ring drawn. Add `focus-visible:opacity-100`. On hover devices the overlay is `display: none` until hover, so the checkbox is not focusable there and nothing changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
These controls are
opacity-0 group-hover:opacity-100. Touch has no hover state, so they stay invisible while still being hit-testable — invisible targets rather than absent ones, and the action can't be performed at all:Uses the
[@media(hover:hover)]guard already used byDataTable.vue, so pointer devices are unaffected. For selection on touch the overlay is always live (tap the avatar to select) while the checkbox stays transparent until selection starts, so the avatar stays readable.Independent of the layout work — applies to touch laptops and tablets today. Refs #470
Summary by CodeRabbit