From c0e8d569b2c03a611546265d875798cab063581e Mon Sep 17 00:00:00 2001
From: chodeus <dhoges90@icloud.com>
Date: Fri, 14 Aug 2026 09:04:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20device=20touch=20pass=20=E2=80=94=20?=
 =?UTF-8?q?real=20geometry=20for=20the=20deferred=20controls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every deferred control gets an honest treatment: real 44px where rows
absorb it, 36px + a min-w-pinned expansion where density rules, and
documented leave-alones (display-only pills; a chip x whose expansion
reached the neighbouring chip's x). Selects reach a real 44px trigger —
LogFileSelect/ModuleSelect's inner select was unsized, so the true hit
area was ~16px regardless of wrapper. SegmentedControl gains min-w-11 so
its expansion can never spill horizontally for any schema label; the
gap-0.5 track is safe by construction. Poster-card action bars wrap
instead of silently clipping at md/lg widths.
---
 frontend/src/components/RecentQueries.jsx          |  6 ++++--
 .../components/fields/custom/ArrayObjectField.jsx  |  4 ++--
 .../components/fields/custom/DirPickerField.jsx    |  2 +-
 .../components/fields/custom/InstancesField.jsx    |  2 +-
 .../fields/features/schedule/CronInput.jsx         |  6 +++---
 .../components/fields/primitives/FieldLabel.jsx    |  3 ++-
 .../components/fields/select/MultiSelectField.jsx  |  6 ++++--
 frontend/src/components/instances/InstanceCard.jsx |  8 +++++---
 .../src/components/logs/controls/LogFileSelect.jsx |  4 ++--
 .../src/components/logs/controls/ModuleSelect.jsx  |  4 ++--
 .../components/maintenance/LibraryMaintenance.jsx  |  2 +-
 frontend/src/components/modals/EditMediaModal.jsx  |  4 ++--
 .../components/modules/ScheduleBlocksEditor.jsx    |  2 +-
 frontend/src/components/modules/ScheduleCard.jsx   |  6 ++++--
 frontend/src/components/ui/InfoTooltip.jsx         |  6 +++++-
 frontend/src/components/ui/Pagination.jsx          |  2 +-
 frontend/src/components/ui/SegmentedControl.jsx    |  6 ++++--
 frontend/src/pages/Logs.jsx                        |  8 +++++---
 frontend/src/pages/media/LabelarrPage.jsx          |  6 +++---
 frontend/src/pages/media/MediaStatsPage.jsx        |  2 +-
 frontend/src/pages/poster/BorderPreviewPage.jsx    |  2 +-
 .../src/pages/poster/PosterAssetsSearchPage.jsx    | 10 ++++++----
 frontend/src/pages/poster/PosterCleanarrPage.jsx   |  4 ++--
 .../src/pages/poster/PosterGDriveSearchPage.jsx    |  5 ++---
 frontend/src/pages/poster/PosterStatsPage.jsx      |  2 +-
 frontend/src/pages/poster/UnmatchedAssetsPage.jsx  | 14 +++++++-------
 .../src/pages/settings/GeneralSettingsPage.jsx     |  2 +-
 frontend/src/pages/settings/InstancesPage.jsx      |  2 +-
 frontend/src/pages/settings/JobsPage.jsx           |  2 +-
 frontend/src/pages/settings/NotificationsPage.jsx  |  6 +++---
 frontend/src/pages/settings/SystemSettingsPage.jsx |  2 +-
 frontend/src/pages/settings/WebhooksPage.jsx       |  4 ++--
 .../pages/settings/modules/ModuleSettingsPage.jsx  |  6 ++++--
 33 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/RecentQueries.jsx b/frontend/src/components/RecentQueries.jsx
index 5817cc15..0b7732e5 100644
--- a/frontend/src/components/RecentQueries.jsx
+++ b/frontend/src/components/RecentQueries.jsx
@@ -70,19 +70,21 @@ export default function RecentQueries({ entries, onSelect, onClear, label = 'Rec
                     <button
                         type="button"
                         onClick={handleClearClick}
-                        className="text-xs text-fg-subtle hover:text-fg underline-offset-2 hover:underline bg-transparent border-0 p-0 cursor-pointer"
+                        className="touch-expand inline-flex items-center text-xs text-fg-subtle hover:text-fg underline-offset-2 hover:underline bg-transparent border-0 p-0 cursor-pointer"
                     >
                         Clear
                     </button>
                 )}
             </div>
+            {/* min-w-11 keeps touch-expand's 44px box inside the chip, so a
+                one-character query can't reach into its neighbour. */}
             <div className="flex flex-wrap items-center gap-2">
                 {entries.map(q => (
                     <button
                         key={q}
                         type="button"
                         onClick={() => onSelect(q)}
-                        className="text-xs px-2.5 py-1 rounded-full bg-surface-alt text-fg-muted hover:bg-surface hover:text-fg border border-border-light"
+                        className="touch-expand inline-flex items-center justify-center min-h-9 min-w-11 text-xs px-2.5 rounded-full bg-surface-alt text-fg-muted hover:bg-surface hover:text-fg border border-border-light"
                     >
                         {q}
                     </button>
diff --git a/frontend/src/components/fields/custom/ArrayObjectField.jsx b/frontend/src/components/fields/custom/ArrayObjectField.jsx
index 4a7fb96a..861defb0 100755
--- a/frontend/src/components/fields/custom/ArrayObjectField.jsx
+++ b/frontend/src/components/fields/custom/ArrayObjectField.jsx
@@ -462,7 +462,7 @@ export const ArrayObjectField = ({
         }));
         const lbl = 'font-mono text-[10px] tracking-[0.8px] text-fg-subtle';
         const ctrl =
-            'h-9 px-2.5 rounded-md bg-surface-inset border border-border text-fg text-sm outline-none focus:border-primary w-full';
+            'h-11 px-2.5 rounded-md bg-surface-inset border border-border text-fg text-sm outline-none focus:border-primary w-full';
         return (
             <div
                 key={index}
@@ -854,7 +854,7 @@ export const ArrayObjectField = ({
                         value={item.app_instance || ''}
                         onChange={e => set('app_instance', e.target.value)}
                         disabled={disabled}
-                        className="h-9 px-2.5 rounded-md bg-surface border border-border text-fg text-sm font-semibold outline-none focus:border-primary min-w-[160px] flex-1"
+                        className="h-11 px-2.5 rounded-md bg-surface border border-border text-fg text-sm font-semibold outline-none focus:border-primary min-w-[160px] flex-1"
                     >
                         <option value="">— Select —</option>
                         {instanceOptions.map(o => (
diff --git a/frontend/src/components/fields/custom/DirPickerField.jsx b/frontend/src/components/fields/custom/DirPickerField.jsx
index 4ff81bc7..1e22558b 100644
--- a/frontend/src/components/fields/custom/DirPickerField.jsx
+++ b/frontend/src/components/fields/custom/DirPickerField.jsx
@@ -167,7 +167,7 @@ export const DirPickerField = React.memo(({ field, value, onChange, disabled = f
                         value={activeRoot || ''}
                         onChange={handleRootChange}
                         disabled={disabled || loading}
-                        className="flex-1 px-2 py-1 text-xs bg-input border border-border rounded text-fg focus:border-primary focus:outline-none"
+                        className="flex-1 h-11 px-2 text-xs bg-input border border-border rounded text-fg focus:border-primary focus:outline-none"
                     >
                         {roots.map(r => (
                             <option key={r} value={r}>
diff --git a/frontend/src/components/fields/custom/InstancesField.jsx b/frontend/src/components/fields/custom/InstancesField.jsx
index 97134cc0..449c1a62 100755
--- a/frontend/src/components/fields/custom/InstancesField.jsx
+++ b/frontend/src/components/fields/custom/InstancesField.jsx
@@ -88,7 +88,7 @@ const ArrInstancePills = React.memo(
                             onClick={() => onToggle(instance.type, instance.name, !isSelected)}
                             aria-pressed={isSelected}
                             title={instance.url || instance.name}
-                            className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12.5px] font-medium border transition-colors cursor-pointer disabled:opacity-50 ${
+                            className={`inline-flex items-center gap-2 min-h-11 px-3 rounded-full text-[12.5px] font-medium border transition-colors cursor-pointer disabled:opacity-50 ${
                                 isSelected
                                     ? 'bg-primary/15 border-primary text-fg'
                                     : 'bg-surface-inset border-border text-fg-muted hover:border-primary'
diff --git a/frontend/src/components/fields/features/schedule/CronInput.jsx b/frontend/src/components/fields/features/schedule/CronInput.jsx
index 496b8414..0f836551 100755
--- a/frontend/src/components/fields/features/schedule/CronInput.jsx
+++ b/frontend/src/components/fields/features/schedule/CronInput.jsx
@@ -104,13 +104,13 @@ export const CronInput = React.memo(
                 />
 
                 {/* Help text */}
-                <div className="text-xs text-fg-subtle mt-1">
-                    Format: minute hour day month weekday
+                <div className="flex flex-wrap items-center gap-2 text-xs text-fg-subtle mt-1">
+                    <span>Format: minute hour day month weekday</span>
                     <a
                         href="https://crontab.guru"
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="ml-2 text-fg hover:text-primary-hover underline"
+                        className="inline-flex items-center min-h-11 text-fg hover:text-primary-hover underline"
                     >
                         crontab.guru helper
                     </a>
diff --git a/frontend/src/components/fields/primitives/FieldLabel.jsx b/frontend/src/components/fields/primitives/FieldLabel.jsx
index b7426089..461f384d 100755
--- a/frontend/src/components/fields/primitives/FieldLabel.jsx
+++ b/frontend/src/components/fields/primitives/FieldLabel.jsx
@@ -37,8 +37,9 @@ export const FieldLabel = ({ htmlFor, label, required = false, helpText, classNa
         );
     }
 
+    // gap-2.5 keeps the ⓘ's 44px coarse hit box off the label's own click area.
     return (
-        <span className="mb-1 inline-flex items-center gap-1">
+        <span className="mb-1 inline-flex items-center gap-2.5">
             {labelEl}
             <InfoTooltip text={helpText} />
         </span>
diff --git a/frontend/src/components/fields/select/MultiSelectField.jsx b/frontend/src/components/fields/select/MultiSelectField.jsx
index 0670b290..6571f9c5 100644
--- a/frontend/src/components/fields/select/MultiSelectField.jsx
+++ b/frontend/src/components/fields/select/MultiSelectField.jsx
@@ -64,12 +64,14 @@ export const MultiSelectField = React.memo(
             <FieldWrapper invalid={highlightInvalid}>
                 <FieldLabel htmlFor={inputId} label={field.label} required={field.required} />
 
+                {/* The × is a real 36px box, not a touch-expand: an expanded hit area
+                    on a 26px chip reached across the row gap into the next chip's ×. */}
                 {selected.length > 0 && (
                     <div className="flex flex-wrap gap-2 mb-2">
                         {selected.map((v, i) => (
                             <span
                                 key={v}
-                                className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-primary/20 text-fg text-sm"
+                                className="inline-flex items-center gap-1 min-h-11 px-2 rounded-md bg-primary/20 text-fg text-sm"
                             >
                                 <span className="text-xs text-fg-subtle">{i + 1}.</span>
                                 {labelFor(v)}
@@ -78,7 +80,7 @@ export const MultiSelectField = React.memo(
                                         type="button"
                                         onClick={() => removeValue(v)}
                                         aria-label={`Remove ${labelFor(v)}`}
-                                        className="ml-1 inline-flex items-center justify-center leading-none hover:text-error"
+                                        className="ml-1 inline-flex items-center justify-center w-9 h-9 shrink-0 leading-none hover:text-error"
                                     >
                                         ×
                                     </button>
diff --git a/frontend/src/components/instances/InstanceCard.jsx b/frontend/src/components/instances/InstanceCard.jsx
index 9de98f27..eba0c172 100755
--- a/frontend/src/components/instances/InstanceCard.jsx
+++ b/frontend/src/components/instances/InstanceCard.jsx
@@ -147,8 +147,10 @@ export const InstanceCard = ({
             ? formatSecondsAgo(instanceStats.snapshot_age_seconds)
             : null;
 
+    // 36px real box + touch-expand's 44px coarse hit area; the row's gap-2.5
+    // covers the 4px each neighbour reaches past its own edge.
     const iconBtn =
-        'w-8 h-8 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors disabled:opacity-50';
+        'touch-expand w-9 h-9 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors disabled:opacity-50';
 
     return (
         <div className="rounded-xl bg-surface border border-border hover:border-[#3b3d72] transition-colors overflow-hidden">
@@ -195,7 +197,7 @@ export const InstanceCard = ({
                     )}
                 </div>
 
-                <div className="flex items-center gap-1.5 shrink-0 w-full justify-end sm:w-auto">
+                <div className="flex items-center gap-2.5 shrink-0 w-full justify-end sm:w-auto">
                     <Button variant="surface" size="small" onClick={onTest} disabled={isTesting}>
                         {isTesting ? 'Testing…' : 'Test'}
                     </Button>
@@ -376,7 +378,7 @@ export const InstanceCard = ({
                                     onClick={() =>
                                         onFetchLibraries && onFetchLibraries(instance.name)
                                     }
-                                    className="text-xs text-fg-subtle hover:text-fg underline underline-offset-2"
+                                    className="inline-flex items-center min-h-11 text-xs text-fg-subtle hover:text-fg underline underline-offset-2"
                                 >
                                     Load libraries
                                 </button>
diff --git a/frontend/src/components/logs/controls/LogFileSelect.jsx b/frontend/src/components/logs/controls/LogFileSelect.jsx
index 3dc55bcc..a05fb3d9 100755
--- a/frontend/src/components/logs/controls/LogFileSelect.jsx
+++ b/frontend/src/components/logs/controls/LogFileSelect.jsx
@@ -11,7 +11,7 @@ export const LogFileSelect = () => {
 
     return (
         <div
-            className={`flex items-center w-full h-9 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors ${
+            className={`flex items-center w-full h-11 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors ${
                 disabled ? 'opacity-50' : ''
             }`}
         >
@@ -20,7 +20,7 @@ export const LogFileSelect = () => {
                 disabled={disabled}
                 onChange={e => onLogFileChange(e.target.value)}
                 aria-label="Select log file"
-                className="flex-1 min-w-0 bg-transparent border-0 outline-none font-mono text-xs text-fg-muted cursor-pointer disabled:cursor-not-allowed"
+                className="flex-1 min-w-0 h-full bg-transparent border-0 outline-none font-mono text-xs text-fg-muted cursor-pointer disabled:cursor-not-allowed"
             >
                 <option value="">Select log file</option>
                 {logFiles &&
diff --git a/frontend/src/components/logs/controls/ModuleSelect.jsx b/frontend/src/components/logs/controls/ModuleSelect.jsx
index f44eacac..a4e5fd60 100755
--- a/frontend/src/components/logs/controls/ModuleSelect.jsx
+++ b/frontend/src/components/logs/controls/ModuleSelect.jsx
@@ -10,7 +10,7 @@ export const ModuleSelect = () => {
     const { modules, selectedModule, onModuleChange } = useLogControls();
 
     return (
-        <div className="flex items-center gap-2 w-full h-9 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors">
+        <div className="flex items-center gap-2 w-full h-11 px-3 rounded-lg bg-surface-inset border border-border focus-within:border-primary transition-colors">
             <span
                 className={`w-[7px] h-[7px] rounded-full shrink-0 ${
                     selectedModule ? 'bg-accent' : 'bg-fg-faint'
@@ -21,7 +21,7 @@ export const ModuleSelect = () => {
                 value={selectedModule || ''}
                 onChange={e => onModuleChange(e.target.value)}
                 aria-label="Select module"
-                className="flex-1 min-w-0 bg-transparent border-0 outline-none text-[13px] text-fg cursor-pointer"
+                className="flex-1 min-w-0 h-full bg-transparent border-0 outline-none text-[13px] text-fg cursor-pointer"
             >
                 <option value="">Select module</option>
                 {modules.map(module => (
diff --git a/frontend/src/components/maintenance/LibraryMaintenance.jsx b/frontend/src/components/maintenance/LibraryMaintenance.jsx
index 61affccb..33eeab50 100644
--- a/frontend/src/components/maintenance/LibraryMaintenance.jsx
+++ b/frontend/src/components/maintenance/LibraryMaintenance.jsx
@@ -254,7 +254,7 @@ const IncompleteMetadataCard = () => {
                             key={f.key}
                             type="button"
                             onClick={() => toggleField(f.key)}
-                            className="px-3 py-1.5 rounded-full text-sm cursor-pointer"
+                            className="inline-flex items-center min-h-11 px-3 rounded-full text-sm cursor-pointer"
                             style={{
                                 background: active
                                     ? 'color-mix(in srgb, var(--accent) 18%, transparent)'
diff --git a/frontend/src/components/modals/EditMediaModal.jsx b/frontend/src/components/modals/EditMediaModal.jsx
index 9a07aae6..8c12c37c 100644
--- a/frontend/src/components/modals/EditMediaModal.jsx
+++ b/frontend/src/components/modals/EditMediaModal.jsx
@@ -200,7 +200,7 @@ const EditMediaModal = ({ isOpen, onClose, item, onSave, isSaving = false }) =>
                                     <select
                                         value={formData[field.key] || ''}
                                         onChange={e => handleChange(field.key, e.target.value)}
-                                        className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
+                                        className="w-full h-11 px-3 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
                                     >
                                         {field.options.map(opt => (
                                             <option key={opt} value={opt}>
@@ -214,7 +214,7 @@ const EditMediaModal = ({ isOpen, onClose, item, onSave, isSaving = false }) =>
                                         value={formData[field.key] || ''}
                                         onChange={e => handleChange(field.key, e.target.value)}
                                         placeholder={field.placeholder || ''}
-                                        className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
+                                        className="w-full h-11 px-3 bg-surface border border-border rounded-lg text-fg text-sm focus:border-primary outline-none"
                                     />
                                 )}
                             </div>
diff --git a/frontend/src/components/modules/ScheduleBlocksEditor.jsx b/frontend/src/components/modules/ScheduleBlocksEditor.jsx
index dbb5735c..ac929d00 100644
--- a/frontend/src/components/modules/ScheduleBlocksEditor.jsx
+++ b/frontend/src/components/modules/ScheduleBlocksEditor.jsx
@@ -129,7 +129,7 @@ export const ScheduleBlocksEditor = ({ blocks, onChange, disabled }) => {
                             value={b.mode}
                             disabled={disabled}
                             onChange={e => update(i, { mode: e.target.value })}
-                            className="bg-surface border border-border rounded px-2 py-1 text-sm"
+                            className="h-11 bg-surface border border-border rounded px-2 text-sm"
                         >
                             {MODE_OPTIONS.map(m => (
                                 <option key={m} value={m}>
diff --git a/frontend/src/components/modules/ScheduleCard.jsx b/frontend/src/components/modules/ScheduleCard.jsx
index cff4146d..318b6af0 100755
--- a/frontend/src/components/modules/ScheduleCard.jsx
+++ b/frontend/src/components/modules/ScheduleCard.jsx
@@ -43,8 +43,10 @@ export const ScheduleCard = React.memo(
             },
             [moduleKey, onCancel]
         );
+        // 36px real box + touch-expand's 44px coarse hit area; the row's gap-2.5
+        // covers the 4px each neighbour reaches past its own edge.
         const iconBtn =
-            'w-8 h-8 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors';
+            'touch-expand w-9 h-9 rounded-lg flex items-center justify-center text-fg-muted hover:text-fg hover:bg-row-hover transition-colors';
 
         return (
             <div
@@ -78,7 +80,7 @@ export const ScheduleCard = React.memo(
                         )}
                     </div>
 
-                    <div className="flex items-center gap-1.5 shrink-0">
+                    <div className="flex items-center gap-2.5 shrink-0">
                         {isRunning && onCancel && (
                             <Button variant="danger" size="small" onClick={handleCancelClick}>
                                 Cancel
diff --git a/frontend/src/components/ui/InfoTooltip.jsx b/frontend/src/components/ui/InfoTooltip.jsx
index 7a73525c..2173ec7b 100644
--- a/frontend/src/components/ui/InfoTooltip.jsx
+++ b/frontend/src/components/ui/InfoTooltip.jsx
@@ -9,6 +9,10 @@ import PropTypes from 'prop-types';
  *
  * Hover and focus-within alone left every field's helpText unreachable on a
  * touch screen, so the button also toggles it outright.
+ *
+ * The 15px glyph sits in a real 24px box; touch-expand takes the coarse-pointer
+ * hit area to 44px, which reaches ~6px into the control below (a mis-tap opens
+ * the tooltip rather than focusing the field — the honest trade for a 15px icon).
  */
 const InfoTooltip = ({ text, label = 'More info' }) => {
     const [open, setOpen] = useState(false);
@@ -23,7 +27,7 @@ const InfoTooltip = ({ text, label = 'More info' }) => {
                 aria-describedby={open ? tooltipId : undefined}
                 onClick={() => setOpen(o => !o)}
                 onBlur={() => setOpen(false)}
-                className="inline-flex items-center justify-center text-fg-faint hover:text-fg-muted focus-visible:text-fg-muted outline-none cursor-help"
+                className="touch-expand inline-flex items-center justify-center w-6 h-6 shrink-0 text-fg-faint hover:text-fg-muted focus-visible:text-fg-muted outline-none cursor-help"
             >
                 <span className="material-symbols-outlined text-[15px] leading-none">info</span>
             </button>
diff --git a/frontend/src/components/ui/Pagination.jsx b/frontend/src/components/ui/Pagination.jsx
index 706a4dac..4472374f 100644
--- a/frontend/src/components/ui/Pagination.jsx
+++ b/frontend/src/components/ui/Pagination.jsx
@@ -35,7 +35,7 @@ const Pagination = ({ currentPage, totalPages, onPageChange, className = '' }) =
                     value={currentPage}
                     onChange={handleSelect}
                     aria-label="Jump to page"
-                    className="appearance-none bg-input border border-border rounded-md text-sm text-fg pl-2 pr-7 py-1 cursor-pointer hover:border-primary hover:bg-input-hover focus:ring-primary transition-colors"
+                    className="appearance-none h-11 bg-input border border-border rounded-md text-sm text-fg pl-2 pr-7 cursor-pointer hover:border-primary hover:bg-input-hover focus:ring-primary transition-colors"
                 >
                     {Array.from({ length: totalPages }, (_, i) => i + 1).map(n => (
                         <option key={n} value={n}>
diff --git a/frontend/src/components/ui/SegmentedControl.jsx b/frontend/src/components/ui/SegmentedControl.jsx
index 368ec1f3..4cf83fa0 100644
--- a/frontend/src/components/ui/SegmentedControl.jsx
+++ b/frontend/src/components/ui/SegmentedControl.jsx
@@ -21,7 +21,9 @@ const SegmentedControl = ({
     fullWidth = false,
 }) => {
     const wrapH = size === 'sm' ? 'h-9' : 'h-11';
-    const segH = size === 'sm' ? 'h-7 px-3 text-xs' : 'h-9 px-3.5 text-[13px]';
+    // min-w-11 pins touch-expand's 44px box to the segment's own width, so a
+    // one-character schema label can't reach across gap-0.5 into its neighbour.
+    const segH = size === 'sm' ? 'h-7 min-w-11 px-3 text-xs' : 'h-9 min-w-11 px-3.5 text-[13px]';
     const wrapLayout = fullWidth ? 'flex w-full' : 'inline-flex';
     const segFlex = fullWidth ? 'flex-1' : '';
     return (
@@ -48,7 +50,7 @@ const SegmentedControl = ({
                         role="tab"
                         aria-selected={active}
                         onClick={() => onChange(opt.value)}
-                        className={`inline-flex items-center justify-center ${segFlex} ${segH} rounded-[7px] whitespace-nowrap transition-colors cursor-pointer ${stateCls}`}
+                        className={`touch-expand inline-flex items-center justify-center ${segFlex} ${segH} rounded-[7px] whitespace-nowrap transition-colors cursor-pointer ${stateCls}`}
                     >
                         {opt.label}
                     </button>
diff --git a/frontend/src/pages/Logs.jsx b/frontend/src/pages/Logs.jsx
index 5dcab20c..a09660ee 100755
--- a/frontend/src/pages/Logs.jsx
+++ b/frontend/src/pages/Logs.jsx
@@ -96,8 +96,10 @@ export default function Logs() {
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, []);
 
+    // 36px real pill; touch-expand tops the coarse hit box to 44px, and min-w-11
+    // keeps that box inside the pill so the bar's gap-2 stays clear.
     const pillBase =
-        'px-3 py-1.5 rounded-full font-mono text-[11px] font-semibold capitalize cursor-pointer border transition-colors select-none';
+        'touch-expand inline-flex items-center justify-center min-h-9 min-w-11 px-3 rounded-full font-mono text-[11px] font-semibold capitalize cursor-pointer border transition-colors select-none';
     const pillOff = 'bg-transparent text-fg-subtle border-border hover:text-fg';
     const levelOnClass = level => {
         if (level === 'critical') return 'bg-error/20 text-error border-error/40';
@@ -181,7 +183,7 @@ export default function Logs() {
                     <button
                         type="button"
                         onClick={scrollToTop}
-                        className={`${pillBase} ${pillOff} inline-flex items-center gap-1`}
+                        className={`${pillBase} ${pillOff} gap-1`}
                         title="Scroll to top"
                     >
                         <span className="material-symbols-outlined text-sm">
@@ -192,7 +194,7 @@ export default function Logs() {
                     <button
                         type="button"
                         onClick={scrollToBottom}
-                        className={`${pillBase} ${pillOff} inline-flex items-center gap-1`}
+                        className={`${pillBase} ${pillOff} gap-1`}
                         title="Scroll to bottom"
                     >
                         <span className="material-symbols-outlined text-sm">
diff --git a/frontend/src/pages/media/LabelarrPage.jsx b/frontend/src/pages/media/LabelarrPage.jsx
index 901d4869..2122cba1 100644
--- a/frontend/src/pages/media/LabelarrPage.jsx
+++ b/frontend/src/pages/media/LabelarrPage.jsx
@@ -403,7 +403,7 @@ const LabelarrLibraryPicker = ({ instanceName, value, onChange, disabled }) => {
     };
 
     return (
-        <div className="flex flex-wrap gap-1.5 py-1">
+        <div className="flex flex-wrap gap-2 py-1">
             {libraries.map(title => {
                 const on = selected.has(libNorm(title));
                 return (
@@ -413,7 +413,7 @@ const LabelarrLibraryPicker = ({ instanceName, value, onChange, disabled }) => {
                         disabled={disabled}
                         aria-pressed={on}
                         onClick={() => toggle(title)}
-                        className={`inline-flex items-center gap-1 px-2 py-1.5 rounded-[5px] text-xs border transition-colors disabled:opacity-50 ${
+                        className={`touch-expand inline-flex items-center justify-center gap-1 min-h-9 min-w-11 px-2 rounded-[5px] text-xs border transition-colors disabled:opacity-50 ${
                             on
                                 ? 'bg-primary/15 border-primary text-fg'
                                 : 'bg-surface-inset border-border text-fg-muted hover:border-primary'
@@ -443,7 +443,7 @@ const MappingCard = ({
 }) => {
     const [expanded, setExpanded] = useState(!mapping.app_instance);
     const inputCls =
-        'h-9 rounded-[8px] bg-surface-inset border border-border text-fg text-[13px] px-3 outline-none focus:border-primary disabled:opacity-50';
+        'h-11 rounded-[8px] bg-surface-inset border border-border text-fg text-[13px] px-3 outline-none focus:border-primary disabled:opacity-50';
 
     const setLabels = useCallback(
         v =>
diff --git a/frontend/src/pages/media/MediaStatsPage.jsx b/frontend/src/pages/media/MediaStatsPage.jsx
index 6f6649fd..a86464e2 100644
--- a/frontend/src/pages/media/MediaStatsPage.jsx
+++ b/frontend/src/pages/media/MediaStatsPage.jsx
@@ -263,7 +263,7 @@ const BreakdownTabs = ({ stats }) => {
                             role="tab"
                             aria-selected={isActive}
                             onClick={() => setActiveKey(tab.key)}
-                            className="px-3 py-1.5 rounded-full text-sm transition-colors"
+                            className="inline-flex items-center min-h-11 px-3 rounded-full text-sm transition-colors"
                             style={{
                                 background: isActive
                                     ? 'color-mix(in srgb, var(--accent) 18%, transparent)'
diff --git a/frontend/src/pages/poster/BorderPreviewPage.jsx b/frontend/src/pages/poster/BorderPreviewPage.jsx
index fd4a6af2..37db9bd5 100644
--- a/frontend/src/pages/poster/BorderPreviewPage.jsx
+++ b/frontend/src/pages/poster/BorderPreviewPage.jsx
@@ -630,7 +630,7 @@ const PreviewSection = ({ isDirty }) => {
                                 value={holiday}
                                 onChange={handleHolidayChange}
                                 disabled={isLoadingOptions || isGenerating}
-                                className="bg-surface border border-border rounded px-2 py-1 text-sm text-fg"
+                                className="h-11 bg-surface border border-border rounded px-2 text-sm text-fg"
                             >
                                 {options.map(opt => (
                                     <option key={opt.value} value={opt.value}>
diff --git a/frontend/src/pages/poster/PosterAssetsSearchPage.jsx b/frontend/src/pages/poster/PosterAssetsSearchPage.jsx
index 81597e48..72a00416 100644
--- a/frontend/src/pages/poster/PosterAssetsSearchPage.jsx
+++ b/frontend/src/pages/poster/PosterAssetsSearchPage.jsx
@@ -358,7 +358,7 @@ const PosterAssetsSearchPage = () => {
     };
 
     const selectCls =
-        'h-9 rounded-[9px] bg-surface border border-border text-fg-muted text-[13px] px-3 cursor-pointer outline-none focus:border-primary';
+        'h-11 rounded-[9px] bg-surface border border-border text-fg-muted text-[13px] px-3 cursor-pointer outline-none focus:border-primary';
 
     return (
         <div className="flex flex-col gap-5">
@@ -750,7 +750,9 @@ const PosterAssetsSearchPage = () => {
                                         delete confirmation instead of the lightbox.
                                         On a touch screen hover never fires, so show
                                         it outright. */}
-                                    <div className="absolute top-1.5 right-1.5 z-10 flex items-center gap-0.5 rounded-lg bg-black/55 backdrop-blur-sm p-0.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:pointer-events-auto transition-fast">
+                                    {/* gap-2 separates the 44px coarse hit boxes; max-w + wrap
+                                        stop the wider bar clipping on the dense poster grids. */}
+                                    <div className="absolute top-1.5 right-1.5 z-10 flex flex-wrap justify-end items-center gap-2 max-w-[calc(100%-12px)] rounded-lg bg-black/55 backdrop-blur-sm p-0.5 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto pointer-coarse:opacity-100 pointer-coarse:pointer-events-auto transition-fast">
                                         <IconButton
                                             icon="playlist_add"
                                             aria-label="Add to collection"
@@ -1044,7 +1046,7 @@ const PosterAssetsSearchPage = () => {
                                 onChange={e =>
                                     setDownloadOpts(prev => ({ ...prev, format: e.target.value }))
                                 }
-                                className="w-full p-2 bg-input border border-border rounded-md text-fg text-sm cursor-pointer"
+                                className="w-full h-11 px-2 bg-input border border-border rounded-md text-fg text-sm cursor-pointer"
                             >
                                 <option value="">Original</option>
                                 <option value="webp">WebP</option>
@@ -1123,7 +1125,7 @@ const PosterAssetsSearchPage = () => {
                     <select
                         value={selectedCollectionId}
                         onChange={e => setSelectedCollectionId(e.target.value)}
-                        className="w-full p-2 bg-input border border-border rounded-md text-fg text-sm cursor-pointer"
+                        className="w-full h-11 px-2 bg-input border border-border rounded-md text-fg text-sm cursor-pointer"
                     >
                         <option value="">Select a collection...</option>
                         {collections.map(col => (
diff --git a/frontend/src/pages/poster/PosterCleanarrPage.jsx b/frontend/src/pages/poster/PosterCleanarrPage.jsx
index 98e4a64d..a0f0f296 100644
--- a/frontend/src/pages/poster/PosterCleanarrPage.jsx
+++ b/frontend/src/pages/poster/PosterCleanarrPage.jsx
@@ -1143,7 +1143,7 @@ const PosterCleanarrPage = () => {
                     <select
                         value={mode}
                         onChange={e => setMode(e.target.value)}
-                        className="h-[34px] bg-surface-inset border border-border rounded-lg px-3 text-[13px] font-semibold text-fg outline-none focus:border-primary cursor-pointer"
+                        className="h-11 bg-surface-inset border border-border rounded-lg px-3 text-[13px] font-semibold text-fg outline-none focus:border-primary cursor-pointer"
                     >
                         {Object.entries(MODE_META).map(([k, m]) => (
                             <option key={k} value={k}>
@@ -1326,7 +1326,7 @@ const PosterCleanarrPage = () => {
                                                     <button
                                                         type="button"
                                                         onClick={() => selectNode(null)}
-                                                        className="mb-2 text-sm text-fg cursor-pointer inline-flex items-center gap-1 hover:underline"
+                                                        className="mb-2 min-h-11 text-sm text-fg cursor-pointer inline-flex items-center gap-1 hover:underline"
                                                     >
                                                         ← Back to list
                                                     </button>
diff --git a/frontend/src/pages/poster/PosterGDriveSearchPage.jsx b/frontend/src/pages/poster/PosterGDriveSearchPage.jsx
index 0b4b1f85..eeaa72b9 100644
--- a/frontend/src/pages/poster/PosterGDriveSearchPage.jsx
+++ b/frontend/src/pages/poster/PosterGDriveSearchPage.jsx
@@ -189,12 +189,11 @@ const PosterGDriveSearchPage = () => {
             {sources.length > 0 && (
                 <div className="flex flex-wrap items-center gap-3">
                     <SegmentedControl
-                        size="sm"
                         options={FILTER_OPTIONS}
                         value={filterBy}
                         onChange={setFilterBy}
                     />
-                    <div className="flex items-center h-9 rounded-[9px] bg-surface border border-border">
+                    <div className="flex items-center h-11 rounded-[9px] bg-surface border border-border">
                         <span className="material-symbols-outlined text-[16px] text-fg-subtle pl-3">
                             sort
                         </span>
@@ -217,7 +216,7 @@ const PosterGDriveSearchPage = () => {
                         <select
                             value={pickerSelection}
                             onChange={e => setPickerSelection(e.target.value)}
-                            className="h-9 min-w-[180px] rounded-[9px] bg-surface border border-border text-[13px] text-fg-muted px-3 cursor-pointer outline-none focus:border-primary"
+                            className="h-11 min-w-[180px] rounded-[9px] bg-surface border border-border text-[13px] text-fg-muted px-3 cursor-pointer outline-none focus:border-primary"
                             aria-label="Sync a specific folder"
                         >
                             <option value="">Sync folder…</option>
diff --git a/frontend/src/pages/poster/PosterStatsPage.jsx b/frontend/src/pages/poster/PosterStatsPage.jsx
index 7666a4e2..b0c330f5 100644
--- a/frontend/src/pages/poster/PosterStatsPage.jsx
+++ b/frontend/src/pages/poster/PosterStatsPage.jsx
@@ -414,7 +414,7 @@ const PosterStatsPage = () => {
                     </p>
                 </div>
                 <div className="flex items-center gap-2.5">
-                    <div className="flex items-center h-[38px] rounded-lg bg-surface border border-border">
+                    <div className="flex items-center h-11 rounded-lg bg-surface border border-border">
                         <select
                             value={period}
                             onChange={e => setPeriod(e.target.value)}
diff --git a/frontend/src/pages/poster/UnmatchedAssetsPage.jsx b/frontend/src/pages/poster/UnmatchedAssetsPage.jsx
index 5500b4f2..4c81565e 100644
--- a/frontend/src/pages/poster/UnmatchedAssetsPage.jsx
+++ b/frontend/src/pages/poster/UnmatchedAssetsPage.jsx
@@ -489,7 +489,7 @@ const UnmatchedList = ({ items, onRefresh, onPick, typeKey: typeKeyProp, onTypeC
     return (
         <div className="flex flex-col gap-4">
             <div className="flex items-center gap-3 flex-wrap">
-                <div className="inline-flex items-center h-10 p-1 gap-0.5 bg-surface border border-border rounded-lg">
+                <div className="inline-flex items-center h-11 p-1 gap-0.5 bg-surface border border-border rounded-lg">
                     {presentTabs.map(t => (
                         <button
                             key={t.key}
@@ -497,7 +497,7 @@ const UnmatchedList = ({ items, onRefresh, onPick, typeKey: typeKeyProp, onTypeC
                                 setTypeKey(t.key);
                                 setPage(0);
                             }}
-                            className={`h-8 px-3 rounded-[7px] text-[12.5px] font-semibold transition-colors ${
+                            className={`touch-expand h-9 min-w-11 px-3 rounded-[7px] text-[12.5px] font-semibold transition-colors ${
                                 typeKey === t.key
                                     ? 'bg-primary text-on-color'
                                     : 'text-fg-muted hover:text-fg'
@@ -1324,7 +1324,7 @@ const ArtworkView = ({ data, status, isLoading, onRefresh, onPick }) => {
             </div>
 
             <div className="flex items-center gap-3 flex-wrap">
-                <div className="inline-flex items-center h-10 p-1 gap-0.5 bg-surface border border-border rounded-lg">
+                <div className="inline-flex items-center h-11 p-1 gap-0.5 bg-surface border border-border rounded-lg">
                     {mediaTabs.map(t => (
                         <button
                             key={t.key}
@@ -1332,7 +1332,7 @@ const ArtworkView = ({ data, status, isLoading, onRefresh, onPick }) => {
                                 setMediaTypeKey(t.key);
                                 setPage(0);
                             }}
-                            className={`h-8 px-3 rounded-[7px] text-[12.5px] font-semibold transition-colors ${
+                            className={`touch-expand h-9 min-w-11 px-3 rounded-[7px] text-[12.5px] font-semibold transition-colors ${
                                 mediaTypeKey === t.key
                                     ? 'bg-primary text-on-color'
                                     : 'text-fg-muted hover:text-fg'
@@ -1349,7 +1349,7 @@ const ArtworkView = ({ data, status, isLoading, onRefresh, onPick }) => {
                     <button
                         type="button"
                         onClick={() => setTypeFilter(null)}
-                        className="text-xs text-fg-muted hover:text-fg underline"
+                        className="inline-flex items-center min-h-11 text-xs text-fg-muted hover:text-fg underline"
                     >
                         Clear {ARTWORK_TYPES.find(a => a.key === typeFilter)?.label} filter
                     </button>
@@ -1751,7 +1751,7 @@ const PosterPickerModal = ({ item, onClose, onApplied }) => {
                 {targets.length > 1 && (
                     // Candidates are filtered to the row's exact season server-side,
                     // so each missing season needs its own fetch to be matchable.
-                    <div className="flex flex-wrap items-center gap-1 mb-3">
+                    <div className="flex flex-wrap items-center gap-2 mb-3">
                         {targets.map((t, i) => (
                             <button
                                 key={t.id}
@@ -1763,7 +1763,7 @@ const PosterPickerModal = ({ item, onClose, onApplied }) => {
                                     setTargetIdx(i);
                                     setResult({ targetId: undefined, list: null });
                                 }}
-                                className={`h-8 px-3 rounded-[7px] text-[12.5px] font-semibold transition-colors ${
+                                className={`touch-expand h-9 min-w-11 px-3 rounded-[7px] text-[12.5px] font-semibold transition-colors ${
                                     i === targetIdx
                                         ? 'bg-primary text-on-color'
                                         : 'bg-surface-inset text-fg-muted hover:text-fg'
diff --git a/frontend/src/pages/settings/GeneralSettingsPage.jsx b/frontend/src/pages/settings/GeneralSettingsPage.jsx
index 75434ba2..6969ad83 100755
--- a/frontend/src/pages/settings/GeneralSettingsPage.jsx
+++ b/frontend/src/pages/settings/GeneralSettingsPage.jsx
@@ -341,7 +341,7 @@ export const GeneralSettingsPage = () => {
                                         aria-label={a.label}
                                         aria-pressed={active}
                                         title={a.label}
-                                        className="w-8 h-8 rounded-lg transition-transform hover:scale-105"
+                                        className="touch-expand w-9 h-9 rounded-lg transition-transform hover:scale-105"
                                         style={{
                                             background: a.brand,
                                             boxShadow: active
diff --git a/frontend/src/pages/settings/InstancesPage.jsx b/frontend/src/pages/settings/InstancesPage.jsx
index d9201252..3caa9be1 100755
--- a/frontend/src/pages/settings/InstancesPage.jsx
+++ b/frontend/src/pages/settings/InstancesPage.jsx
@@ -672,7 +672,7 @@ export const InstancesPage = () => {
                 </span>
                 <span>Auto-sync library from instances</span>
                 <select
-                    className="bg-surface border border-border rounded-md px-2 py-1 text-fg text-[13px] disabled:opacity-50"
+                    className="h-11 bg-surface border border-border rounded-md px-2 text-fg text-[13px] disabled:opacity-50"
                     value={(SYNC_PRESETS.find(p => p.value === syncSchedule) || {}).key ?? 'custom'}
                     disabled={!syncScheduleLoaded || syncScheduleSaving}
                     onChange={e => {
diff --git a/frontend/src/pages/settings/JobsPage.jsx b/frontend/src/pages/settings/JobsPage.jsx
index ec5ef133..6ad57c36 100644
--- a/frontend/src/pages/settings/JobsPage.jsx
+++ b/frontend/src/pages/settings/JobsPage.jsx
@@ -429,7 +429,7 @@ export const JobsPage = () => {
                         key={filter.key}
                         type="button"
                         onClick={() => setActiveFilter(filter.key)}
-                        className={`px-3 py-1 rounded-full font-mono text-[12.5px] font-medium cursor-pointer border transition-colors ${
+                        className={`touch-expand inline-flex items-center justify-center min-h-9 min-w-11 px-3 rounded-full font-mono text-[12.5px] font-medium cursor-pointer border transition-colors ${
                             activeFilter === filter.key
                                 ? 'bg-primary/15 text-fg border-primary/40'
                                 : 'bg-surface text-fg-muted border-border hover:text-fg'
diff --git a/frontend/src/pages/settings/NotificationsPage.jsx b/frontend/src/pages/settings/NotificationsPage.jsx
index 44091e51..ff08377f 100755
--- a/frontend/src/pages/settings/NotificationsPage.jsx
+++ b/frontend/src/pages/settings/NotificationsPage.jsx
@@ -535,12 +535,12 @@ const DestinationCard = ({
                         {targetLine(d)}
                     </div>
                 </div>
-                <div className="shrink-0 flex items-center gap-1">
+                <div className="shrink-0 flex items-center gap-2.5">
                     <button
                         type="button"
                         onClick={onTest}
                         disabled={testing}
-                        className="h-[30px] px-[11px] rounded-[7px] bg-transparent border border-border text-fg-data text-[12px] font-semibold transition-colors hover:bg-[#221c45] disabled:opacity-60"
+                        className="touch-expand h-9 px-[11px] rounded-[7px] bg-transparent border border-border text-fg-data text-[12px] font-semibold transition-colors hover:bg-[#221c45] disabled:opacity-60"
                     >
                         {testing ? 'Testing…' : 'Test'}
                     </button>
@@ -657,7 +657,7 @@ const IconBtn = ({ icon, label, onClick }) => (
         type="button"
         aria-label={label}
         onClick={onClick}
-        className="w-[30px] h-[30px] rounded-[7px] bg-transparent text-fg-subtle flex items-center justify-center transition-colors hover:bg-[#221c45] hover:text-fg-muted"
+        className="touch-expand w-9 h-9 rounded-[7px] bg-transparent text-fg-subtle flex items-center justify-center transition-colors hover:bg-[#221c45] hover:text-fg-muted"
     >
         <span className="material-symbols-outlined text-[16px]">{icon}</span>
     </button>
diff --git a/frontend/src/pages/settings/SystemSettingsPage.jsx b/frontend/src/pages/settings/SystemSettingsPage.jsx
index dd426cf2..21925c5c 100644
--- a/frontend/src/pages/settings/SystemSettingsPage.jsx
+++ b/frontend/src/pages/settings/SystemSettingsPage.jsx
@@ -74,7 +74,7 @@ const InsetSelect = ({ value, onChange, disabled, children, ariaLabel }) => (
             onChange={onChange}
             disabled={disabled}
             aria-label={ariaLabel}
-            className="appearance-none h-[34px] pl-3 pr-8 rounded-lg bg-surface-inset border border-border font-mono text-[13px] text-fg cursor-pointer disabled:opacity-50 focus:border-primary outline-none"
+            className="appearance-none h-11 pl-3 pr-8 rounded-lg bg-surface-inset border border-border font-mono text-[13px] text-fg cursor-pointer disabled:opacity-50 focus:border-primary outline-none"
         >
             {children}
         </select>
diff --git a/frontend/src/pages/settings/WebhooksPage.jsx b/frontend/src/pages/settings/WebhooksPage.jsx
index 60de411f..5ce1ac50 100644
--- a/frontend/src/pages/settings/WebhooksPage.jsx
+++ b/frontend/src/pages/settings/WebhooksPage.jsx
@@ -338,7 +338,7 @@ const AutoSetupBoard = () => {
                             type="button"
                             disabled={disabled}
                             onClick={() => runProvision(driftNames)}
-                            className="h-8 px-3 rounded-[7px] bg-warning/15 text-warning text-xs font-semibold hover:bg-warning/25 transition-colors disabled:opacity-50"
+                            className="touch-expand h-9 px-3 rounded-[7px] bg-warning/15 text-warning text-xs font-semibold hover:bg-warning/25 transition-colors disabled:opacity-50"
                         >
                             Fix all ({driftNames.length})
                         </button>
@@ -347,7 +347,7 @@ const AutoSetupBoard = () => {
                         type="button"
                         disabled={disabled || setupNames.length === 0}
                         onClick={() => runProvision(['all'])}
-                        className="h-8 px-3 rounded-[7px] bg-primary text-on-color text-xs font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
+                        className="touch-expand h-9 px-3 rounded-[7px] bg-primary text-on-color text-xs font-semibold hover:opacity-90 transition-opacity disabled:opacity-50"
                     >
                         {busy ? 'Working…' : 'Set up webhooks'}
                     </button>
diff --git a/frontend/src/pages/settings/modules/ModuleSettingsPage.jsx b/frontend/src/pages/settings/modules/ModuleSettingsPage.jsx
index 6cb2b3e4..424fd8a1 100755
--- a/frontend/src/pages/settings/modules/ModuleSettingsPage.jsx
+++ b/frontend/src/pages/settings/modules/ModuleSettingsPage.jsx
@@ -276,7 +276,7 @@ const ModuleSettingsContent = ({ moduleKey }) => {
                         <button
                             type="button"
                             onClick={() => setOpenMoreModes(s => ({ ...s, [meta.id]: true }))}
-                            className="mt-2 inline-flex items-center gap-1 text-[12.5px] text-fg-subtle hover:text-fg"
+                            className="mt-2 inline-flex items-center min-h-11 gap-1 text-[12.5px] text-fg-subtle hover:text-fg"
                         >
                             <span className="material-symbols-outlined text-[16px]">
                                 expand_more
@@ -396,8 +396,10 @@ const ModuleSettingsContent = ({ moduleKey }) => {
                             </p>
                         )}
                     </div>
+                    {/* gap-y-3 clears the Toggle's 44px coarse hit box (11px taller than
+                        the pill itself) once this header wraps. */}
                     {activeModule && (
-                        <div className="flex flex-wrap items-center gap-2.5 shrink-0 max-w-full">
+                        <div className="flex flex-wrap items-center gap-x-2.5 gap-y-3 shrink-0 max-w-full">
                             {hasDryRun && isRunnable && (
                                 <label className="flex items-center gap-2 text-[13px] text-fg-muted cursor-pointer select-none">
                                     Dry run