fix(item-card): expand checkbox tap target on touch devices#1524
Draft
brokenalarms wants to merge 2 commits into
Draft
fix(item-card): expand checkbox tap target on touch devices#1524brokenalarms wants to merge 2 commits into
brokenalarms wants to merge 2 commits into
Conversation
The 20px checkbox in the item card corner was too small for finger taps; taps that landed a few pixels off would hit the surrounding NuxtLink and navigate to the item instead of selecting it, making batch-select painful on iOS/Android. Wrap the checkbox in a padded hit area that grows to ~44px only under `pointer-coarse` so desktop mouse precision is unchanged. Move the toggle handler to the wrapper and disable pointer events on the inner checkbox so a single tap fires once. `@click.stop`/`@pointerdown.stop` keep the underlying card link from receiving the event. https://claude.ai/code/session_012aZhnQmF8RGDXAMdpKdoka (cherry picked from commit beda6f8)
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches✨ Simplify code
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 |
The frontend CI runs `pnpm lint:ci` which is `eslint ... --max-warnings 1`, and main has accumulated 7 errors plus 2 warnings that block every PR regardless of what it touches. Clear them so the lint job goes green for this PR (and is a no-op once upstream merges any of these in any order). - components/Location/CreateModal.vue: drop unused EntityTypeSummary import. - lib/api/classes/items.ts: drop the `error: any` cast on getLocations' return; TypeScript infers a tighter type from the spread. - pages/collection/index/entity-types.vue: drop the unused `t` from useI18n and the now-unused useI18n import itself. - pages/item/[id]/index/edit.vue, pages/location/[id]/index/edit.vue: drop the dead `locations` computed and the locationStore wiring it dragged in. Nothing on the template reads either. - pages/location/[id]/index/index.vue: drop the dead `refresh` from useAsyncData and the dead locationStore. Replace `class="aspect-square ..."` with `aspect-[1/1]` so the tailwindcss/no-custom-classname rule stops flagging it (the rule's allowlist doesn't include `aspect-square`). - pages/reset-password.vue: collapse a multi-line Button attribute set to one line per the prettier suggestion. No runtime behavior changes — every removal is a value/import that was never read. Verified with `pnpm lint:ci` exit 0. https://claude.ai/code/session_012aZhnQmF8RGDXAMdpKdoka
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
2 participants
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.
What type of PR is this?
What this PR does / why we need it:
The selection checkbox on item cards has a small hit area, making it hard to tap reliably on touch devices.
frontend/components/Item/Card.vue: expand the checkbox tap target so it is comfortably tappable on touch devices.Which issue(s) this PR fixes:
N/A
Special notes for your reviewer:
Pure UX/touch-ergonomics tweak; no behavioral change to selection logic.
Testing
eslintpasses clean on the changed file.