Drag handles too small on mobile view, causing poor UX and test failures

[aasimsyed]

Terms

• [x] I have searched all open bug reports
• [x] I agree to follow activist's Code of Conduct

Behavior

Description

The drag handles for reordering FAQ entries and Resources on mobile view are extremely small and difficult to interact with. This affects both manual users and automated E2E tests.

Steps to Reproduce

1. Open the app on mobile view (or resize browser to mobile width)
2. Navigate to any page with reorderable items:
   • Organization FAQ page (/organizations/{org}/faq)
   • Organization Resources page (/organizations/{org}/resources)
   • Group FAQ page (/organizations/{org}/groups/{group}/faq)
   • Group Resources page (/organizations/{org}/groups/{group}/resources)
3. Try to click/tap the drag handle (the icon used to reorder items)

Expected Behavior

• Drag handles should have a minimum touch target size of 44x44px (iOS HIG recommendation) or 48x48px (Material Design recommendation)
• Users should be able to easily grab and drag items without multiple attempts
• E2E tests should reliably click drag handles without timing issues

Actual Behavior

• Drag handles are too small (likely around 20x20px or smaller)
• Users must carefully aim to hit the tiny target
• Multiple tap attempts are often needed
• E2E tests fail intermittently because mouse positioning misses the small target
• Tests pass individually but fail in full test suites due to CPU contention affecting positioning accuracy

Impact

User Experience:

• Accessibility Issue: Violates WCAG 2.1 Success Criterion 2.5.5 (Target Size)
• Mobile-specific: Particularly problematic on phones where finger touch is less precise

Testing:

• Flaky Tests: E2E tests for drag-and-drop fail intermittently
• CI/CD Impact: Tests require retries, slowing down deployment pipeline
• False Negatives: Real bugs might be masked by flaky drag tests

Affected Components

Pages Using Drag Handles:

• frontend/app/pages/organizations/[orgId]/faq.vue
• frontend/app/pages/organizations/[orgId]/resources.vue
• frontend/app/pages/organizations/[orgId]/groups/[groupId]/faq.vue
• frontend/app/pages/organizations/[orgId]/groups/[groupId]/resources.vue
• frontend/app/pages/events/[eventId]/faq.vue
• frontend/app/pages/events/[eventId]/resources.vue

Related Tests

The following E2E tests are affected by this issue:

• test-e2e/specs/mobile/organizations/groups/organization-group-faq/organization-group-faq-page.spec.ts
• test-e2e/specs/mobile/organizations/groups/organization-group-resources/organization-group-resources-page.spec.ts
• test-e2e/specs/mobile/organizations/organization-faq/organization-faq-page.spec.ts
• test-e2e/specs/mobile/organizations/organization-resources/organization-resources-page.spec.ts

Environment

• Device: Mobile (any)
• Browser: All browsers
• Screen size: < 768px (mobile breakpoint)

Additional Context

This issue was discovered while debugging flaky E2E tests. The tests revealed what is fundamentally a UX/accessibility problem that also affects real users.

[andrewtavis]

@aasimsyed, are you able to do the issue triage with your rights on the repo? I think you should. I removed the priority from the issue text as that technically should be in the project board. Feel free to add all issues to the main board and assign them priorities based on your initial impressions!

[aasimsyed]

@andrewtavis sure thing!

[ProgrammingPirates]

@andrewtavis I understand, I am not contributing for Hacktoberfest. I genuinely want to contribute to open source, learn, and understand how things work in this project. Currently, I don’t have an internship or job, so I’m looking to gain experience by working on real projects like this. I’d really appreciate it if you could let me work on this issue to improve my skills.

Thank you 😊

[andrewtavis]

You're welcome to participate in Hacktoberfest or not as you work on this, @ProgrammingPirates :) Please let us know if you need any support!

[andrewtavis]

Closing this given work by @nicki182 :) Thanks so much for this and also thanks for the interest in helping, @ProgrammingPirates! Please let us know if there's another issue you have interest in 😊