fix(web): show sidebar new-thread button on iPad Safari and other touch tablets#2990
fix(web): show sidebar new-thread button on iPad Safari and other touch tablets#2990phinaldoo wants to merge 2 commits into
Conversation
The new-thread and archive buttons in the project sidebar used a hover-only reveal pattern (opacity-0 with group-hover:opacity-100). On iPad Safari and other tablets, the viewport is >640px so the max-sm: fallback does not apply, and hover is not available, leaving the buttons permanently invisible. Add @media (hover: none) CSS utilities that make these buttons visible and tappable on touch devices, while hiding the elements they replace (environment badge, thread timestamp) to avoid overlap.
|
Important Review skippedAuto reviews are disabled on this repository. 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🧪 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 |
github-actions
Bot
added
vouch:unvouched
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
ApprovabilityVerdict: Needs human review CSS-only changes to fix button visibility on touch tablets. However, an unresolved review comment identifies a potential visual overlap issue where timestamps and action buttons may collide on affected devices, suggesting the fix may be incomplete. You can customize Macroscope's approvability policy. Learn more. |
The @media (hover: none) block for sidebar-touch-hidden was incorrectly hiding the remote-only cloud badge on phones (<640px), where the max-sm: Tailwind modifiers already keep the badge visible beside the new-thread button. Scope the media query to min-width: 640px so phones retain the original behaviour while tablets (iPad etc.) still get the fix.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 023a1da. Configure here.
| ) : !isThreadRunning ? ( | ||
| appSettingsConfirmThreadArchive ? ( | ||
| <div className="pointer-events-none absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100"> | ||
| <div className="pointer-events-none absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100 sidebar-touch-visible"> |
There was a problem hiding this comment.
Missing touch tablet meta width
Medium Severity
On viewports at least 640px with no hover, archive controls stay visible via sidebar-touch-visible while thread timestamps stay visible too, but the meta column still only uses min-w-12 because max-sm:min-w-20 / max-sm:min-w-24 never apply. Short timestamps can overlap the archive control, unlike on phones where wider mins reserve space.
Reviewed by Cursor Bugbot for commit 023a1da. Configure here.
1 participant
Note
Low Risk
CSS-only sidebar visibility tweaks; no auth, data, or API changes.
Overview
Fixes sidebar controls that only appeared on hover, which left iPad Safari and other touch tablets without a reliable way to start a thread or archive—wide viewports skip
max-smoverrides but those devices still report no hover.Adds a
@media (hover: none)block inindex.csswithsidebar-touch-visible,sidebar-touch-hidden, andsidebar-touch-timestamp, and wires them on project headers (new-thread control, remote cloud badge) and thread rows (archive actions, timestamp spacing). Desktop hover behavior is unchanged.Reviewed by Cursor Bugbot for commit 6c02b1e. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Show sidebar new-thread button and archive actions on iPad Safari and touch tablets
@media (hover: none) and (min-width: 640px)block in index.css defining three classes:sidebar-touch-visible(opacity 1, pointer-events auto),sidebar-touch-hidden(opacity 0, pointer-events none), andsidebar-touch-timestamp(extra right padding).sidebar-touch-visibleto archive action buttons inSidebarThreadRowand the new-thread button inSidebarProjectItem, so they appear without hover on touch devices.sidebar-touch-hiddento the remote-environment Cloud icon inSidebarProjectItemon touch devices, andsidebar-touch-timestampto thread row timestamps to prevent overlap with visible action buttons.Macroscope summarized 023a1da.