Skip to content

fix(web): show sidebar new-thread button on iPad Safari and other touch tablets #2990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
phinaldoo wants to merge 2 commits into
base: main
Choose a base branch
from
+24 −5
Open

fix(web): show sidebar new-thread button on iPad Safari and other touch tablets #2990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c02b1e
fix(web): show sidebar action buttons on touch devices without hover
phinaldoo Jun 7, 2026
023a1da
fix(web): scope touch-device sidebar utilities to ≥640px viewport
phinaldoo Jun 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
const threadMetaClassName = isConfirmingArchive
? "pointer-events-none opacity-0"
: !isThreadRunning
? "pointer-events-none transition-opacity duration-150 max-sm:pr-6 group-hover/menu-sub-item:opacity-0 group-focus-within/menu-sub-item:opacity-0"
? "pointer-events-none transition-opacity duration-150 max-sm:pr-6 group-hover/menu-sub-item:opacity-0 group-focus-within/menu-sub-item:opacity-0 sidebar-touch-timestamp"
: "pointer-events-none";
const clearConfirmingArchive = useCallback(() => {
setConfirmingArchiveThreadKey((current) => (current === threadKey ? null : current));
Expand Down Expand Up @@ -637,7 +637,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
</button>
) : !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">

@cursor cursor Bot Jun 7, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 023a1da. Configure here.

<button
type="button"
data-thread-selection-safe
Expand All @@ -654,7 +654,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
<Tooltip>
<TooltipTrigger
render={
<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">
<button
type="button"
data-thread-selection-safe
Expand Down Expand Up @@ -2040,7 +2040,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
? "Remote project"
: "Available in multiple environments"
}
className="pointer-events-none absolute top-1 right-1.5 inline-flex size-5 items-center justify-center rounded-md text-muted-foreground/60 transition-opacity duration-150 max-sm:right-7 group-hover/project-header:opacity-0 group-focus-within/project-header:opacity-0 max-sm:group-hover/project-header:opacity-100 max-sm:group-focus-within/project-header:opacity-100"
className="pointer-events-none absolute top-1 right-1.5 inline-flex size-5 items-center justify-center rounded-md text-muted-foreground/60 transition-opacity duration-150 max-sm:right-7 group-hover/project-header:opacity-0 group-focus-within/project-header:opacity-0 max-sm:group-hover/project-header:opacity-100 max-sm:group-focus-within/project-header:opacity-100 sidebar-touch-hidden"
/>
}
>
Expand All @@ -2054,7 +2054,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
<Tooltip>
<TooltipTrigger
render={
<div className="pointer-events-none absolute top-1 right-1.5 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100">
<div className="pointer-events-none absolute top-1 right-1.5 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100 sidebar-touch-visible">
<button
type="button"
aria-label={`Create new thread in ${project.displayName}`}
Expand Down
19 changes: 19 additions & 0 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,25 @@ label:has(> select#reasoning-effort) select {
animation: ultrathink-rainbow 10s linear infinite;
}

/* Show sidebar action buttons on touch devices that lack hover capability.
iPad Safari and other tablets report viewport widths >640px but cannot
hover, so the hover-only reveal pattern breaks.
We scope to min-width: 640px because below that the max-sm: Tailwind
modifiers already handle visibility correctly on phones. */
@media (hover: none) and (min-width: 640px) {
.sidebar-touch-visible {
opacity: 1;
pointer-events: auto;
}
.sidebar-touch-hidden {
opacity: 0;
pointer-events: none;
}
Comment thread
cursor[bot] marked this conversation as resolved.
.sidebar-touch-timestamp {
padding-right: 1.5rem;
}
}

/* Thin scrollbar for model picker */
.model-picker-list::-webkit-scrollbar {
width: 4px;
Expand Down
Loading