From 237b9d96c64c41e679475b5c1d8f4ca94adb5405 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Mon, 12 Oct 2026 22:02:35 +0200
Subject: [PATCH] Button icon-touch/sm-touch sizes replace the repeated
 touch-target classes

---
 .../src/components/Common/OverviewToolbar.tsx | 20 ++++------
 .../components/Dashboard/DashboardEditor.tsx  | 27 +++++++-------
 .../src/components/Dashboard/PanelsDialog.tsx |  7 +---
 frontend/src/components/Flow/FlowDock.tsx     | 37 ++++++++-----------
 frontend/src/components/Flow/LogsPanel.tsx    |  7 +---
 frontend/src/components/ui/button.tsx         |  4 ++
 .../src/routes/_layout/dashboards/index.tsx   |  4 +-
 frontend/src/routes/panel.index.tsx           |  4 +-
 8 files changed, 49 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/Common/OverviewToolbar.tsx b/frontend/src/components/Common/OverviewToolbar.tsx
index 45a9e8a..b0c8d05 100644
--- a/frontend/src/components/Common/OverviewToolbar.tsx
+++ b/frontend/src/components/Common/OverviewToolbar.tsx
@@ -22,10 +22,6 @@ import {
 } from "@/components/ui/tooltip"
 import useCustomToast from "@/hooks/useCustomToast"
 import { transitions } from "@/lib/motion"
-import { cn } from "@/lib/utils"
-
-/** The icon buttons here and in the flow dock are the same touch target. */
-const ICON = "size-11 text-muted-foreground md:size-8"
 
 /**
  * The bar over the flows and dashboards lists: find one, publish what is
@@ -113,8 +109,8 @@ export function OverviewToolbar({
             <Button
               ref={trigger}
               variant="ghost"
-              size="icon"
-              className={ICON}
+              size="icon-touch"
+              className="text-muted-foreground"
               aria-label={searchLabel}
               onClick={() => setOpen(true)}
             >
@@ -130,8 +126,8 @@ export function OverviewToolbar({
           {selectedCount > 0 ? (
             <Button
               variant="ghost"
-              size="icon"
-              className={cn(ICON, "text-destructive")}
+              size="icon-touch"
+              className="text-destructive"
               aria-label={`Delete ${selectedCount} selected`}
               data-testid="delete-selected"
               onClick={onDeleteSelected}
@@ -142,8 +138,8 @@ export function OverviewToolbar({
             <DialogTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className={ICON}
+                size="icon-touch"
+                className="text-muted-foreground"
                 aria-label={createLabel}
                 data-testid={createTestId}
               >
@@ -164,8 +160,8 @@ export function OverviewToolbar({
           <span>
             <Button
               variant="ghost"
-              size="icon"
-              className={ICON}
+              size="icon-touch"
+              className="text-muted-foreground"
               disabled={draftCount === 0 || publishing}
               onClick={onPublishAll}
               aria-label="Publish all changes"
diff --git a/frontend/src/components/Dashboard/DashboardEditor.tsx b/frontend/src/components/Dashboard/DashboardEditor.tsx
index 190daf7..3c722e6 100644
--- a/frontend/src/components/Dashboard/DashboardEditor.tsx
+++ b/frontend/src/components/Dashboard/DashboardEditor.tsx
@@ -616,8 +616,8 @@ export function DashboardEditor({
                   </span>
                   <Button
                     variant="outline"
-                    size="sm"
-                    className="h-11 shrink-0 md:h-8"
+                    size="sm-touch"
+                    className="shrink-0"
                     onClick={reflow}
                     data-testid="reflow-canvas"
                   >
@@ -630,8 +630,8 @@ export function DashboardEditor({
                 <TooltipTrigger asChild>
                   <Button
                     variant="ghost"
-                    size="icon"
-                    className="size-11 text-muted-foreground md:size-8"
+                    size="icon-touch"
+                    className="text-muted-foreground"
                     onClick={() => setPaletteOpen(true)}
                     aria-label="Add widget"
                     data-testid="add-widget"
@@ -646,9 +646,9 @@ export function DashboardEditor({
                 <TooltipTrigger asChild>
                   <Button
                     variant="ghost"
-                    size="icon"
+                    size="icon-touch"
                     className={cn(
-                      "size-11 text-muted-foreground md:size-8",
+                      "text-muted-foreground",
                       settingsOpen && "text-primary",
                     )}
                     onClick={() => {
@@ -675,8 +675,8 @@ export function DashboardEditor({
                   <TooltipTrigger asChild>
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="size-11 text-muted-foreground md:size-8"
+                      size="icon-touch"
+                      className="text-muted-foreground"
                       onClick={() => setDiscardOpen(true)}
                       aria-label="Discard the unpublished changes"
                       data-testid="discard-dashboard"
@@ -697,8 +697,8 @@ export function DashboardEditor({
                   <span>
                     <Button
                       variant="ghost"
-                      size="icon"
-                      className="size-11 text-muted-foreground md:size-8"
+                      size="icon-touch"
+                      className="text-muted-foreground"
                       onClick={() => void publishDashboard()}
                       disabled={
                         !hasDraft || publish.isPending || save.isPending
@@ -736,8 +736,8 @@ export function DashboardEditor({
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11 text-muted-foreground md:size-8"
+                size="icon-touch"
+                className="text-muted-foreground"
                 aria-label="Open the panel view"
                 data-testid="open-view"
                 asChild
@@ -756,8 +756,7 @@ export function DashboardEditor({
 
           <Button
             variant={edit ? "brand" : "secondary"}
-            size="sm"
-            className="h-11 gap-1.5 md:h-8"
+            size="sm-touch"
             onClick={() => setEdit(!edit)}
             data-testid="toggle-edit"
           >
diff --git a/frontend/src/components/Dashboard/PanelsDialog.tsx b/frontend/src/components/Dashboard/PanelsDialog.tsx
index fb79103..43ce295 100644
--- a/frontend/src/components/Dashboard/PanelsDialog.tsx
+++ b/frontend/src/components/Dashboard/PanelsDialog.tsx
@@ -274,11 +274,8 @@ function PanelRow({
         </span>
         <Button
           variant={confirmRemove ? "destructive" : "ghost"}
-          size="icon"
-          className={cn(
-            "size-11 shrink-0 md:size-8",
-            !confirmRemove && "text-muted-foreground",
-          )}
+          size="icon-touch"
+          className={cn("shrink-0", !confirmRemove && "text-muted-foreground")}
           aria-label={removeLabel}
           title={removeLabel}
           data-testid={`remove-panel-${panel.id}`}
diff --git a/frontend/src/components/Flow/FlowDock.tsx b/frontend/src/components/Flow/FlowDock.tsx
index 67b4af1..0d9d4fa 100644
--- a/frontend/src/components/Flow/FlowDock.tsx
+++ b/frontend/src/components/Flow/FlowDock.tsx
@@ -148,8 +148,8 @@ export function FlowDock({
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
-              size="icon"
-              className="size-11 text-muted-foreground md:size-8"
+              size="icon-touch"
+              className="text-muted-foreground"
               onClick={onAddNode}
               aria-label="Add node"
               data-testid="add-node"
@@ -171,8 +171,8 @@ export function FlowDock({
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
-              size="icon"
-              className="hidden text-muted-foreground md:inline-flex md:size-8"
+              size="icon-touch"
+              className="hidden text-muted-foreground md:inline-flex"
               onClick={() => fitView({ ...FIT_VIEW, duration: 300 })}
               aria-label="Fit the flow to the screen"
             >
@@ -190,9 +190,8 @@ export function FlowDock({
             />
             <Button
               variant="ghost"
-              size="sm"
+              size="sm-touch"
               className={cn(
-                "h-11 gap-1.5 md:h-8",
                 faults.length > 0
                   ? "text-destructive"
                   : issuesOpen
@@ -220,11 +219,8 @@ export function FlowDock({
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
-              size="icon"
-              className={cn(
-                "size-11 text-muted-foreground md:size-8",
-                paused && "text-primary",
-              )}
+              size="icon-touch"
+              className={cn("text-muted-foreground", paused && "text-primary")}
               onClick={onTogglePause}
               disabled={!enabled}
               aria-label={paused ? "Resume flow" : "Pause flow"}
@@ -247,8 +243,8 @@ export function FlowDock({
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11 text-muted-foreground md:size-8"
+                size="icon-touch"
+                className="text-muted-foreground"
                 onClick={onStep}
                 disabled={stepping}
                 aria-label="Step the flow"
@@ -266,8 +262,7 @@ export function FlowDock({
             <span>
               <Button
                 variant="brand"
-                size="sm"
-                className="h-11 gap-1.5 md:h-8"
+                size="sm-touch"
                 onClick={onRun}
                 disabled={running || !enabled}
                 data-testid="run-flow"
@@ -295,8 +290,8 @@ export function FlowDock({
           <TooltipTrigger asChild>
             <Button
               variant="ghost"
-              size="icon"
-              className="size-11 text-muted-foreground md:size-8"
+              size="icon-touch"
+              className="text-muted-foreground"
               onClick={onEditFlow}
               aria-label="Flow settings"
               data-testid="edit-flow"
@@ -314,8 +309,8 @@ export function FlowDock({
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11 text-muted-foreground md:size-8"
+                size="icon-touch"
+                className="text-muted-foreground"
                 onClick={onDiscard}
                 aria-label="Discard the unpublished changes"
                 data-testid="discard-draft"
@@ -338,8 +333,8 @@ export function FlowDock({
             <span>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11 text-muted-foreground md:size-8"
+                size="icon-touch"
+                className="text-muted-foreground"
                 onClick={onPublish}
                 disabled={!hasDraft || publishing || saving || !connected}
                 aria-label="Publish this flow"
diff --git a/frontend/src/components/Flow/LogsPanel.tsx b/frontend/src/components/Flow/LogsPanel.tsx
index 2348782..04cf798 100644
--- a/frontend/src/components/Flow/LogsPanel.tsx
+++ b/frontend/src/components/Flow/LogsPanel.tsx
@@ -57,11 +57,8 @@ export function LogsTrigger({
       <TooltipTrigger asChild>
         <Button
           variant="ghost"
-          size="icon"
-          className={cn(
-            "size-11 text-muted-foreground md:size-8",
-            open && "text-primary",
-          )}
+          size="icon-touch"
+          className={cn("text-muted-foreground", open && "text-primary")}
           onClick={() => onOpenChange(!open)}
           aria-pressed={open}
           aria-label="Logs"
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 8b239c2..153c11a 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -30,6 +30,10 @@ const buttonVariants = cva(
         icon: "size-9",
         "icon-sm": "size-8",
         "icon-lg": "size-10",
+        // Touch targets: 44px below `md`, 32px above (DESIGN-GUIDELINES.md →
+        // Responsive).
+        "icon-touch": "size-11 md:size-8",
+        "sm-touch": "h-11 md:h-8 rounded-full gap-1.5 px-3 has-[>svg]:px-2.5",
       },
     },
     defaultVariants: {
diff --git a/frontend/src/routes/_layout/dashboards/index.tsx b/frontend/src/routes/_layout/dashboards/index.tsx
index 144c629..507c3b0 100644
--- a/frontend/src/routes/_layout/dashboards/index.tsx
+++ b/frontend/src/routes/_layout/dashboards/index.tsx
@@ -143,8 +143,8 @@ function Dashboards() {
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-11 text-muted-foreground md:size-8"
+                size="icon-touch"
+                className="text-muted-foreground"
                 aria-label="Panels"
                 data-testid="open-panels"
                 onClick={() => setPanelsOpen(true)}
diff --git a/frontend/src/routes/panel.index.tsx b/frontend/src/routes/panel.index.tsx
index 0afd086..e91add9 100644
--- a/frontend/src/routes/panel.index.tsx
+++ b/frontend/src/routes/panel.index.tsx
@@ -160,8 +160,8 @@ function PairPanel() {
           {started?.code && navigator.clipboard ? (
             <Button
               variant="ghost"
-              size="icon"
-              className="size-11 shrink-0 text-muted-foreground md:size-8"
+              size="icon-touch"
+              className="shrink-0 text-muted-foreground"
               aria-label="Copy the code"
               onClick={() => copy(started.code)}
             >