Make action menu buttons visible on mobile devices

[2witstudios]

Summary

Updated action menu buttons across activity and version history components to be visible on mobile devices while maintaining the hover-to-reveal behavior on larger screens.

Changes

• Modified Tailwind CSS classes on action menu buttons in 4 components to use responsive breakpoints
• Changed from opacity-0 group-hover:opacity-100 to sm:opacity-0 sm:group-hover:opacity-100
• This ensures buttons are always visible on mobile (below sm breakpoint) and only hidden on desktop until hover

Components Updated

• ActivityGroupItem.tsx - Activity group action menu
• ActivityItem.tsx - Individual activity action menu
• SidebarActivityTab.tsx - Sidebar activity tab action menus (3 instances)
• VersionHistoryItem.tsx - Version history action menu

Implementation Details

The responsive breakpoint approach allows the UI to adapt to different screen sizes:

• Mobile (< 640px): Action buttons remain visible for easier access
• Desktop (≥ 640px): Action buttons hidden by default, revealed on hover for cleaner appearance

This improves mobile usability without compromising the desktop experience.

https://claude.ai/code/session_01WBKMvcVq71tbPdhBsuucbq

Summary by CodeRabbit

• Bug Fixes
  • Fixed action button accessibility and visibility across activity feeds and version history components. Action buttons now display by default on mobile and small screen devices, addressing discoverability issues on these platforms.
  • Enhanced responsive design by maintaining the hover-reveal behavior on larger screens, providing a cleaner interface for desktop users while ensuring mobile usability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR applies consistent responsive opacity classes to action buttons across four activity and layout components. The changes add sm: prefixes to opacity rules, making buttons visible by default on small screens and hidden with reveal-on-hover behavior on medium screens and larger.

Changes

Cohort / File(s)	Summary
Activity & Layout Components apps/web/src/components/activity/ActivityGroupItem.tsx, apps/web/src/components/activity/ActivityItem.tsx, apps/web/src/components/layout/right-sidebar/ai-assistant/SidebarActivityTab.tsx, apps/web/src/components/version-history/VersionHistoryItem.tsx	Updated action button opacity classes to use sm: breakpoint prefixes, changing buttons from always-hidden behavior to visible-by-default on small screens with hide-and-hover-reveal on sm breakpoint and above.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• feat: add smart activity grouping for sidebar and dashboard #143: Directly modifies the same UI components and files affected by this PR's responsive opacity adjustments.

Poem

A rabbit hops through breakpoints small,
Action buttons heed the responsive call!
Show on tiny screens, bold and clear,
Hide and hover on sizes more dear,
From xs to sm, the dance unfolds fair! 🐰✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: updating action menu buttons to be visible on mobile devices by adding responsive Tailwind classes across multiple components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/fix-mobile-rollback-8Dux3

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}