From b27d966e4ee7be509e5f43d894d4bf5a149c7741 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sun, 17 May 2026 17:07:31 -0500
Subject: [PATCH] Stop forcing 44px touch targets on small inline widgets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The @media (pointer: coarse) rule was inflating every button, input,
checkbox, and icon-button to min-height: 44px on mobile Safari. That
stretched Radix checkboxes (which render as buttons) from 16px to 44px
in filter popovers, padded inbox rows past their design height because
the mark-read/archive/collapse buttons inside each row hit the floor,
and bloated sidebar section headers because the collapsible trigger
and heading menu trigger also hit it.

Keep the 44px floor for primary form controls and untyped buttons but
opt out widgets that are explicitly small by design or sit inside a
dense row that already provides the touch target — checkboxes,
toggles, Button size="xs|icon-xs|icon-sm", and any inline
data-slot="icon-button" raw <button>. Native checkbox/radio inputs
keep their UA size too.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueRow.tsx       |  2 ++
 ui/src/components/IssuesList.tsx     |  4 +++-
 ui/src/components/Sidebar.tsx        |  1 +
 ui/src/components/SidebarSection.tsx |  2 ++
 ui/src/index.css                     | 13 ++++++++++++-
 ui/src/pages/Inbox.tsx               |  2 ++
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/IssueRow.tsx b/ui/src/components/IssueRow.tsx
index 978dd949869..d2d505146e3 100644
--- a/ui/src/components/IssueRow.tsx
+++ b/ui/src/components/IssueRow.tsx
@@ -171,6 +171,7 @@ export function IssueRow({
           {showUnreadDot ? (
             <button
               type="button"
+              data-slot="icon-button"
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();
@@ -200,6 +201,7 @@ export function IssueRow({
           ) : onArchive ? (
             <button
               type="button"
+              data-slot="icon-button"
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 7335db4916c..4a2cc293d82 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -1706,6 +1706,7 @@ export function IssuesList({
                     <button
                       key={firstVisibleBlockerChip.blockerId}
                       type="button"
+                      data-slot="icon-button"
                       onClick={(event) => {
                         event.preventDefault();
                         event.stopPropagation();
@@ -1781,7 +1782,7 @@ export function IssuesList({
                         className={isMutedIssue ? "opacity-70" : undefined}
                         mobileLeading={
                           hasChildren ? (
-                            <button type="button" onClick={toggleCollapse}>
+                            <button type="button" data-slot="icon-button" onClick={toggleCollapse}>
                               <ChevronRight className={cn("h-3.5 w-3.5 transition-transform", isExpanded && "rotate-90")} />
                             </button>
                           ) : (
@@ -1795,6 +1796,7 @@ export function IssuesList({
                             {hasChildren ? (
                               <button
                                 type="button"
+                                data-slot="icon-button"
                                 className="hidden shrink-0 items-center sm:inline-flex"
                                 onClick={toggleCollapse}
                               >
diff --git a/ui/src/components/Sidebar.tsx b/ui/src/components/Sidebar.tsx
index b94fad73775..6df9e4946fa 100644
--- a/ui/src/components/Sidebar.tsx
+++ b/ui/src/components/Sidebar.tsx
@@ -76,6 +76,7 @@ export function Sidebar() {
           {/* New Issue button aligned with nav items */}
           <button
             onClick={() => openNewIssue()}
+            data-slot="icon-button"
             className="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors"
           >
             <SquarePen className="h-4 w-4 shrink-0" />
diff --git a/ui/src/components/SidebarSection.tsx b/ui/src/components/SidebarSection.tsx
index aba5ff5a8bd..bd8de05a070 100644
--- a/ui/src/components/SidebarSection.tsx
+++ b/ui/src/components/SidebarSection.tsx
@@ -95,6 +95,7 @@ function SidebarSectionHeader({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
+          data-slot="icon-button"
           className={cn(
             "inline-flex min-w-0 max-w-full items-center rounded-md px-1 py-0.5 text-left outline-none transition-colors",
             "hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
@@ -156,6 +157,7 @@ function SidebarSectionHeader({
           <CollapsibleTrigger asChild>
             <button
               type="button"
+              data-slot="icon-button"
               className="absolute -left-4 flex h-5 w-5 items-center justify-center rounded-sm outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
               aria-label={collapsible.open ? `Collapse ${label}` : `Expand ${label}`}
             >
diff --git a/ui/src/index.css b/ui/src/index.css
index 02dca5b5ccd..a29d4b67bc8 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -183,7 +183,18 @@
     min-height: 44px;
   }
 
-  [data-slot="toggle"] {
+  /* Small inline widgets keep their design size on touch devices —
+     forcing 44px here stretches checkboxes, chip menus, and icon buttons
+     that live inside dense rows (sidebar headers, issue rows, filter
+     popovers). The surrounding row provides the touch area. */
+  [data-slot="toggle"],
+  [data-slot="checkbox"],
+  [data-slot="icon-button"],
+  [data-size="xs"],
+  [data-size="icon-xs"],
+  [data-size="icon-sm"],
+  input[type="checkbox"],
+  input[type="radio"] {
     min-height: 0;
   }
 }
diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 4c5a9574af3..7f5db1a5b8c 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -2326,6 +2326,7 @@ export function Inbox() {
                             depth === 0 && hasChildren && collapseParentId ? (
                               <button
                                 type="button"
+                                data-slot="icon-button"
                                 className="hidden w-4 shrink-0 items-center justify-center sm:inline-flex"
                                 onClick={(event) => {
                                   event.preventDefault();
@@ -2358,6 +2359,7 @@ export function Inbox() {
                         depth === 0 && hasChildren && collapseParentId ? (
                           <button
                             type="button"
+                            data-slot="icon-button"
                             onClick={(event) => {
                               event.preventDefault();
                               event.stopPropagation();