From 6c02b1ea9c7b39ec31f71fcf79e4ab2c873255ec Mon Sep 17 00:00:00 2001
From: Phil Feibicke <phimah@outlook.de>
Date: Sun, 7 Jun 2026 18:13:42 +0200
Subject: [PATCH 1/2] fix(web): show sidebar action buttons on touch devices
 without hover

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.
---
 apps/web/src/components/Sidebar.tsx | 10 +++++-----
 apps/web/src/index.css              | 17 +++++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index f3f163b017d..77595eb07dc 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -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));
@@ -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">
                   <button
                     type="button"
                     data-thread-selection-safe
@@ -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
@@ -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"
                 />
               }
             >
@@ -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}`}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 0f0417d438f..5a49a9c136a 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -573,6 +573,23 @@ 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. */
+@media (hover: none) {
+  .sidebar-touch-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .sidebar-touch-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .sidebar-touch-timestamp {
+    padding-right: 1.5rem;
+  }
+}
+
 /* Thin scrollbar for model picker */
 .model-picker-list::-webkit-scrollbar {
   width: 4px;

From 023a1da6fcbedb48c0d56ec664b9c4fa8d5426d9 Mon Sep 17 00:00:00 2001
From: Phil Feibicke <phimah@outlook.de>
Date: Sun, 7 Jun 2026 19:57:11 +0200
Subject: [PATCH 2/2] =?UTF-8?q?fix(web):=20scope=20touch-device=20sidebar?=
 =?UTF-8?q?=20utilities=20to=20=E2=89=A5640px=20viewport?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 apps/web/src/index.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 5a49a9c136a..4f9ded8bda6 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -575,8 +575,10 @@ label:has(> select#reasoning-effort) select {
 
 /* 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. */
-@media (hover: none) {
+   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;