From 4fcaa9b56cfcb40baf9c4154121023b5f5e41b10 Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Thu, 3 Sep 2026 15:26:21 +0000
Subject: [PATCH] fix: sweep sub-44px icon buttons tree-wide and widen
 tap-target guard (#5904)

Every icon-only button with tight p-0.5/p-1/p-1.5 padding now carries
min-h-[44px] min-w-[44px] inline-flex items-center justify-center, and
action rows holding two of them widen from gap-1 to gap-2. Icon sizes
are untouched. The a11yConventions tap-target rule moves from
src/components/meatspace/ to the whole client tree (same padding-shape
filter and self-probe); sibling-owned SongBook surfaces are excluded
for the parallel change that owns them.
---
 client/src/a11yConventions.test.js            | 34 +++++++++++--------
 client/src/components/CatalogCastPanel.jsx    |  2 +-
 client/src/components/FolderPicker.jsx        |  2 +-
 client/src/components/Layout.jsx              |  2 +-
 client/src/components/ThemeSwitcher.jsx       |  2 +-
 .../components/apps/AppOperationBanner.jsx    |  2 +-
 client/src/components/apps/EditAppDrawer.jsx  |  2 +-
 .../src/components/brain/links/LinkChip.jsx   |  2 +-
 client/src/components/brain/tabs/InboxTab.jsx | 22 ++++++------
 client/src/components/brain/tabs/LinksTab.jsx |  8 ++---
 .../src/components/brain/tabs/MemoryTab.jsx   | 10 +++---
 client/src/components/brain/tabs/NotesTab.jsx |  8 ++---
 client/src/components/brain/tabs/TrustTab.jsx |  2 +-
 client/src/components/calendar/ConfigTab.jsx  |  2 +-
 client/src/components/calendar/ReviewTab.jsx  | 10 +++---
 .../cos/ActionableInsightsBanner.jsx          |  2 +-
 client/src/components/cos/JobCard.jsx         |  8 ++---
 client/src/components/cos/TaskAddForm.jsx     |  2 +-
 client/src/components/cos/tabs/AgentCard.jsx  | 10 +++---
 .../components/cos/tabs/MemoryEditModal.jsx   |  2 +-
 client/src/components/cos/tabs/MindTab.jsx    |  2 +-
 client/src/components/cos/tabs/RunsTab.jsx    |  8 ++---
 client/src/components/cos/tabs/TaskItem.jsx   | 12 +++----
 .../cos/tabs/schedule/AppTaskTypeSection.jsx  |  2 +-
 .../src/components/dashboard/LayoutEditor.jsx |  6 ++--
 .../dashboard/builtins/DailyDriverWidget.jsx  |  2 +-
 .../digital-twin/ListEnrichment.jsx           |  2 +-
 .../digital-twin/NextActionBanner.jsx         |  4 +--
 .../digital-twin/tabs/AccountsTab.jsx         |  2 +-
 .../digital-twin/tabs/AppearanceTab.jsx       |  2 +-
 .../digital-twin/tabs/AutobiographyTab.jsx    |  2 +-
 .../fableloom/LoomEpisodeOutlinePlanner.jsx   |  2 +-
 .../fableloom/LoomHostedSessionModal.jsx      |  2 +-
 .../components/fableloom/LoomSeriesPlan.jsx   |  6 ++--
 .../components/feature-agents/OutputTab.jsx   |  2 +-
 .../components/goals/GoalLinkedActivities.jsx |  2 +-
 .../components/goals/GoalLinkedCalendars.jsx  |  2 +-
 .../src/components/goals/GoalProgressLog.jsx  |  4 +--
 client/src/components/goals/GoalTodoList.jsx  |  2 +-
 client/src/components/goals/GoalsListView.jsx |  4 +--
 .../src/components/media/MediaJobsQueue.jsx   |  2 +-
 client/src/components/media/MediaLightbox.jsx | 10 +++---
 .../src/components/media/PromptFromMedia.jsx  |  2 +-
 .../components/media/VideoTimelineLanes.jsx   |  2 +-
 .../media/VideoTimelineLanes.test.jsx         |  6 ++--
 client/src/components/messages/DraftsTab.jsx  | 10 +++---
 .../src/components/messages/IMessageTab.jsx   |  4 +--
 client/src/components/music/AlbumsManager.jsx |  8 ++---
 .../src/components/musicVideo/SceneCard.jsx   |  8 ++---
 .../components/onboarding/FirstRunCard.jsx    |  2 +-
 .../persona/PersonaMasterDetail.jsx           |  2 +-
 client/src/components/pipeline/CanonCard.jsx  | 16 ++++-----
 .../pipeline/ImagePromptCandidates.jsx        |  2 +-
 .../pipeline/arcCanvas/IssueRow.jsx           |  2 +-
 .../pipeline/arcCanvas/SeasonRow.jsx          |  4 +--
 .../pipeline/arcCanvas/TickingClockEditor.jsx |  2 +-
 .../manuscript/ManuscriptCommentCard.jsx      |  4 +--
 .../pipeline/stages/ComicPagesStage.jsx       |  2 +-
 .../pipeline/stages/ComicScriptStage.jsx      |  2 +-
 .../pipeline/stages/PovRewritePanel.jsx       |  2 +-
 .../pipeline/stages/StoryboardsStage.jsx      |  4 +--
 .../components/privacy/PrivacyChangesTab.jsx  |  8 ++---
 client/src/components/quotaBurn/JobRow.jsx    |  2 +-
 .../src/components/settings/ApiAccessTab.jsx  |  2 +-
 .../src/components/settings/DatabaseTab.jsx   |  2 +-
 .../settings/LocalLlmRuntimesView.jsx         |  2 +-
 .../settings/LocalModelAssessments.jsx        |  8 ++---
 .../components/settings/LocalSetupPanel.jsx   |  2 +-
 .../settings/ModelCapabilityTests.jsx         |  2 +-
 .../components/settings/MtplxServerCard.jsx   |  2 +-
 .../settings/RuntimeServersCard.jsx           |  2 +-
 .../settings/SlotstreamServerCard.jsx         |  2 +-
 .../src/components/shell/ShellImageDrop.jsx   |  2 +-
 .../components/songs/MidiVisualization.jsx    |  8 ++---
 .../components/songs/ReferenceAnalysis.jsx    | 14 ++++----
 client/src/components/songs/RoundEditForm.jsx |  6 ++--
 .../src/components/songs/SongRecordings.jsx   |  6 ++--
 .../src/components/songs/SongScoreParts.jsx   |  4 +--
 .../components/sprites/AssetPromptSection.jsx |  2 +-
 client/src/components/sprites/LoopTrimmer.jsx |  6 ++--
 .../components/sprites/ReferenceWorkflow.jsx  |  2 +-
 .../src/components/sprites/SpriteCatalog.jsx  |  6 ++--
 .../components/sprites/SpriteDetailHeader.jsx |  4 +--
 .../src/components/sync/SyncDetailDrawer.jsx  |  2 +-
 .../universe/VisionDescribeModal.jsx          |  2 +-
 .../universeBuilder/CompositeSheetsEditor.jsx | 12 +++----
 .../universeBuilder/UniverseBibleTab.jsx      |  4 +--
 .../UniverseCategoryEditor.jsx                | 24 ++++++-------
 .../UniverseStyleReferences.jsx               |  2 +-
 .../src/components/videoGen/IcLoraPanel.jsx   |  2 +-
 .../src/components/videoGen/KeyframePanel.jsx |  2 +-
 client/src/components/voice/VoicePicker.jsx   |  2 +-
 client/src/components/voice/VoiceWidget.jsx   |  4 +--
 client/src/components/wiki/tabs/BrowseTab.jsx |  8 ++---
 client/src/components/wiki/tabs/GraphTab.jsx  |  4 +--
 client/src/hooks/useAgentFeedbackToast.jsx    |  6 ++--
 client/src/pages/ApiExplorer.jsx              |  4 +--
 client/src/pages/Browser.jsx                  |  2 +-
 client/src/pages/ChiefOfStaff.jsx             |  6 ++--
 client/src/pages/FableLoom.jsx                |  2 +-
 client/src/pages/HistoryPage.jsx              |  2 +-
 client/src/pages/ImageGen.jsx                 |  2 +-
 client/src/pages/Instances.jsx                |  8 ++---
 client/src/pages/Loops.jsx                    | 10 +++---
 client/src/pages/Loras.jsx                    |  4 +--
 client/src/pages/MediaCollectionDetail.jsx    |  2 +-
 client/src/pages/MediaHistory.jsx             |  2 +-
 client/src/pages/MoodBoardDetail.jsx          |  6 ++--
 client/src/pages/MoodBoards.jsx               |  2 +-
 client/src/pages/PipelineSeries.jsx           |  4 +--
 client/src/pages/PromptManager.jsx            |  6 ++--
 client/src/pages/Review.jsx                   | 18 +++++-----
 client/src/pages/RoundEditor.jsx              |  2 +-
 client/src/pages/RunnerPage.jsx               |  2 +-
 client/src/pages/ThreejsModelDetail.jsx       |  2 +-
 client/src/pages/Tribe.jsx                    |  2 +-
 client/src/pages/VideoGen.jsx                 |  2 +-
 client/src/pages/VideoTimeline.jsx            |  2 +-
 client/src/pages/VideoTimelineEditor.jsx      |  2 +-
 client/src/pages/WritersRoom.jsx              |  2 +-
 120 files changed, 284 insertions(+), 280 deletions(-)

diff --git a/client/src/a11yConventions.test.js b/client/src/a11yConventions.test.js
index df241a30f7..3f345c99d5 100644
--- a/client/src/a11yConventions.test.js
+++ b/client/src/a11yConventions.test.js
@@ -32,9 +32,9 @@
  *   6. An `<img>` with no `alt`, which is announced by its `src` — a hashed
  *      filename or a blob URL. `alt=""` is the correct spelling for a
  *      decorative image and passes; only the omission is the bug.
- *   7. An icon-only `<button>` in the MeatSpace health-logging tree sized to
- *      its bare icon (`p-1` around a 12-14px glyph = a 22px target) instead of
- *      the 44px floor the rest of the app enforces.
+ *   7. An icon-only `<button>` sized to its bare icon (`p-1` around a
+ *      12-14px glyph = a 22px target) instead of the 44px floor the rest of
+ *      the app enforces.
  *
  * Scoped to git-tracked `.jsx` under `client/src` so an untracked scratch file
  * can't fail the suite.
@@ -3266,7 +3266,7 @@ describe('a11y conventions', () => {
     expect(offenders, `Close button under the 44px touch-target minimum — add min-h-[44px] min-w-[44px] + flex items-center justify-center (see Drawer.jsx:106):\n${offenders.join('\n')}`).toEqual([]);
   });
 
-  it("meets the 44px touch-target minimum on the MeatSpace log-row icon buttons (#5703)", () => {
+  it("meets the 44px touch-target minimum on icon-only buttons (#5703, #5904)", () => {
     // The MeatSpace tabs are the app's most phone-centric surface — a drink or
     // a nicotine entry is logged one-handed — and their inline row controls
     // kept shipping as a bare `p-1`/`p-1.5` around a 12-14px icon: a 22-26px
@@ -3277,14 +3277,18 @@ describe('a11y conventions', () => {
     // `inline-flex items-center justify-center`), never the icon: icon size is
     // what sets the log row's density, and growing it would reflow the tables.
     //
-    // Two scopings, both deliberate. `components/meatspace/` rather than the
-    // whole tree: the same shape survives in a handful of desktop-first views,
-    // and widening here would turn one regression guard into a tree-wide sweep.
-    // And only the `p-0.5`/`p-1`/`p-1.5` shape, rather than every icon button
-    // missing an explicit min: one that reaches 44px through generous padding
-    // (`p-3` around a 20px glyph), or that carries no padding class at all, is a
-    // different question, and folding it in would make the guard report dozens
-    // of controls this change never looked at.
+    // Scoped to the whole tree since #5904 swept the same shape outside
+    // MeatSpace. Only the `p-0.5`/`p-1`/`p-1.5` shape counts, rather than every
+    // icon button missing an explicit min: one that reaches 44px through
+    // generous padding (`p-3` around a 20px glyph), or that carries no padding
+    // class at all, is a different question, and folding it in would make the
+    // guard report dozens of controls this change never looked at.
+    //
+    // Sibling-owned SongBook surfaces are excluded — a parallel change owns
+    // that tree and sweeps its own buttons.
+    const isSiblingOwned = (file) => file === "src/pages/SongBook.jsx"
+      || file === "src/pages/SongBookViewer.jsx"
+      || file.startsWith("src/components/songbook/");
     const TIGHT_PADDING = /(?:^|\s)p-(?:0\.5|1|1\.5)(?:\s|$)/;
     const offendersIn = (file, src) => {
       const out = [];
@@ -3312,11 +3316,11 @@ describe('a11y conventions', () => {
     // from client/), not this file's location — assert the filter really
     // selected the tree, so a change to the walker's path shape fails loudly
     // here instead of turning the rule into a vacuous pass over zero files.
-    const scanned = trackedJsxFiles().filter((file) => file.startsWith("src/components/meatspace/"));
-    expect(scanned.length, "no MeatSpace sources matched — has trackedJsxFiles() changed its path shape?").toBeGreaterThan(20);
+    const scanned = trackedJsxFiles().filter((file) => !isSiblingOwned(file));
+    expect(scanned.length, "no client sources matched — has trackedJsxFiles() changed its path shape?").toBeGreaterThan(500);
 
     const offenders = [];
     for (const file of scanned) offenders.push(...offendersIn(file, rawSourceOf(file)));
-    expect(offenders, `MeatSpace icon-only <button> under the 44px touch-target minimum — add min-h-[44px] min-w-[44px] inline-flex items-center justify-center and leave the icon size alone:\n${offenders.join("\n")}`).toEqual([]);
+    expect(offenders, `Icon-only <button> under the 44px touch-target minimum — add min-h-[44px] min-w-[44px] inline-flex items-center justify-center and leave the icon size alone:\n${offenders.join("\n")}`).toEqual([]);
   });
 });
diff --git a/client/src/components/CatalogCastPanel.jsx b/client/src/components/CatalogCastPanel.jsx
index 5576462508..5e849ce157 100644
--- a/client/src/components/CatalogCastPanel.jsx
+++ b/client/src/components/CatalogCastPanel.jsx
@@ -157,7 +157,7 @@ export default function CatalogCastPanel({ refKind, refId, refLabel }) {
                   onClick={() => handleUnlink(row)}
                   disabled={rowBusy}
                   aria-label={`Unlink ${ingredient.name || ingredient.id}`}
-                  className="p-1.5 rounded text-gray-500 hover:text-port-error hover:bg-port-bg disabled:opacity-50"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-500 hover:text-port-error hover:bg-port-bg disabled:opacity-50"
                   title="Unlink from this record"
                 >
                   {rowBusy
diff --git a/client/src/components/FolderPicker.jsx b/client/src/components/FolderPicker.jsx
index 571f6cac02..d059cd5faf 100644
--- a/client/src/components/FolderPicker.jsx
+++ b/client/src/components/FolderPicker.jsx
@@ -134,7 +134,7 @@ export default function FolderPicker({ value, onChange, defaultPath }) {
             <button
               type="button"
               onClick={() => handleNavigate('~')}
-              className="p-1 text-gray-500 hover:text-white shrink-0"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-white shrink-0"
               title="Home directory" aria-label="Home directory"
             >
               <Home size={16} />
diff --git a/client/src/components/Layout.jsx b/client/src/components/Layout.jsx
index c054e29fb0..0d3c4cb501 100644
--- a/client/src/components/Layout.jsx
+++ b/client/src/components/Layout.jsx
@@ -1238,7 +1238,7 @@ export default function Layout() {
             <button
               type="button"
               onClick={() => setCollapsed(true)}
-              className="hidden lg:flex p-1 text-gray-500 hover:text-white transition-colors"
+              className="min-h-[44px] min-w-[44px] items-center justify-center hidden lg:flex p-1 text-gray-500 hover:text-white transition-colors"
               title="Collapse sidebar"
               aria-label="Collapse sidebar"
             >
diff --git a/client/src/components/ThemeSwitcher.jsx b/client/src/components/ThemeSwitcher.jsx
index c6de048f51..b6c78be71e 100644
--- a/client/src/components/ThemeSwitcher.jsx
+++ b/client/src/components/ThemeSwitcher.jsx
@@ -93,7 +93,7 @@ export default function ThemeSwitcher({ position = 'above', className = '' }) {
             setOpen(true);
           }
         }}
-        className="p-1.5 text-gray-500 hover:text-port-accent transition-colors"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-accent transition-colors"
         title="Switch theme"
         aria-label={`Switch theme. Current theme: ${theme?.label ?? 'Classic Midnight'}`}
         aria-haspopup="menu"
diff --git a/client/src/components/apps/AppOperationBanner.jsx b/client/src/components/apps/AppOperationBanner.jsx
index e393b25f87..c406abf40f 100644
--- a/client/src/components/apps/AppOperationBanner.jsx
+++ b/client/src/components/apps/AppOperationBanner.jsx
@@ -50,7 +50,7 @@ export default function AppOperationBanner({ appName, type, steps, error, comple
         {onDismiss && (
           <button
             onClick={onDismiss}
-            className="shrink-0 p-1 rounded text-gray-400 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-port-accent"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 p-1 rounded text-gray-400 hover:text-white focus:outline-hidden focus:ring-2 focus:ring-port-accent"
             aria-label={`Dismiss ${name} operation status`}
           >
             <X size={16} aria-hidden="true" />
diff --git a/client/src/components/apps/EditAppDrawer.jsx b/client/src/components/apps/EditAppDrawer.jsx
index 42baf559d3..16cc7880fd 100644
--- a/client/src/components/apps/EditAppDrawer.jsx
+++ b/client/src/components/apps/EditAppDrawer.jsx
@@ -470,7 +470,7 @@ export default function EditAppDrawer({ app, onClose, onSave }) {
                         <button
                           type="button"
                           onClick={() => copyToClipboard(tlsResult.snippet, 'Snippet copied')}
-                          className="absolute top-1 right-1 p-1 bg-port-border/60 hover:bg-port-border rounded"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-1 right-1 p-1 bg-port-border/60 hover:bg-port-border rounded"
                           aria-label="Copy snippet"
                         >
                           <Copy size={12} />
diff --git a/client/src/components/brain/links/LinkChip.jsx b/client/src/components/brain/links/LinkChip.jsx
index d341d93c28..96de252b35 100644
--- a/client/src/components/brain/links/LinkChip.jsx
+++ b/client/src/components/brain/links/LinkChip.jsx
@@ -49,7 +49,7 @@ export default function LinkChip({ link, onRemove, draggable }) {
       {onRemove && (
         <button
           onClick={() => onRemove(link)}
-          className="shrink-0 p-0.5 text-gray-600 hover:text-port-error opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 p-0.5 text-gray-600 hover:text-port-error opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
           title="Remove from bucket" aria-label="Remove from bucket"
         >
           <X size={13} />
diff --git a/client/src/components/brain/tabs/InboxTab.jsx b/client/src/components/brain/tabs/InboxTab.jsx
index 0145b278c9..30892d0d8e 100644
--- a/client/src/components/brain/tabs/InboxTab.jsx
+++ b/client/src/components/brain/tabs/InboxTab.jsx
@@ -424,7 +424,7 @@ export default function InboxTab({ onRefresh, settings }) {
             <button
               type="button"
               onClick={() => { fetchInbox(); onRefresh?.(); }}
-              className="p-1 text-gray-400 hover:text-white transition-colors"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
               title="Refresh inbox"
               aria-label="Refresh inbox"
             >
@@ -471,7 +471,7 @@ export default function InboxTab({ onRefresh, settings }) {
                             rows={3}
                             autoFocus
                           />
-                          <div className="flex flex-col gap-1">
+                          <div className="flex flex-col gap-2">
                             <button
                               onClick={() => handleSaveEdit(entry.id)}
                               className="p-1 min-h-[44px] min-w-[44px] flex items-center justify-center text-port-success hover:bg-port-success/20 rounded transition-colors"
@@ -491,7 +491,7 @@ export default function InboxTab({ onRefresh, settings }) {
                       ) : (
                         <>
                           <p className="text-white flex-1">{entry.capturedText}</p>
-                          <div className="flex gap-1">
+                          <div className="flex gap-2">
                             <button
                               onClick={() => handleEdit(entry)}
                               className="p-1 min-h-[44px] min-w-[44px] flex items-center justify-center text-gray-400 hover:text-white transition-colors"
@@ -645,17 +645,17 @@ export default function InboxTab({ onRefresh, settings }) {
                           rows={3}
                           autoFocus
                         />
-                        <div className="flex flex-col gap-1">
+                        <div className="flex flex-col gap-2">
                           <button
                             onClick={() => handleSaveEdit(entry.id)}
-                            className="p-1 text-port-success hover:bg-port-success/20 rounded transition-colors"
+                            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-success hover:bg-port-success/20 rounded transition-colors"
                             title="Save changes" aria-label="Save changes"
                           >
                             <Save size={14} />
                           </button>
                           <button
                             onClick={handleCancelEdit}
-                            className="p-1 text-gray-400 hover:bg-port-border/50 rounded transition-colors"
+                            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:bg-port-border/50 rounded transition-colors"
                             title="Cancel editing" aria-label="Cancel editing"
                           >
                             <X size={14} />
@@ -665,17 +665,17 @@ export default function InboxTab({ onRefresh, settings }) {
                     ) : (
                       <>
                         <p className="text-white flex-1">{entry.capturedText}</p>
-                        <div className="flex gap-1">
+                        <div className="flex gap-2">
                           <button
                             onClick={() => handleEdit(entry)}
-                            className="p-1 text-gray-400 hover:text-white transition-colors"
+                            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
                             title="Edit text" aria-label="Edit text"
                           >
                             <Edit2 size={14} />
                           </button>
                           <button
                             onClick={() => setConfirmingDeleteId(entry.id)}
-                            className="p-1 text-gray-400 hover:text-port-error transition-colors"
+                            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error transition-colors"
                             title="Delete entry" aria-label="Delete entry"
                           >
                             <Trash2 size={14} />
@@ -763,7 +763,7 @@ export default function InboxTab({ onRefresh, settings }) {
                       <div className="flex gap-1">
                         <button
                           onClick={() => setConfirmingDeleteId(entry.id)}
-                          className="p-1 text-gray-400 hover:text-port-error transition-colors"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error transition-colors"
                           title="Delete entry" aria-label="Delete entry"
                         >
                           <Trash2 size={14} />
@@ -909,7 +909,7 @@ export default function InboxTab({ onRefresh, settings }) {
                         <div className="flex gap-1">
                           <button
                             onClick={() => setConfirmingDeleteId(entry.id)}
-                            className="p-1 text-gray-500 hover:text-port-error transition-colors"
+                            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                             title="Delete entry" aria-label="Delete entry"
                           >
                             <Trash2 size={14} />
diff --git a/client/src/components/brain/tabs/LinksTab.jsx b/client/src/components/brain/tabs/LinksTab.jsx
index 487c4f2a90..ca7ccaf06a 100644
--- a/client/src/components/brain/tabs/LinksTab.jsx
+++ b/client/src/components/brain/tabs/LinksTab.jsx
@@ -610,7 +610,7 @@ export default function LinksTab({ onRefresh }) {
         {search && (
           <button
             onClick={() => setSearch('')}
-            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-white transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-white transition-colors"
             title="Clear search" aria-label="Clear search"
           >
             <X size={14} />
@@ -760,17 +760,17 @@ export default function LinksTab({ onRefresh }) {
                     )}
                   </div>
 
-                  <div className="flex items-center gap-1 shrink-0">
+                  <div className="flex items-center gap-2 shrink-0">
                     <button
                       onClick={() => handleEdit(link)}
-                      className="p-1.5 text-gray-400 hover:text-white transition-colors"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white transition-colors"
                       title="Edit" aria-label="Edit"
                     >
                       <Edit2 size={14} />
                     </button>
                     <button
                       onClick={() => setConfirmingDeleteId(link.id)}
-                      className="p-1.5 text-gray-400 hover:text-port-error transition-colors"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-port-error transition-colors"
                       title="Delete" aria-label="Delete"
                     >
                       <Trash2 size={14} />
diff --git a/client/src/components/brain/tabs/MemoryTab.jsx b/client/src/components/brain/tabs/MemoryTab.jsx
index 47bc23b3b7..797a409358 100644
--- a/client/src/components/brain/tabs/MemoryTab.jsx
+++ b/client/src/components/brain/tabs/MemoryTab.jsx
@@ -674,11 +674,11 @@ export default function MemoryTab({ onRefresh, fixedType = null }) {
             </div>
           </div>
 
-          <div className="flex items-center gap-1">
+          <div className="flex items-center gap-2">
             {(activeType === 'projects' || activeType === 'ideas' || activeType === 'admin') && record.status !== 'done' && (
               <button
                 onClick={() => handleMarkDone(record)}
-                className="p-1.5 text-gray-400 hover:text-port-success rounded hover:bg-port-success/20"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-port-success rounded hover:bg-port-success/20"
                 title="Mark done" aria-label="Mark done"
               >
                 <CheckCircle2 size={14} />
@@ -686,7 +686,7 @@ export default function MemoryTab({ onRefresh, fixedType = null }) {
             )}
             <button
               onClick={() => handleSendToCatalog(record)}
-              className="p-1.5 text-gray-400 hover:text-port-accent-2 rounded hover:bg-port-accent-2/20"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-port-accent-2 rounded hover:bg-port-accent-2/20"
               title="Send to Catalog"
               aria-label="Send to Catalog"
             >
@@ -694,14 +694,14 @@ export default function MemoryTab({ onRefresh, fixedType = null }) {
             </button>
             <button
               onClick={() => startEdit(record)}
-              className="p-1.5 text-gray-400 hover:text-white rounded hover:bg-port-border/50"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white rounded hover:bg-port-border/50"
               title="Edit" aria-label="Edit"
             >
               <Edit2 size={14} />
             </button>
             <button
               onClick={() => requestDelete(record.id)}
-              className="p-1.5 text-gray-400 hover:text-port-error rounded hover:bg-port-error/20"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-port-error rounded hover:bg-port-error/20"
               title="Delete" aria-label="Delete"
             >
               <Trash2 size={14} />
diff --git a/client/src/components/brain/tabs/NotesTab.jsx b/client/src/components/brain/tabs/NotesTab.jsx
index 365a497688..e4446ccbdd 100644
--- a/client/src/components/brain/tabs/NotesTab.jsx
+++ b/client/src/components/brain/tabs/NotesTab.jsx
@@ -372,14 +372,14 @@ export default function NotesTab() {
           )}
           <button
             onClick={() => { loadTags(); setShowTags(!showTags); }}
-            className={`ml-auto p-0.5 rounded ${showTags ? 'text-port-accent' : 'text-gray-500 hover:text-white'}`}
+            className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center ml-auto p-0.5 rounded ${showTags ? 'text-port-accent' : 'text-gray-500 hover:text-white'}`}
             title="Tags" aria-label="Tags"
           >
             <Tag size={12} />
           </button>
           <button
             onClick={loadNotes}
-            className="p-0.5 rounded text-gray-500 hover:text-white"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 rounded text-gray-500 hover:text-white"
             title="Refresh" aria-label="Refresh"
           >
             <RefreshCw size={12} className={scanning ? 'animate-spin' : ''} />
@@ -465,7 +465,7 @@ export default function NotesTab() {
               <button
                 onClick={() => setSelectedNote(null)}
                 aria-label="Back"
-                className="p-1 rounded hover:bg-port-card text-gray-400 hover:text-white md:hidden"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded hover:bg-port-card text-gray-400 hover:text-white md:hidden"
               >
                 <ArrowLeft size={16} />
               </button>
@@ -512,7 +512,7 @@ export default function NotesTab() {
                 )}
                 <button
                   onClick={() => requestDelete(selectedNote.path)}
-                  className="p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-port-error"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-port-error"
                   title="Delete note" aria-label="Delete note"
                 >
                   <Trash2 size={14} />
diff --git a/client/src/components/brain/tabs/TrustTab.jsx b/client/src/components/brain/tabs/TrustTab.jsx
index e1ecb15c54..d026eb6844 100644
--- a/client/src/components/brain/tabs/TrustTab.jsx
+++ b/client/src/components/brain/tabs/TrustTab.jsx
@@ -268,7 +268,7 @@ export default function TrustTab({ onRefresh }) {
 
                   <button
                     onClick={() => setExpandedId(isExpanded ? null : entry.id)}
-                    className="p-1.5 text-gray-400 hover:text-white rounded hover:bg-port-border/50"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white rounded hover:bg-port-border/50"
                     title={isExpanded ? 'Hide details' : 'View details'}
                     aria-label={isExpanded ? 'Hide details' : 'View details'}
                   >
diff --git a/client/src/components/calendar/ConfigTab.jsx b/client/src/components/calendar/ConfigTab.jsx
index b9599c9b30..fa903bb3b6 100644
--- a/client/src/components/calendar/ConfigTab.jsx
+++ b/client/src/components/calendar/ConfigTab.jsx
@@ -293,7 +293,7 @@ export default function ConfigTab({ accounts, setAccounts }) {
                         onClick={() => toggleExpand(account.id)}
                         aria-label={isExpanded ? `Collapse calendars for ${account.name}` : `Expand calendars for ${account.name}`}
                         aria-expanded={isExpanded}
-                        className="p-0.5 text-gray-500 hover:text-white"
+                        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-500 hover:text-white"
                       >
                         {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
                       </button>
diff --git a/client/src/components/calendar/ReviewTab.jsx b/client/src/components/calendar/ReviewTab.jsx
index 39ad3569a1..4a9339e2f8 100644
--- a/client/src/components/calendar/ReviewTab.jsx
+++ b/client/src/components/calendar/ReviewTab.jsx
@@ -111,7 +111,7 @@ export default function ReviewTab() {
       {/* Date Navigation */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <button aria-label="Previous" onClick={() => changeDate(-1)} className="p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-white">
+          <button aria-label="Previous" onClick={() => changeDate(-1)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-white">
             <ChevronLeft size={18} />
           </button>
           <input
@@ -121,7 +121,7 @@ export default function ReviewTab() {
             aria-label="Review date"
             className="bg-port-bg border border-port-border rounded px-3 py-1.5 text-sm text-white focus:outline-none focus:border-port-accent"
           />
-          <button aria-label="Next" onClick={() => changeDate(1)} className="p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-white">
+          <button aria-label="Next" onClick={() => changeDate(1)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-white">
             <ChevronRight size={18} />
           </button>
           {!isToday && (
@@ -240,11 +240,11 @@ export default function ReviewTab() {
                     </div>
 
                     {!isReviewed && !isEditing && (
-                      <div className="flex items-center gap-1 shrink-0">
+                      <div className="flex items-center gap-2 shrink-0">
                         <button
                           onClick={() => handleConfirm(event, true)}
                           disabled={confirming === eventId}
-                          className="p-1.5 rounded hover:bg-port-success/20 text-gray-500 hover:text-port-success transition-colors"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-success/20 text-gray-500 hover:text-port-success transition-colors"
                           title="Confirm - it happened" aria-label="Confirm - it happened"
                         >
                           <Check size={16} />
@@ -252,7 +252,7 @@ export default function ReviewTab() {
                         <button
                           onClick={() => handleConfirm(event, false)}
                           disabled={confirming === eventId}
-                          className="p-1.5 rounded hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
                           title="Skip - didn't happen" aria-label="Skip - didn't happen"
                         >
                           <X size={16} />
diff --git a/client/src/components/cos/ActionableInsightsBanner.jsx b/client/src/components/cos/ActionableInsightsBanner.jsx
index f4d2027428..0eb5451281 100644
--- a/client/src/components/cos/ActionableInsightsBanner.jsx
+++ b/client/src/components/cos/ActionableInsightsBanner.jsx
@@ -244,7 +244,7 @@ export default function ActionableInsightsBanner({ insights, onTaskUnblocked, on
           )}
           <button
             onClick={() => handleDismiss(primaryInsight.type)}
-            className="p-1.5 text-gray-500 hover:text-gray-300 hover:bg-white/5 rounded transition-colors min-w-[32px] min-h-[32px] flex items-center justify-center"
+            className="min-h-[44px] min-w-[44px] flex items-center justify-center p-1.5 text-gray-500 hover:text-gray-300 hover:bg-white/5 rounded transition-colors"
             title="Dismiss" aria-label="Dismiss"
           >
             <X size={14} />
diff --git a/client/src/components/cos/JobCard.jsx b/client/src/components/cos/JobCard.jsx
index 7109fe98fe..6f6b2652bf 100644
--- a/client/src/components/cos/JobCard.jsx
+++ b/client/src/components/cos/JobCard.jsx
@@ -384,11 +384,11 @@ export default function JobCard({
           </div>
         </div>
 
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           <button
             onClick={() => onTrigger(job.id)}
             disabled={editing || triggering}
-            className={`p-1.5 transition-colors text-gray-500 ${editing || triggering ? 'opacity-50 cursor-not-allowed' : 'hover:text-port-accent'}`}
+            className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 transition-colors text-gray-500 ${editing || triggering ? 'opacity-50 cursor-not-allowed' : 'hover:text-port-accent'}`}
             title={editing ? 'Save changes before running job' : triggering ? 'Triggering job' : 'Run now'}
             aria-label={editing ? 'Save changes before running job' : triggering ? 'Triggering job' : 'Run now'}
           >
@@ -396,7 +396,7 @@ export default function JobCard({
           </button>
           <button
             onClick={startEditing}
-            className="p-1.5 text-gray-500 hover:text-white transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-white transition-colors"
             title="Edit"
             aria-label="Edit"
           >
@@ -404,7 +404,7 @@ export default function JobCard({
           </button>
           <button
             onClick={() => setExpanded(!expanded)}
-            className="p-1.5 text-gray-500 hover:text-white transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-white transition-colors"
             title={expanded ? 'Collapse' : 'Expand'}
             aria-label={expanded ? 'Collapse' : 'Expand'}
           >
diff --git a/client/src/components/cos/TaskAddForm.jsx b/client/src/components/cos/TaskAddForm.jsx
index 10913a19d9..154efe03d4 100644
--- a/client/src/components/cos/TaskAddForm.jsx
+++ b/client/src/components/cos/TaskAddForm.jsx
@@ -1104,7 +1104,7 @@ export default function TaskAddForm({ providers, apps, onTaskAdded, compact = fa
                 <button
                   type="button"
                   onClick={() => removeAttachment(a.id)}
-                  className="ml-1 p-0.5 text-gray-500 hover:text-port-error transition-colors"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center ml-1 p-0.5 text-gray-500 hover:text-port-error transition-colors"
                   aria-label={`Remove attachment ${a.originalName}`}
                 >
                   <X size={14} aria-hidden="true" />
diff --git a/client/src/components/cos/tabs/AgentCard.jsx b/client/src/components/cos/tabs/AgentCard.jsx
index ea19094de9..4ee8eb15ff 100644
--- a/client/src/components/cos/tabs/AgentCard.jsx
+++ b/client/src/components/cos/tabs/AgentCard.jsx
@@ -410,7 +410,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
                 event.stopPropagation();
                 copyToClipboard(agent.id, 'Agent ID copied to clipboard');
               }}
-              className="p-1 rounded text-gray-500 hover:bg-port-border/60 hover:text-white transition-colors shrink-0"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-500 hover:bg-port-border/60 hover:text-white transition-colors shrink-0"
               title="Copy agent ID"
               aria-label="Copy agent ID"
             >
@@ -544,7 +544,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
               ) : (
                 <button
                   onClick={() => requestDelete(agent.id)}
-                  className="p-1 text-gray-500 hover:text-port-error transition-colors"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                   aria-label="Remove agent"
                 >
                   <Trash2 size={14} aria-hidden="true" />
@@ -879,7 +879,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
                 <button
                   onClick={() => submitFeedback('positive')}
                   disabled={submittingFeedback}
-                  className={`p-1.5 rounded transition-colors min-w-[32px] min-h-[32px] flex items-center justify-center ${
+                  className={`min-h-[44px] min-w-[44px] flex items-center justify-center p-1.5 rounded transition-colors ${
                     feedbackState === 'positive'
                       ? 'bg-port-success/30 text-port-success'
                       : 'text-gray-500 hover:text-port-success hover:bg-port-success/10'
@@ -893,7 +893,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
                 <button
                   onClick={() => submitFeedback('negative')}
                   disabled={submittingFeedback}
-                  className={`p-1.5 rounded transition-colors min-w-[32px] min-h-[32px] flex items-center justify-center ${
+                  className={`min-h-[44px] min-w-[44px] flex items-center justify-center p-1.5 rounded transition-colors ${
                     feedbackState === 'negative'
                       ? 'bg-port-error/30 text-port-error'
                       : 'text-gray-500 hover:text-port-error hover:bg-port-error/10'
@@ -906,7 +906,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
                 </button>
                 <button
                   onClick={() => setShowFeedbackComment(!showFeedbackComment)}
-                  className="p-1.5 rounded text-gray-500 hover:text-white hover:bg-port-border/50 transition-colors min-w-[32px] min-h-[32px] flex items-center justify-center"
+                  className="min-h-[44px] min-w-[44px] flex items-center justify-center p-1.5 rounded text-gray-500 hover:text-white hover:bg-port-border/50 transition-colors"
                   title={feedbackState ? 'Add feedback detail' : 'Add feedback comment'}
                   aria-label={feedbackState ? 'Add feedback detail' : 'Add feedback comment'}
                   aria-expanded={showFeedbackComment}
diff --git a/client/src/components/cos/tabs/MemoryEditModal.jsx b/client/src/components/cos/tabs/MemoryEditModal.jsx
index a10b6065b6..c6ca333850 100644
--- a/client/src/components/cos/tabs/MemoryEditModal.jsx
+++ b/client/src/components/cos/tabs/MemoryEditModal.jsx
@@ -217,7 +217,7 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
                     type="button"
                     onClick={() => handleRemoveTag(tag)}
                     aria-label="Delete"
-                    className="p-1 min-w-[24px] min-h-[24px] flex items-center justify-center text-gray-500 hover:text-port-error transition-colors"
+                    className="min-h-[44px] min-w-[44px] flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                   >
                     <Trash2 size={14} />
                   </button>
diff --git a/client/src/components/cos/tabs/MindTab.jsx b/client/src/components/cos/tabs/MindTab.jsx
index 3066f99667..cc8e34b4d0 100644
--- a/client/src/components/cos/tabs/MindTab.jsx
+++ b/client/src/components/cos/tabs/MindTab.jsx
@@ -706,7 +706,7 @@ export default function MindTab() {
                 {messageImages.map((image) => (
                   <li key={image.attachmentId} className="relative h-16 w-16 overflow-hidden rounded-lg border border-port-border bg-port-bg">
                     <MindImage image={image} className="h-full w-full object-cover" />
-                    <button type="button" onClick={() => void removeMessageImage(image)} disabled={submitting || messageImagesUploading} aria-label={`Remove ${image.originalName}`} className="absolute right-1 top-1 rounded-full bg-port-bg/90 p-1 text-port-text shadow disabled:opacity-50">
+                    <button type="button" onClick={() => void removeMessageImage(image)} disabled={submitting || messageImagesUploading} aria-label={`Remove ${image.originalName}`} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute right-1 top-1 rounded-full bg-port-bg/90 p-1 text-port-text shadow disabled:opacity-50">
                       <X size={12} aria-hidden="true" />
                     </button>
                   </li>
diff --git a/client/src/components/cos/tabs/RunsTab.jsx b/client/src/components/cos/tabs/RunsTab.jsx
index e62495b4b6..33f7cbcc30 100644
--- a/client/src/components/cos/tabs/RunsTab.jsx
+++ b/client/src/components/cos/tabs/RunsTab.jsx
@@ -331,7 +331,7 @@ export default function RunsTab() {
                       {run.success === false && (
                         <button
                           onClick={(e) => { e.stopPropagation(); setLogModalRun(run); }}
-                          className="p-1 text-gray-500 hover:text-port-accent transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
                           title="View system logs"
                           aria-label="View system logs"
                           data-testid={`view-logs-${run.id}`}
@@ -342,7 +342,7 @@ export default function RunsTab() {
                       {run.success !== null && (
                         <button
                           onClick={(e) => handleResume(run, e)}
-                          className="p-1 text-gray-500 hover:text-port-accent transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
                           title="Resume run" aria-label="Resume run"
                           data-testid={`resume-run-${run.id}`}
                         >
@@ -353,7 +353,7 @@ export default function RunsTab() {
                         <button
                           onClick={(e) => handleStop(run.id, e)}
                           disabled={stoppingIds.has(run.id)}
-                          className="p-1 text-gray-500 hover:text-port-error transition-colors disabled:opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
+                          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors disabled:opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
                           title={stoppingIds.has(run.id) ? 'Stopping run' : 'Stop run'}
                           aria-label={stoppingIds.has(run.id) ? 'Stopping run' : 'Stop run'}
                           data-testid={`stop-run-${run.id}`}
@@ -363,7 +363,7 @@ export default function RunsTab() {
                       )}
                       <button
                         onClick={(e) => handleDelete(run.id, e)}
-                        className="p-1 text-gray-500 hover:text-port-error transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
+                        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 sm:focus-visible:opacity-100"
                         title="Delete run" aria-label="Delete run"
                         data-testid={`delete-run-${run.id}`}
                       >
diff --git a/client/src/components/cos/tabs/TaskItem.jsx b/client/src/components/cos/tabs/TaskItem.jsx
index 6f1ac97133..80aedb0057 100644
--- a/client/src/components/cos/tabs/TaskItem.jsx
+++ b/client/src/components/cos/tabs/TaskItem.jsx
@@ -733,7 +733,7 @@ export default function TaskItem({ task, agent = null, isSystem, spawning = fals
         {/* Action buttons. Keep the delete confirmation here, next to the trash
             icon, rather than at the bottom of the card — a task with a lot of
             context would otherwise push the confirm row far below the fold. */}
-        <div className="flex items-center gap-1 shrink-0">
+        <div className="flex items-center gap-2 shrink-0">
           {!editing && (
             isConfirming(task.id) ? (
               <ConfirmButtonPair
@@ -758,7 +758,7 @@ export default function TaskItem({ task, agent = null, isSystem, spawning = fals
                       if (result?.success) toast.success(`Spawning ${task.id}`);
                       if (onRefresh) onRefresh();
                     }}
-                    className="p-1 text-gray-500 hover:text-port-success transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-success transition-colors"
                     title="Process now"
                     aria-label="Process task now"
                   >
@@ -771,7 +771,7 @@ export default function TaskItem({ task, agent = null, isSystem, spawning = fals
                   <button
                     type="button"
                     onClick={() => setRelaunching(true)}
-                    className="p-1 text-gray-500 hover:text-port-accent transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent transition-colors"
                     title="Relaunch on a different provider or model"
                     aria-label={`Relaunch task ${task.id} on a different provider or model`}
                   >
@@ -798,7 +798,7 @@ export default function TaskItem({ task, agent = null, isSystem, spawning = fals
                 {task.status !== 'blocked' && task.status !== 'completed' && (
                   <button
                     onClick={handleMarkBlocked}
-                    className="p-1 text-gray-500 hover:text-port-error transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                     title="Mark as blocked"
                     aria-label="Mark task as blocked"
                   >
@@ -807,7 +807,7 @@ export default function TaskItem({ task, agent = null, isSystem, spawning = fals
                 )}
                 <button
                   onClick={() => setEditing(true)}
-                  className="p-1 text-gray-500 hover:text-white transition-colors"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-white transition-colors"
                   title="Edit"
                   aria-label="Edit task"
                 >
@@ -815,7 +815,7 @@ export default function TaskItem({ task, agent = null, isSystem, spawning = fals
                 </button>
                 <button
                   onClick={() => requestDelete(task.id)}
-                  className="p-1 text-gray-500 hover:text-port-error transition-colors"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                   title="Delete"
                   aria-label="Delete task"
                 >
diff --git a/client/src/components/cos/tabs/schedule/AppTaskTypeSection.jsx b/client/src/components/cos/tabs/schedule/AppTaskTypeSection.jsx
index b0fc9e16ec..69d299ae2d 100644
--- a/client/src/components/cos/tabs/schedule/AppTaskTypeSection.jsx
+++ b/client/src/components/cos/tabs/schedule/AppTaskTypeSection.jsx
@@ -65,7 +65,7 @@ export default function AppTaskTypeSection({ tasks, apps, providers, activeProvi
             type="button"
             onClick={() => setSearch('')}
             aria-label="Clear filter"
-            className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-white"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute right-2 top-1/2 -translate-y-1/2 p-1 text-gray-500 hover:text-white"
           >
             <X size={14} />
           </button>
diff --git a/client/src/components/dashboard/LayoutEditor.jsx b/client/src/components/dashboard/LayoutEditor.jsx
index 0adb2ba0db..0043877561 100644
--- a/client/src/components/dashboard/LayoutEditor.jsx
+++ b/client/src/components/dashboard/LayoutEditor.jsx
@@ -327,9 +327,9 @@ export default function LayoutEditor({ layouts, activeLayoutId, limits, onClose,
                         {meta?.label ?? id}
                         {!meta && <span className="ml-2 text-xs text-port-warning">(unknown — skipped)</span>}
                       </span>
-                      <button onClick={() => move(idx, -1)} disabled={idx === 0} className="p-1 rounded text-gray-400 hover:text-white disabled:opacity-30 disabled:hover:text-gray-400" aria-label="Move up"><ArrowUp size={14} /></button>
-                      <button onClick={() => move(idx, 1)} disabled={idx === widgets.length - 1} className="p-1 rounded text-gray-400 hover:text-white disabled:opacity-30 disabled:hover:text-gray-400" aria-label="Move down"><ArrowDown size={14} /></button>
-                      <button onClick={() => remove(id)} className="p-1 rounded text-gray-400 hover:text-port-error" aria-label="Remove widget"><Trash2 size={14} /></button>
+                      <button onClick={() => move(idx, -1)} disabled={idx === 0} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white disabled:opacity-30 disabled:hover:text-gray-400" aria-label="Move up"><ArrowUp size={14} /></button>
+                      <button onClick={() => move(idx, 1)} disabled={idx === widgets.length - 1} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white disabled:opacity-30 disabled:hover:text-gray-400" aria-label="Move down"><ArrowDown size={14} /></button>
+                      <button onClick={() => remove(id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-port-error" aria-label="Remove widget"><Trash2 size={14} /></button>
                     </li>
                   );
                 })}
diff --git a/client/src/components/dashboard/builtins/DailyDriverWidget.jsx b/client/src/components/dashboard/builtins/DailyDriverWidget.jsx
index 553e627ae8..a9e87ea96d 100644
--- a/client/src/components/dashboard/builtins/DailyDriverWidget.jsx
+++ b/client/src/components/dashboard/builtins/DailyDriverWidget.jsx
@@ -118,7 +118,7 @@ export default function DailyDriverWidget({ dashboardState }) {
           disabled={dismissing}
           aria-label="Dismiss for today"
           title="Dismiss for today"
-          className="ml-auto p-1 rounded text-gray-500 hover:text-white hover:bg-port-border/60 disabled:opacity-50"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center ml-auto p-1 rounded text-gray-500 hover:text-white hover:bg-port-border/60 disabled:opacity-50"
         >
           <X size={14} />
         </button>
diff --git a/client/src/components/digital-twin/ListEnrichment.jsx b/client/src/components/digital-twin/ListEnrichment.jsx
index a812b0cefc..5a6afc2038 100644
--- a/client/src/components/digital-twin/ListEnrichment.jsx
+++ b/client/src/components/digital-twin/ListEnrichment.jsx
@@ -194,7 +194,7 @@ export default function ListEnrichment({
               {items.length > 1 && (
                 <button
                   onClick={() => removeItem(index)}
-                  className="absolute top-2 right-2 p-1.5 text-gray-500 hover:text-red-400 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-2 right-2 p-1.5 text-gray-500 hover:text-red-400 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 transition-opacity"
                   title="Remove" aria-label="Remove"
                 >
                   <X size={16} />
diff --git a/client/src/components/digital-twin/NextActionBanner.jsx b/client/src/components/digital-twin/NextActionBanner.jsx
index eaaea09aac..f3578f598f 100644
--- a/client/src/components/digital-twin/NextActionBanner.jsx
+++ b/client/src/components/digital-twin/NextActionBanner.jsx
@@ -255,7 +255,7 @@ export default function NextActionBanner({ gaps, status, traits, onRefresh }) {
                     setCopied(true);
                     setTimeout(() => setCopied(false), 2000);
                   }}
-                  className="absolute top-2 right-2 p-1.5 text-gray-400 hover:text-white bg-port-bg rounded"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-2 right-2 p-1.5 text-gray-400 hover:text-white bg-port-bg rounded"
                   title="Copy prompt" aria-label="Copy prompt"
                 >
                   {copied ? <Check size={14} className="text-port-success" /> : <Copy size={14} />}
@@ -398,7 +398,7 @@ export default function NextActionBanner({ gaps, status, traits, onRefresh }) {
                     setCopied(true);
                     setTimeout(() => setCopied(false), 2000);
                   }}
-                  className="absolute top-2 right-2 p-1.5 text-gray-400 hover:text-white bg-port-bg rounded"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-2 right-2 p-1.5 text-gray-400 hover:text-white bg-port-bg rounded"
                   title="Copy prompt" aria-label="Copy prompt"
                 >
                   {copied ? <Check size={14} className="text-port-success" /> : <Copy size={14} />}
diff --git a/client/src/components/digital-twin/tabs/AccountsTab.jsx b/client/src/components/digital-twin/tabs/AccountsTab.jsx
index 23edc83eb3..405f42ddd6 100644
--- a/client/src/components/digital-twin/tabs/AccountsTab.jsx
+++ b/client/src/components/digital-twin/tabs/AccountsTab.jsx
@@ -528,7 +528,7 @@ export default function AccountsTab() {
                   <div className="flex items-center gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
                     <button
                       onClick={() => handleEdit(account)}
-                      className="p-1.5 text-gray-400 hover:text-white rounded transition-colors min-h-[40px] min-w-[40px] flex items-center justify-center"
+                      className="min-h-[44px] min-w-[44px] flex items-center justify-center p-1.5 text-gray-400 hover:text-white rounded transition-colors"
                       title="Edit" aria-label="Edit"
                     >
                       <Edit3 className="w-4 h-4" />
diff --git a/client/src/components/digital-twin/tabs/AppearanceTab.jsx b/client/src/components/digital-twin/tabs/AppearanceTab.jsx
index 7127830925..acc29bfbac 100644
--- a/client/src/components/digital-twin/tabs/AppearanceTab.jsx
+++ b/client/src/components/digital-twin/tabs/AppearanceTab.jsx
@@ -179,7 +179,7 @@ export default function AppearanceTab({ onRefresh }) {
                   onClick={clearImage}
                   disabled={analyzing}
                   aria-label="Remove photo"
-                  className="absolute top-2 right-2 p-1.5 bg-port-bg/90 border border-port-border rounded-full text-gray-300 hover:text-white disabled:opacity-50"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-2 right-2 p-1.5 bg-port-bg/90 border border-port-border rounded-full text-gray-300 hover:text-white disabled:opacity-50"
                 >
                   <X size={16} />
                 </button>
diff --git a/client/src/components/digital-twin/tabs/AutobiographyTab.jsx b/client/src/components/digital-twin/tabs/AutobiographyTab.jsx
index 15a290b81b..1bdb270e15 100644
--- a/client/src/components/digital-twin/tabs/AutobiographyTab.jsx
+++ b/client/src/components/digital-twin/tabs/AutobiographyTab.jsx
@@ -559,7 +559,7 @@ export default function AutobiographyTab({ onRefresh }) {
                             </button>
                             <button
                               onClick={() => setNarrative(null)}
-                              className="p-0.5 text-gray-500 hover:text-white"
+                              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-500 hover:text-white"
                               aria-label="Dismiss narrative"
                             >
                               <X size={12} />
diff --git a/client/src/components/fableloom/LoomEpisodeOutlinePlanner.jsx b/client/src/components/fableloom/LoomEpisodeOutlinePlanner.jsx
index 77da8793bb..4d9a903706 100644
--- a/client/src/components/fableloom/LoomEpisodeOutlinePlanner.jsx
+++ b/client/src/components/fableloom/LoomEpisodeOutlinePlanner.jsx
@@ -213,7 +213,7 @@ function OutlineBeat({
                       {possibleTargets.map((target) => <option key={target.key} value={target.key}>{target.title || target.key}</option>)}
                     </select>
                   </div>
-                  <button type="button" onClick={() => onRemovePath(transitionIndex)} className="mt-2 p-1 text-port-text-muted hover:text-port-error" aria-label={`Remove path ${transitionIndex + 1} from ${scene.title || scene.key}`}>
+                  <button type="button" onClick={() => onRemovePath(transitionIndex)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center mt-2 p-1 text-port-text-muted hover:text-port-error" aria-label={`Remove path ${transitionIndex + 1} from ${scene.title || scene.key}`}>
                     <Trash2 size={14} />
                   </button>
                 </div>
diff --git a/client/src/components/fableloom/LoomHostedSessionModal.jsx b/client/src/components/fableloom/LoomHostedSessionModal.jsx
index 6e9d1a6349..7e3f7f417e 100644
--- a/client/src/components/fableloom/LoomHostedSessionModal.jsx
+++ b/client/src/components/fableloom/LoomHostedSessionModal.jsx
@@ -219,7 +219,7 @@ export default function LoomHostedSessionModal({
                 <button
                   onClick={handleCopyLink}
                   aria-label="Copy hosted play join link"
-                  className="p-1.5 rounded text-port-muted hover:text-port-text hover:bg-port-card transition-colors shrink-0"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-port-muted hover:text-port-text hover:bg-port-card transition-colors shrink-0"
                   title="Copy link"
                 >
                   <Copy className="w-4 h-4" />
diff --git a/client/src/components/fableloom/LoomSeriesPlan.jsx b/client/src/components/fableloom/LoomSeriesPlan.jsx
index fbd84119c6..ad3d172744 100644
--- a/client/src/components/fableloom/LoomSeriesPlan.jsx
+++ b/client/src/components/fableloom/LoomSeriesPlan.jsx
@@ -772,9 +772,9 @@ function PlanCollection({
               placeholder={sideQuests ? 'Side quest title' : 'Plot point title'}
               onChange={(event) => onUpdate(item.id, { title: event.target.value })}
             />
-            <button type="button" aria-label={`Move ${title.toLowerCase()} ${index + 1} up`} disabled={index === 0} onClick={() => onMove(index, -1)} className="p-1 text-port-text-muted hover:text-port-text disabled:opacity-30"><ChevronUp size={15} /></button>
-            <button type="button" aria-label={`Move ${title.toLowerCase()} ${index + 1} down`} disabled={index === items.length - 1} onClick={() => onMove(index, 1)} className="p-1 text-port-text-muted hover:text-port-text disabled:opacity-30"><ChevronDown size={15} /></button>
-            <button type="button" aria-label={`Remove ${title.toLowerCase()} ${index + 1}`} onClick={() => onRemove(item.id)} className="p-1 text-port-text-muted hover:text-port-error"><Trash2 size={15} /></button>
+            <button type="button" aria-label={`Move ${title.toLowerCase()} ${index + 1} up`} disabled={index === 0} onClick={() => onMove(index, -1)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-text-muted hover:text-port-text disabled:opacity-30"><ChevronUp size={15} /></button>
+            <button type="button" aria-label={`Move ${title.toLowerCase()} ${index + 1} down`} disabled={index === items.length - 1} onClick={() => onMove(index, 1)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-text-muted hover:text-port-text disabled:opacity-30"><ChevronDown size={15} /></button>
+            <button type="button" aria-label={`Remove ${title.toLowerCase()} ${index + 1}`} onClick={() => onRemove(item.id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-text-muted hover:text-port-error"><Trash2 size={15} /></button>
           </div>
           <textarea
             aria-label={`${title} ${index + 1} description`}
diff --git a/client/src/components/feature-agents/OutputTab.jsx b/client/src/components/feature-agents/OutputTab.jsx
index 83b5d41ee5..502ddea9d9 100644
--- a/client/src/components/feature-agents/OutputTab.jsx
+++ b/client/src/components/feature-agents/OutputTab.jsx
@@ -77,7 +77,7 @@ export default function OutputTab({ agent }) {
         <button
           onClick={() => loadOutput(agent.id)}
           aria-label="Refresh output"
-          className="p-1.5 text-gray-400 hover:text-white hover:bg-port-border/50 rounded transition-colors"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white hover:bg-port-border/50 rounded transition-colors"
         >
           <RefreshCw size={14} />
         </button>
diff --git a/client/src/components/goals/GoalLinkedActivities.jsx b/client/src/components/goals/GoalLinkedActivities.jsx
index a55048d814..a9df8e7d84 100644
--- a/client/src/components/goals/GoalLinkedActivities.jsx
+++ b/client/src/components/goals/GoalLinkedActivities.jsx
@@ -20,7 +20,7 @@ export default function GoalLinkedActivities({
               {link.note && <span className="text-gray-600 truncate max-w-[100px]" title={link.note}>{link.note}</span>}
               <button
                 onClick={() => handleUnlinkActivity(link.activityName)}
-                className="p-0.5 text-gray-600 hover:text-red-400"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-600 hover:text-red-400"
                 title="Unlink" aria-label="Unlink"
               >
                 <Unlink className="w-3 h-3" />
diff --git a/client/src/components/goals/GoalLinkedCalendars.jsx b/client/src/components/goals/GoalLinkedCalendars.jsx
index 949b922084..1ae5ade1fd 100644
--- a/client/src/components/goals/GoalLinkedCalendars.jsx
+++ b/client/src/components/goals/GoalLinkedCalendars.jsx
@@ -24,7 +24,7 @@ export default function GoalLinkedCalendars({
               )}
               <button
                 onClick={() => handleUnlinkCalendar(lc.subcalendarId)}
-                className="p-0.5 text-gray-600 hover:text-red-400"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-600 hover:text-red-400"
                 title="Unlink" aria-label="Unlink"
               >
                 <Unlink className="w-3 h-3" />
diff --git a/client/src/components/goals/GoalProgressLog.jsx b/client/src/components/goals/GoalProgressLog.jsx
index c28ea45ac7..f0087835b7 100644
--- a/client/src/components/goals/GoalProgressLog.jsx
+++ b/client/src/components/goals/GoalProgressLog.jsx
@@ -24,7 +24,7 @@ export default function GoalProgressLog({
         </div>
         <button
           onClick={() => setShowProgressForm(!showProgressForm)}
-          className="p-0.5 text-gray-500 hover:text-port-accent"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-500 hover:text-port-accent"
           title="Log progress" aria-label="Log progress"
         >
           <Plus className="w-3.5 h-3.5" />
@@ -96,7 +96,7 @@ export default function GoalProgressLog({
               </div>
               <button
                 onClick={() => requestDelete(entry.id)}
-                className="p-0.5 text-gray-700 hover:text-red-400 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 shrink-0"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-700 hover:text-red-400 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 shrink-0"
                 title="Delete" aria-label="Delete"
               >
                 <Trash2 className="w-3 h-3" />
diff --git a/client/src/components/goals/GoalTodoList.jsx b/client/src/components/goals/GoalTodoList.jsx
index 8834b809db..4c8b2c0c34 100644
--- a/client/src/components/goals/GoalTodoList.jsx
+++ b/client/src/components/goals/GoalTodoList.jsx
@@ -46,7 +46,7 @@ export default function GoalTodoList({
               )}
               <button
                 onClick={() => requestDelete(todo.id)}
-                className="p-0.5 text-gray-700 hover:text-red-400 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 shrink-0"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-700 hover:text-red-400 opacity-40 sm:opacity-0 sm:group-hover:opacity-100 focus-visible:opacity-100 shrink-0"
                 title="Delete" aria-label="Delete"
               >
                 <Trash2 className="w-3 h-3" />
diff --git a/client/src/components/goals/GoalsListView.jsx b/client/src/components/goals/GoalsListView.jsx
index d638dea200..47df641cc0 100644
--- a/client/src/components/goals/GoalsListView.jsx
+++ b/client/src/components/goals/GoalsListView.jsx
@@ -88,7 +88,7 @@ function GoalRow({ goal, depth, expandedIds, onToggle, onSelect, selectedId, onA
         {hasChildren ? (
           <button
             onClick={(e) => { e.stopPropagation(); onToggle(goal.id); }}
-            className="p-0.5 text-gray-500 hover:text-white shrink-0"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 text-gray-500 hover:text-white shrink-0"
             title={expanded ? 'Collapse' : 'Expand'} aria-label={expanded ? 'Collapse' : 'Expand'}
           >
             {expanded ? <ChevronDown className="w-3.5 h-3.5" /> : <ChevronRight className="w-3.5 h-3.5" />}
@@ -153,7 +153,7 @@ function GoalRow({ goal, depth, expandedIds, onToggle, onSelect, selectedId, onA
 
         <button
           onClick={(e) => { e.stopPropagation(); onAddChild(goal.id); }}
-          className="p-1 text-gray-600 hover:text-port-accent shrink-0"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-600 hover:text-port-accent shrink-0"
           title="Add sub-goal" aria-label="Add sub-goal"
         >
           <Plus className="w-3.5 h-3.5" />
diff --git a/client/src/components/media/MediaJobsQueue.jsx b/client/src/components/media/MediaJobsQueue.jsx
index b44eec1055..46223bbb44 100644
--- a/client/src/components/media/MediaJobsQueue.jsx
+++ b/client/src/components/media/MediaJobsQueue.jsx
@@ -256,7 +256,7 @@ export default function MediaJobsQueue({ kind, recentLimit = 10, className = ''
           )}
           <button
             onClick={fetchJobs}
-            className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
             title="Refresh" aria-label="Refresh"
           >
             <RefreshCw className="w-3.5 h-3.5" />
diff --git a/client/src/components/media/MediaLightbox.jsx b/client/src/components/media/MediaLightbox.jsx
index 3ebe8f6d3d..d0c61d8f32 100644
--- a/client/src/components/media/MediaLightbox.jsx
+++ b/client/src/components/media/MediaLightbox.jsx
@@ -592,12 +592,12 @@ function SettingsPane({
     <aside className={asideClasses} onClick={(e) => e.stopPropagation()}>
       <header className="flex items-center justify-between p-3 border-b border-port-border">
         <span className="text-xs uppercase tracking-wide text-gray-400">{isVideo ? 'Video' : 'Image'} settings</span>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           {onAnnotationChange && (
             <button
               type="button"
               onClick={() => onAnnotationChange({ starred: !starred })}
-              className={`p-1.5 rounded ${starred ? 'bg-port-warning/90 text-black' : 'text-gray-400 hover:text-white hover:bg-port-border/50'}`}
+              className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded ${starred ? 'bg-port-warning/90 text-black' : 'text-gray-400 hover:text-white hover:bg-port-border/50'}`}
               aria-label={starred ? 'Unfavorite' : 'Favorite'}
               title={starred ? 'Unfavorite (s)' : 'Favorite (s)'}
             >
@@ -642,7 +642,7 @@ function SettingsPane({
               <button
                 type="button"
                 onClick={() => copy(item.prompt, 'Prompt')}
-                className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
                 title="Copy prompt" aria-label="Copy prompt"
               >
                 <Copy className="w-3 h-3" />
@@ -684,7 +684,7 @@ function SettingsPane({
               <button
                 type="button"
                 onClick={() => copy(item.negativePrompt, 'Negative prompt')}
-                className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
                 title="Copy negative prompt" aria-label="Copy negative prompt"
               >
                 <Copy className="w-3 h-3" />
@@ -735,7 +735,7 @@ function SettingsPane({
                       <button
                         type="button"
                         onClick={() => copy(String(v), k)}
-                        className="p-0.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+                        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
                         title={`Copy ${k.toLowerCase()}`} aria-label={`Copy ${k.toLowerCase()}`}
                       >
                         <Copy className="w-3 h-3" />
diff --git a/client/src/components/media/PromptFromMedia.jsx b/client/src/components/media/PromptFromMedia.jsx
index 188ed9ef3a..2b3b0de5a1 100644
--- a/client/src/components/media/PromptFromMedia.jsx
+++ b/client/src/components/media/PromptFromMedia.jsx
@@ -244,7 +244,7 @@ export default function PromptFromMedia({
               <button
                 type="button"
                 onClick={() => { setSource(null); setResult(null); }}
-                className="p-1.5 text-gray-400 hover:text-white min-h-[36px] min-w-[36px] flex items-center justify-center"
+                className="min-h-[44px] min-w-[44px] flex items-center justify-center p-1.5 text-gray-400 hover:text-white"
                 aria-label="Clear selected media"
               >
                 <X className="w-3.5 h-3.5" />
diff --git a/client/src/components/media/VideoTimelineLanes.jsx b/client/src/components/media/VideoTimelineLanes.jsx
index a25cebafcf..50d596239e 100644
--- a/client/src/components/media/VideoTimelineLanes.jsx
+++ b/client/src/components/media/VideoTimelineLanes.jsx
@@ -137,7 +137,7 @@ export const LaneBlock = memo(function LaneBlock({
           type="button"
           onClick={(e) => { e.stopPropagation(); onRemove(entry._key); }}
           onPointerDown={(e) => e.stopPropagation()}
-          className="absolute top-1/2 right-0 -translate-y-1/2 inline-flex min-w-[28px] min-h-[28px] items-center justify-center p-1 text-white/70 hover:text-port-error"
+          className="absolute top-1/2 right-0 -translate-y-1/2 inline-flex min-w-[44px] min-h-[44px] items-center justify-center p-1 text-white/70 hover:text-port-error"
           title="Remove"
           aria-label={`Remove ${label} from timeline`}
         >
diff --git a/client/src/components/media/VideoTimelineLanes.test.jsx b/client/src/components/media/VideoTimelineLanes.test.jsx
index 7c14e3ae08..3d17ab4da4 100644
--- a/client/src/components/media/VideoTimelineLanes.test.jsx
+++ b/client/src/components/media/VideoTimelineLanes.test.jsx
@@ -161,7 +161,7 @@ describe('LaneBlock — free-floating overlay/bed placement', () => {
     expect(screen.queryByText('gone.png')).not.toBeInTheDocument();
   });
 
-  it('provides a 28px remove target without selecting a normal-width block', () => {
+  it('provides a 44px remove target without selecting a normal-width block', () => {
     const onSelect = vi.fn();
     const onRemove = vi.fn();
     render(
@@ -169,8 +169,8 @@ describe('LaneBlock — free-floating overlay/bed placement', () => {
     );
 
     const remove = screen.getByRole('button', { name: 'Remove logo.png from timeline' });
-    expect(remove.className).toContain('min-w-[28px]');
-    expect(remove.className).toContain('min-h-[28px]');
+    expect(remove.className).toContain('min-w-[44px]');
+    expect(remove.className).toContain('min-h-[44px]');
 
     fireEvent.pointerDown(remove);
     fireEvent.click(remove);
diff --git a/client/src/components/messages/DraftsTab.jsx b/client/src/components/messages/DraftsTab.jsx
index 62b35201f0..b3cc33e94c 100644
--- a/client/src/components/messages/DraftsTab.jsx
+++ b/client/src/components/messages/DraftsTab.jsx
@@ -106,11 +106,11 @@ export default function DraftsTab({ accounts }) {
                   <span className="text-xs text-port-accent-2">AI generated</span>
                 )}
               </div>
-              <div className="flex items-center gap-1">
+              <div className="flex items-center gap-2">
                 {draft.status === 'draft' && draft.sendVia !== 'review' && (
                   <button
                     onClick={() => handleApprove(draft.id)}
-                    className="p-1 text-gray-400 hover:text-port-success transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-success transition-colors"
                     title="Approve" aria-label="Approve"
                   >
                     <Check size={16} />
@@ -123,7 +123,7 @@ export default function DraftsTab({ accounts }) {
                 {draft.status === 'approved' && draft.sendVia !== 'review' && (
                   <button
                     onClick={() => handleSend(draft.id)}
-                    className="p-1 text-gray-400 hover:text-port-accent transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent transition-colors"
                     title="Send" aria-label="Send"
                   >
                     <Send size={16} />
@@ -136,7 +136,7 @@ export default function DraftsTab({ accounts }) {
                     </span>
                     <button
                       onClick={() => handleCopy(draft)}
-                      className="p-1 text-gray-400 hover:text-port-accent transition-colors"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent transition-colors"
                       title="Copy message"
                       aria-label="Copy message"
                     >
@@ -150,7 +150,7 @@ export default function DraftsTab({ accounts }) {
                 {(['draft', 'pending_review', 'failed'].includes(draft.status) || draft.sendVia === 'review') && (
                   <button
                     onClick={() => requestDelete(draft.id)}
-                    className="p-1 text-gray-400 hover:text-port-error transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error transition-colors"
                     title="Delete" aria-label="Delete"
                   >
                     <Trash2 size={16} />
diff --git a/client/src/components/messages/IMessageTab.jsx b/client/src/components/messages/IMessageTab.jsx
index 7177ab93d2..0d46952b6d 100644
--- a/client/src/components/messages/IMessageTab.jsx
+++ b/client/src/components/messages/IMessageTab.jsx
@@ -230,7 +230,7 @@ function ConversationDetail({
           <button
             type="button"
             onClick={onBack}
-            className="md:hidden rounded border border-port-border p-1.5 hover:border-port-accent"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center md:hidden rounded border border-port-border p-1.5 hover:border-port-accent"
             aria-label="Back to conversations"
           >
             <ChevronLeft size={16} />
@@ -373,7 +373,7 @@ function ConversationDetail({
               <button
                 type="button"
                 onClick={() => deleteEvent(ev.id)}
-                className="shrink-0 self-start rounded p-1.5 text-gray-500 hover:bg-port-error/15 hover:text-port-error"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 self-start rounded p-1.5 text-gray-500 hover:bg-port-error/15 hover:text-port-error"
                 aria-label="Delete event from PortOS"
                 title="Delete from PortOS only"
               >
diff --git a/client/src/components/music/AlbumsManager.jsx b/client/src/components/music/AlbumsManager.jsx
index e84f3cbbe9..2f13aa760c 100644
--- a/client/src/components/music/AlbumsManager.jsx
+++ b/client/src/components/music/AlbumsManager.jsx
@@ -318,7 +318,7 @@ export default function AlbumsManager() {
                   ) : form.coverImageUrl ? (
                     <div className="relative">
                       <img src={form.coverImageUrl} alt="Album cover" className="w-28 h-28 rounded object-cover border border-port-border bg-port-bg" />
-                      <button type="button" onClick={() => setCover('')} title="Remove cover" aria-label="Remove cover" className="absolute -top-2 -right-2 p-1 rounded-full bg-port-bg border border-port-border text-gray-400 hover:text-port-error">
+                      <button type="button" onClick={() => setCover('')} title="Remove cover" aria-label="Remove cover" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute -top-2 -right-2 p-1 rounded-full bg-port-bg border border-port-border text-gray-400 hover:text-port-error">
                         <X size={12} />
                       </button>
                     </div>
@@ -368,9 +368,9 @@ export default function AlbumsManager() {
                           <span className="text-[11px] text-gray-500 w-5 text-right">{idx + 1}.</span>
                           <span className="flex-1 min-w-0 truncate text-sm text-gray-200">{t ? t.title : <span className="text-gray-500 italic">(missing track)</span>}</span>
                           {t?.durationSec ? <span className="text-[11px] text-gray-500">{formatTimecode(t.durationSec)}</span> : null}
-                          <button type="button" onClick={() => moveTrack(idx, -1)} disabled={idx === 0} className="p-1 text-gray-500 hover:text-white disabled:opacity-30" aria-label="Move up"><ArrowUp size={13} /></button>
-                          <button type="button" onClick={() => moveTrack(idx, 1)} disabled={idx === form.trackIds.length - 1} className="p-1 text-gray-500 hover:text-white disabled:opacity-30" aria-label="Move down"><ArrowDown size={13} /></button>
-                          <button type="button" onClick={() => removeTrack(tid)} className="p-1 text-gray-500 hover:text-port-error" aria-label="Remove track"><X size={13} /></button>
+                          <button type="button" onClick={() => moveTrack(idx, -1)} disabled={idx === 0} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-white disabled:opacity-30" aria-label="Move up"><ArrowUp size={13} /></button>
+                          <button type="button" onClick={() => moveTrack(idx, 1)} disabled={idx === form.trackIds.length - 1} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-white disabled:opacity-30" aria-label="Move down"><ArrowDown size={13} /></button>
+                          <button type="button" onClick={() => removeTrack(tid)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error" aria-label="Remove track"><X size={13} /></button>
                         </li>
                       );
                     })}
diff --git a/client/src/components/musicVideo/SceneCard.jsx b/client/src/components/musicVideo/SceneCard.jsx
index b3b9f2167d..acba3d6eab 100644
--- a/client/src/components/musicVideo/SceneCard.jsx
+++ b/client/src/components/musicVideo/SceneCard.jsx
@@ -42,10 +42,10 @@ export default function SceneCard({
             {scene.videoHistoryId ? ' · video ready' : ''}
           </div>
         </div>
-        <div className="flex items-center gap-1">
-          <button onClick={() => onMove(index, -1)} disabled={index === 0} aria-label="Move up" className="p-1 disabled:opacity-30" title="Move up"><ArrowUp size={14} /></button>
-          <button onClick={() => onMove(index, 1)} disabled={isLast} aria-label="Move down" className="p-1 disabled:opacity-30" title="Move down"><ArrowDown size={14} /></button>
-          <button onClick={() => onDelete(scene.sceneId)} aria-label="Delete scene" className="p-1 text-port-error" title="Delete scene"><Trash2 size={14} /></button>
+        <div className="flex items-center gap-2">
+          <button onClick={() => onMove(index, -1)} disabled={index === 0} aria-label="Move up" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 disabled:opacity-30" title="Move up"><ArrowUp size={14} /></button>
+          <button onClick={() => onMove(index, 1)} disabled={isLast} aria-label="Move down" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 disabled:opacity-30" title="Move down"><ArrowDown size={14} /></button>
+          <button onClick={() => onDelete(scene.sceneId)} aria-label="Delete scene" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-error" title="Delete scene"><Trash2 size={14} /></button>
         </div>
       </div>
       <textarea
diff --git a/client/src/components/onboarding/FirstRunCard.jsx b/client/src/components/onboarding/FirstRunCard.jsx
index 54efd6e704..cbb8852383 100644
--- a/client/src/components/onboarding/FirstRunCard.jsx
+++ b/client/src/components/onboarding/FirstRunCard.jsx
@@ -127,7 +127,7 @@ export default function FirstRunCard() {
           disabled={busy}
           aria-label="Dismiss for this session"
           title="Dismiss for this session"
-          className="p-1 rounded text-gray-500 hover:text-white hover:bg-port-border/60 disabled:opacity-50 min-h-[32px] min-w-[32px]"
+          className="inline-flex items-center justify-center p-1 rounded text-gray-500 hover:text-white hover:bg-port-border/60 disabled:opacity-50 min-h-[44px] min-w-[44px]"
         >
           <X size={14} />
         </button>
diff --git a/client/src/components/persona/PersonaMasterDetail.jsx b/client/src/components/persona/PersonaMasterDetail.jsx
index 353cedeb3f..830b31b2d8 100644
--- a/client/src/components/persona/PersonaMasterDetail.jsx
+++ b/client/src/components/persona/PersonaMasterDetail.jsx
@@ -262,7 +262,7 @@ export default function PersonaMasterDetail({
                   ) : form[portrait.imageKey] ? (
                     <div className="relative shrink-0">
                       <img src={form[portrait.imageKey]} alt={`${singular} ${portrait.label.toLowerCase()}`} className="w-20 h-20 rounded object-cover border border-port-border bg-port-bg" />
-                      <button type="button" onClick={() => setImage('')} title={`Remove ${portrait.label.toLowerCase()}`} aria-label={`Remove ${portrait.label.toLowerCase()}`} className="absolute -top-2 -right-2 p-1 rounded-full bg-port-bg border border-port-border text-gray-400 hover:text-port-error"><X size={12} /></button>
+                      <button type="button" onClick={() => setImage('')} title={`Remove ${portrait.label.toLowerCase()}`} aria-label={`Remove ${portrait.label.toLowerCase()}`} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute -top-2 -right-2 p-1 rounded-full bg-port-bg border border-port-border text-gray-400 hover:text-port-error"><X size={12} /></button>
                     </div>
                   ) : (
                     <div className="w-20 h-20 rounded border border-dashed border-port-border bg-port-bg flex items-center justify-center text-gray-600 shrink-0"><ImageIcon size={20} aria-hidden="true" /></div>
diff --git a/client/src/components/pipeline/CanonCard.jsx b/client/src/components/pipeline/CanonCard.jsx
index 316e87e146..751a1c614e 100644
--- a/client/src/components/pipeline/CanonCard.jsx
+++ b/client/src/components/pipeline/CanonCard.jsx
@@ -574,12 +574,12 @@ export default function CanonCard({
   // accent-on-locked styling for the lock toggle. Keeps the canon section
   // visually consistent with the bucket cards above it.
   const actions = (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-2">
       <button
         type="button"
         onClick={onRender}
         disabled={!description.trim() || !!inFlightJobId}
-        className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
         title={description.trim()
           ? `Render a canonical reference image for ${entry.name}`
           : 'Add a description first'}
@@ -592,7 +592,7 @@ export default function CanonCard({
           type="button"
           onClick={() => onRenderCleanPlate(entry)}
           disabled={!description.trim() || !!inFlightJobId}
-          className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
           title={description.trim()
             ? `Render an empty-location plate for ${entry.name} — no people, edge-to-edge`
             : 'Add a description first'}
@@ -606,7 +606,7 @@ export default function CanonCard({
           type="button"
           onClick={() => onDescribeImages(entry)}
           disabled={blockedByLock}
-          className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
           title={blockedByLock
             ? `Unlock ${entry.name} to apply a generated description`
             : `Describe ${entry.name} from a reference image (or several) using a vision model`}
@@ -620,7 +620,7 @@ export default function CanonCard({
           type="button"
           onClick={() => onCorrectFromImage(entry)}
           disabled={blockedByLock}
-          className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
           title={blockedByLock
             ? `Unlock ${entry.name} to apply a corrective reference`
             : `Correct ${entry.name}'s description from a reference image and pin it for future renders`}
@@ -634,7 +634,7 @@ export default function CanonCard({
           type="button"
           onClick={() => onRefine(entry.id)}
           disabled={refining || refineDisabled || blockedByLock}
-          className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
           title={blockedByLock
             ? `Unlock ${entry.name} to refine`
             : `AI: rewrite ${entry.name}'s description so they render distinct from every other character`}
@@ -648,7 +648,7 @@ export default function CanonCard({
           type="button"
           onClick={() => onToggleLock(entry.id, !locked)}
           disabled={togglingLock}
-          className={`p-1 rounded ${locked ? 'text-port-accent hover:bg-port-accent/20' : 'text-gray-500 hover:text-gray-300'}`}
+          className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded ${locked ? 'text-port-accent hover:bg-port-accent/20' : 'text-gray-500 hover:text-gray-300'}`}
           title={locked
             ? `Unlock ${entry.name} so refine / differentiate / re-extract can modify it`
             : `Lock ${entry.name} so AI passes don't rewrite it`}
@@ -665,7 +665,7 @@ export default function CanonCard({
         <button
           type="button"
           onClick={() => onRemove(entry.id)}
-          className="p-1 text-gray-400 hover:text-port-error rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error rounded"
           title={`Remove ${entry.name} from this universe's canon — rendered images and any Catalog entry are kept`}
           aria-label={`Remove ${entry.name}`}
         >
diff --git a/client/src/components/pipeline/ImagePromptCandidates.jsx b/client/src/components/pipeline/ImagePromptCandidates.jsx
index 263ffa6f46..4829120922 100644
--- a/client/src/components/pipeline/ImagePromptCandidates.jsx
+++ b/client/src/components/pipeline/ImagePromptCandidates.jsx
@@ -59,7 +59,7 @@ export default function ImagePromptCandidates({ candidates, onApply, onDismiss,
           <button
             type="button"
             onClick={onDismiss}
-            className="text-gray-500 hover:text-gray-300 p-0.5"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-500 hover:text-gray-300 p-0.5"
             aria-label="Dismiss candidates"
           >
             <X size={12} />
diff --git a/client/src/components/pipeline/arcCanvas/IssueRow.jsx b/client/src/components/pipeline/arcCanvas/IssueRow.jsx
index bdcab7b624..362814a071 100644
--- a/client/src/components/pipeline/arcCanvas/IssueRow.jsx
+++ b/client/src/components/pipeline/arcCanvas/IssueRow.jsx
@@ -110,7 +110,7 @@ export default function IssueRow({ issue, seasons, onIssuesUpdate }) {
           <button
             type="button"
             onClick={() => setConfirmingDelete(true)}
-            className="p-1 rounded border border-port-border bg-port-card text-gray-500 hover:text-port-error opacity-70 group-hover:opacity-100 focus:opacity-100"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded border border-port-border bg-port-card text-gray-500 hover:text-port-error opacity-70 group-hover:opacity-100 focus:opacity-100"
             aria-label={`Delete ${issue.title}`}
             title="Delete issue / episode"
           >
diff --git a/client/src/components/pipeline/arcCanvas/SeasonRow.jsx b/client/src/components/pipeline/arcCanvas/SeasonRow.jsx
index 4afbedd5b3..0708f76036 100644
--- a/client/src/components/pipeline/arcCanvas/SeasonRow.jsx
+++ b/client/src/components/pipeline/arcCanvas/SeasonRow.jsx
@@ -196,7 +196,7 @@ export default function SeasonRow({ series, season, seasons, issues, onSeriesUpd
             <button
               type="button"
               onClick={() => setCollapsed(!collapsed)}
-              className="text-gray-500 hover:text-white p-0.5"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-500 hover:text-white p-0.5"
               aria-label={collapsed ? 'Expand volume / season' : 'Collapse volume / season'}
             >
               {collapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
@@ -239,7 +239,7 @@ export default function SeasonRow({ series, season, seasons, issues, onSeriesUpd
                     type="button"
                     onClick={() => setDeleteMode('confirm')}
                     disabled={seasonLocked}
-                    className="p-1.5 text-gray-500 hover:text-port-error disabled:opacity-40 disabled:hover:text-gray-500"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error disabled:opacity-40 disabled:hover:text-gray-500"
                     aria-label={`Delete volume / season ${season.title}`}
                     title={seasonLocked
                       ? 'Volume is locked — unlock to delete'
diff --git a/client/src/components/pipeline/arcCanvas/TickingClockEditor.jsx b/client/src/components/pipeline/arcCanvas/TickingClockEditor.jsx
index 6cfaaee84a..f98f879847 100644
--- a/client/src/components/pipeline/arcCanvas/TickingClockEditor.jsx
+++ b/client/src/components/pipeline/arcCanvas/TickingClockEditor.jsx
@@ -140,7 +140,7 @@ export default function TickingClockEditor({ clock, disabled, onChange }) {
                     onClick={() => removeReminder(idx)}
                     disabled={disabled}
                     aria-label={`Remove reminder ${idx + 1}`}
-                    className="p-1 text-gray-500 hover:text-port-error disabled:opacity-50"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error disabled:opacity-50"
                   >
                     <Trash2 size={12} />
                   </button>
diff --git a/client/src/components/pipeline/manuscript/ManuscriptCommentCard.jsx b/client/src/components/pipeline/manuscript/ManuscriptCommentCard.jsx
index a43edbb1c8..92f9b7c3ba 100644
--- a/client/src/components/pipeline/manuscript/ManuscriptCommentCard.jsx
+++ b/client/src/components/pipeline/manuscript/ManuscriptCommentCard.jsx
@@ -365,7 +365,7 @@ export default function ManuscriptCommentCard({
               <button
                 type="button"
                 onClick={nav.onPrev}
-                className="p-0.5 rounded hover:text-white hover:bg-port-border/60"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 rounded hover:text-white hover:bg-port-border/60"
                 aria-label="Previous open note"
                 title="Previous open note"
               >
@@ -375,7 +375,7 @@ export default function ManuscriptCommentCard({
               <button
                 type="button"
                 onClick={nav.onNext}
-                className="p-0.5 rounded hover:text-white hover:bg-port-border/60"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-0.5 rounded hover:text-white hover:bg-port-border/60"
                 aria-label="Next open note"
                 title="Next open note"
               >
diff --git a/client/src/components/pipeline/stages/ComicPagesStage.jsx b/client/src/components/pipeline/stages/ComicPagesStage.jsx
index 0833e5623c..e0df97501f 100644
--- a/client/src/components/pipeline/stages/ComicPagesStage.jsx
+++ b/client/src/components/pipeline/stages/ComicPagesStage.jsx
@@ -332,7 +332,7 @@ export default function ComicPagesStage({ issue, onStageUpdate, actionsGated = f
                   <button
                     type="button"
                     onClick={() => removePage(pi)}
-                    className="text-gray-500 hover:text-port-error p-1"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-500 hover:text-port-error p-1"
                     aria-label="Remove page"
                   >
                     <Trash2 size={14} />
diff --git a/client/src/components/pipeline/stages/ComicScriptStage.jsx b/client/src/components/pipeline/stages/ComicScriptStage.jsx
index bdc0121f4c..1bf4e21ced 100644
--- a/client/src/components/pipeline/stages/ComicScriptStage.jsx
+++ b/client/src/components/pipeline/stages/ComicScriptStage.jsx
@@ -1022,7 +1022,7 @@ function PageRow({
             <button
               type="button"
               onClick={onArmDelete}
-              className="p-1 text-gray-500 hover:text-port-error"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error"
               aria-label={`Delete page ${pageIndex + 1}`}
               title="Delete page"
             >
diff --git a/client/src/components/pipeline/stages/PovRewritePanel.jsx b/client/src/components/pipeline/stages/PovRewritePanel.jsx
index e2beb21a57..a0ea550d20 100644
--- a/client/src/components/pipeline/stages/PovRewritePanel.jsx
+++ b/client/src/components/pipeline/stages/PovRewritePanel.jsx
@@ -78,7 +78,7 @@ function RewriteCard({ issue, rewrite, onDelete }) {
             onClick={handleDelete}
             disabled={deleting}
             aria-label="Delete rewrite"
-            className="p-1 text-gray-500 hover:text-port-error disabled:opacity-40"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error disabled:opacity-40"
           >
             {deleting ? <Loader2 size={14} className="animate-spin" /> : <Trash2 size={14} />}
           </button>
diff --git a/client/src/components/pipeline/stages/StoryboardsStage.jsx b/client/src/components/pipeline/stages/StoryboardsStage.jsx
index 1451792fe9..1b80b04bcd 100644
--- a/client/src/components/pipeline/stages/StoryboardsStage.jsx
+++ b/client/src/components/pipeline/stages/StoryboardsStage.jsx
@@ -519,7 +519,7 @@ export default function StoryboardsStage({ issue, series, onStageUpdate, actions
                 <button
                   type="button"
                   onClick={() => removeScene(i)}
-                  className="text-gray-500 hover:text-port-error p-1"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-500 hover:text-port-error p-1"
                   aria-label="Remove scene"
                 >
                   <Trash2 size={14} />
@@ -773,7 +773,7 @@ function ShotList({
                 <button
                   type="button"
                   onClick={() => onRemoveShot(j)}
-                  className="text-gray-500 hover:text-port-error p-1 mt-0.5"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-500 hover:text-port-error p-1 mt-0.5"
                   aria-label="Remove shot"
                 >
                   <Trash2 size={12} />
diff --git a/client/src/components/privacy/PrivacyChangesTab.jsx b/client/src/components/privacy/PrivacyChangesTab.jsx
index d313fa53d7..721146b134 100644
--- a/client/src/components/privacy/PrivacyChangesTab.jsx
+++ b/client/src/components/privacy/PrivacyChangesTab.jsx
@@ -50,7 +50,7 @@ function OrgRow({ org, status, eventId, hasReplacement, onChanged }) {
         <span className="text-sm text-white truncate">{org.orgName}</span>
         {org.contactEmail && <span className="ml-2 text-[11px] text-gray-500">{org.contactEmail}</span>}
       </div>
-      <div className="flex items-center gap-1 shrink-0">
+      <div className="flex items-center gap-2 shrink-0">
         {org.website && isHttpUrl(org.website) && (
           <a href={org.website} target="_blank" rel="noreferrer" title="Open website" aria-label="Open website"
             className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50">
@@ -63,20 +63,20 @@ function OrgRow({ org, status, eventId, hasReplacement, onChanged }) {
               <button
                 onClick={() => act(() => draftChangeUpdateEmail(eventId, org.orgId, { silent: true }), 'Draft added to Comms queue')}
                 disabled={busy} title="Draft update email" aria-label="Draft update email"
-                className="p-1.5 rounded text-gray-400 hover:text-port-accent hover:bg-port-border/50 disabled:opacity-50">
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-port-accent hover:bg-port-border/50 disabled:opacity-50">
                 <Mail size={14} />
               </button>
             )}
             <button
               onClick={() => act(() => markChangeOrgUpdated(eventId, org.orgId, { silent: true }), 'Marked updated')}
               disabled={busy} title="Mark updated" aria-label="Mark updated"
-              className="p-1.5 rounded text-gray-400 hover:text-port-success hover:bg-port-border/50 disabled:opacity-50">
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-port-success hover:bg-port-border/50 disabled:opacity-50">
               <Check size={15} />
             </button>
             <button
               onClick={() => act(() => markChangeOrgRemoved(eventId, org.orgId, { silent: true }), 'Marked removed')}
               disabled={busy} title="Mark removed (org dropped this data)" aria-label="Mark removed"
-              className="p-1.5 rounded text-gray-400 hover:text-port-error hover:bg-port-border/50 disabled:opacity-50">
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-port-error hover:bg-port-border/50 disabled:opacity-50">
               <Ban size={15} />
             </button>
           </>
diff --git a/client/src/components/quotaBurn/JobRow.jsx b/client/src/components/quotaBurn/JobRow.jsx
index 084a6cd2f7..90650d9bde 100644
--- a/client/src/components/quotaBurn/JobRow.jsx
+++ b/client/src/components/quotaBurn/JobRow.jsx
@@ -110,7 +110,7 @@ export default function JobRow({
       <div className="flex flex-wrap items-center gap-2">
         <button
           type="button"
-          className="p-1 text-gray-400 hover:text-white"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white"
           onClick={toggleExpand}
           aria-label={isExpanded ? `Collapse step ${index + 1}` : `Expand step ${index + 1}`}
           title={isExpanded ? 'Collapse step' : 'Expand step'}
diff --git a/client/src/components/settings/ApiAccessTab.jsx b/client/src/components/settings/ApiAccessTab.jsx
index 75bc90f1f1..e7db436b2f 100644
--- a/client/src/components/settings/ApiAccessTab.jsx
+++ b/client/src/components/settings/ApiAccessTab.jsx
@@ -235,7 +235,7 @@ export function ApiAccessTab() {
                 <button
                   type="button"
                   onClick={() => copyToClipboard(exampleCurl(card, baseUrl), 'Example copied')}
-                  className="absolute top-2 right-2 p-1.5 rounded bg-port-border hover:bg-port-border/70 text-white"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-2 right-2 p-1.5 rounded bg-port-border hover:bg-port-border/70 text-white"
                   aria-label="Copy example request"
                   title="Copy example request"
                 >
diff --git a/client/src/components/settings/DatabaseTab.jsx b/client/src/components/settings/DatabaseTab.jsx
index 232ec55c88..a8e1346485 100644
--- a/client/src/components/settings/DatabaseTab.jsx
+++ b/client/src/components/settings/DatabaseTab.jsx
@@ -247,7 +247,7 @@ export function DatabaseTab() {
           <button
             onClick={loadStatus}
             disabled={dbLoading}
-            className="p-1.5 text-gray-400 hover:text-white transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white transition-colors"
             title="Refresh status" aria-label="Refresh status"
           >
             <RefreshCw size={14} className={dbLoading ? 'animate-spin' : ''} />
diff --git a/client/src/components/settings/LocalLlmRuntimesView.jsx b/client/src/components/settings/LocalLlmRuntimesView.jsx
index cade09be4d..9bc11d45ab 100644
--- a/client/src/components/settings/LocalLlmRuntimesView.jsx
+++ b/client/src/components/settings/LocalLlmRuntimesView.jsx
@@ -718,7 +718,7 @@ export default function LocalLlmRuntimesView() {
             <button
               onClick={loadLlamaStatus}
               disabled={llamaLoading}
-              className="p-1 text-gray-400 hover:text-white transition-colors"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
               title="Refresh llama-server status"
               aria-label="Refresh llama-server status"
             >
diff --git a/client/src/components/settings/LocalModelAssessments.jsx b/client/src/components/settings/LocalModelAssessments.jsx
index 3f764971bc..686df6e970 100644
--- a/client/src/components/settings/LocalModelAssessments.jsx
+++ b/client/src/components/settings/LocalModelAssessments.jsx
@@ -409,13 +409,13 @@ function RankedRow({ entry, runtimeLabel, onRemeasure, onDelete, onSweepTunings,
             </p>
           )}
         </div>
-        <div className="flex items-center gap-1 shrink-0">
+        <div className="flex items-center gap-2 shrink-0">
           <button
             onClick={() => onRemeasure(entry)}
             disabled={busy}
             title="Measure again (and adjust tuning)"
             aria-label={`Measure ${entry.modelId} again`}
-            className="p-1.5 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
           >
             <RefreshCw size={13} />
           </button>
@@ -428,7 +428,7 @@ function RankedRow({ entry, runtimeLabel, onRemeasure, onDelete, onSweepTunings,
               disabled={busy}
               title={`Measure this model under ${sweepVariants} launch configurations and rank them`}
               aria-label={`Sweep tunings for ${entry.modelId}`}
-              className="p-1.5 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
             >
               <SlidersHorizontal size={13} />
             </button>
@@ -438,7 +438,7 @@ function RankedRow({ entry, runtimeLabel, onRemeasure, onDelete, onSweepTunings,
             disabled={busy}
             title="Discard this measurement"
             aria-label={`Discard the measurement for ${entry.modelId}`}
-            className="p-1.5 text-gray-400 hover:text-port-error transition-colors disabled:opacity-50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-port-error transition-colors disabled:opacity-50"
           >
             <Trash2 size={13} />
           </button>
diff --git a/client/src/components/settings/LocalSetupPanel.jsx b/client/src/components/settings/LocalSetupPanel.jsx
index 93d9280572..619aed83fe 100644
--- a/client/src/components/settings/LocalSetupPanel.jsx
+++ b/client/src/components/settings/LocalSetupPanel.jsx
@@ -194,7 +194,7 @@ export default function LocalSetupPanel({ pythonPath, onPythonPathChange, onPack
               type="button"
               onClick={() => refreshCheck(pythonPath)}
               disabled={checking}
-              className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50 disabled:opacity-50"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50 disabled:opacity-50"
               title="Re-check" aria-label="Re-check"
             >
               <RefreshCw size={14} className={checking ? 'animate-spin' : ''} />
diff --git a/client/src/components/settings/ModelCapabilityTests.jsx b/client/src/components/settings/ModelCapabilityTests.jsx
index add130efa3..521e1c1c20 100644
--- a/client/src/components/settings/ModelCapabilityTests.jsx
+++ b/client/src/components/settings/ModelCapabilityTests.jsx
@@ -863,7 +863,7 @@ export default function ModelCapabilityTests({ report, loading, onReload, disabl
             disabled={loading}
             title="Refresh capability tests"
             aria-label="Refresh capability tests"
-            className="p-1 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors disabled:opacity-50"
           >
             <RefreshCw size={13} className={loading ? 'animate-spin' : ''} />
           </button>
diff --git a/client/src/components/settings/MtplxServerCard.jsx b/client/src/components/settings/MtplxServerCard.jsx
index 68a3bac7e4..72806e865e 100644
--- a/client/src/components/settings/MtplxServerCard.jsx
+++ b/client/src/components/settings/MtplxServerCard.jsx
@@ -64,7 +64,7 @@ export default function MtplxServerCard({
           <button
             onClick={onRefresh}
             disabled={loading}
-            className="p-1 text-gray-400 hover:text-white transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
             title="Refresh MTPLX status"
             aria-label="Refresh MTPLX status"
           >
diff --git a/client/src/components/settings/RuntimeServersCard.jsx b/client/src/components/settings/RuntimeServersCard.jsx
index 51e7a896ec..46622d0165 100644
--- a/client/src/components/settings/RuntimeServersCard.jsx
+++ b/client/src/components/settings/RuntimeServersCard.jsx
@@ -396,7 +396,7 @@ export default function RuntimeServersCard({
         <button
           onClick={onRefresh}
           disabled={loading}
-          className="p-1.5 text-gray-400 hover:text-white transition-colors"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white transition-colors"
           title="Refresh runtime server status"
           aria-label="Refresh runtime server status"
         >
diff --git a/client/src/components/settings/SlotstreamServerCard.jsx b/client/src/components/settings/SlotstreamServerCard.jsx
index 520af415aa..63e1d9b83e 100644
--- a/client/src/components/settings/SlotstreamServerCard.jsx
+++ b/client/src/components/settings/SlotstreamServerCard.jsx
@@ -66,7 +66,7 @@ export default function SlotstreamServerCard({
         <button
           onClick={onRefresh}
           disabled={loading}
-          className="p-1 text-gray-400 hover:text-white transition-colors"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
           title="Refresh Slotstream status"
           aria-label="Refresh Slotstream status"
         >
diff --git a/client/src/components/shell/ShellImageDrop.jsx b/client/src/components/shell/ShellImageDrop.jsx
index 8c850d1632..c5c3b94691 100644
--- a/client/src/components/shell/ShellImageDrop.jsx
+++ b/client/src/components/shell/ShellImageDrop.jsx
@@ -176,7 +176,7 @@ export default function ShellImageDrop({ onSend, placement = 'below' }) {
               </div>
               <button
                 onClick={clearFile}
-                className="p-1 text-gray-400 hover:text-white transition-colors"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
                 title="Remove image"
                 aria-label="Remove image"
               >
diff --git a/client/src/components/songs/MidiVisualization.jsx b/client/src/components/songs/MidiVisualization.jsx
index d8878f143e..d924be5b31 100644
--- a/client/src/components/songs/MidiVisualization.jsx
+++ b/client/src/components/songs/MidiVisualization.jsx
@@ -76,17 +76,17 @@ export default function MidiVisualization({ url, filename, model }) {
               onClick={toggle}
               disabled={status !== 'ready'}
               aria-label={playing ? 'Pause playback' : 'Play synth preview'}
-              className="p-1 rounded text-port-accent hover:bg-port-border/50 disabled:opacity-40"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-port-accent hover:bg-port-border/50 disabled:opacity-40"
               title={playing ? 'Pause (space)' : 'Play a synth preview (space)'}
             >
               {playing ? <Pause size={13} /> : <Play size={13} />}
             </button>
             <button type="button" onClick={() => setZoom((z) => clampZoom(z / ZOOM_STEP))} aria-label="Zoom out"
-              className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50" title="Zoom out (-)">
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50" title="Zoom out (-)">
               <ZoomOut size={13} />
             </button>
             <button type="button" onClick={() => setZoom((z) => clampZoom(z * ZOOM_STEP))} aria-label="Zoom in"
-              className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50" title="Zoom in (+)">
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50" title="Zoom in (+)">
               <ZoomIn size={13} />
             </button>
             <button type="button" onClick={() => setZoom(MIN_ZOOM)} aria-label="Fit to width"
@@ -107,7 +107,7 @@ export default function MidiVisualization({ url, filename, model }) {
             <span className="flex-1" />
             <button type="button" onClick={() => setExpanded((v) => !v)}
               aria-label={expanded ? 'Compact height' : 'Expanded height'}
-              className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
               title={expanded ? 'Compact height' : 'Expanded height'}>
               {expanded ? <Minimize2 size={13} /> : <Maximize2 size={13} />}
             </button>
diff --git a/client/src/components/songs/ReferenceAnalysis.jsx b/client/src/components/songs/ReferenceAnalysis.jsx
index fc7953b67c..85a87bbc2b 100644
--- a/client/src/components/songs/ReferenceAnalysis.jsx
+++ b/client/src/components/songs/ReferenceAnalysis.jsx
@@ -796,7 +796,7 @@ export default function ReferenceAnalysis({
                     />
                     <span>s</span>
                   </div>
-                  <button type="button" onClick={() => updateSegment(idx, { startMs: currentMs() })} title="Set start from playhead" aria-label="Set segment start from playhead" className="p-1 text-gray-500 hover:text-port-accent">
+                  <button type="button" onClick={() => updateSegment(idx, { startMs: currentMs() })} title="Set start from playhead" aria-label="Set segment start from playhead" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent">
                     <Flag size={14} />
                   </button>
                   <div className="flex items-center gap-1 text-xs text-gray-400">
@@ -809,10 +809,10 @@ export default function ReferenceAnalysis({
                     />
                     <span>s</span>
                   </div>
-                  <button type="button" onClick={() => updateSegment(idx, { endMs: currentMs() })} title="Set end from playhead" aria-label="Set segment end from playhead" className="p-1 text-gray-500 hover:text-port-accent">
+                  <button type="button" onClick={() => updateSegment(idx, { endMs: currentMs() })} title="Set end from playhead" aria-label="Set segment end from playhead" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent">
                     <FlagOff size={14} />
                   </button>
-                  <button type="button" onClick={() => playSegment(seg)} title="Play this segment" aria-label="Play segment" className="p-1 text-gray-500 hover:text-port-accent">
+                  <button type="button" onClick={() => playSegment(seg)} title="Play this segment" aria-label="Play segment" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent">
                     <Play size={14} />
                   </button>
                   <span className="text-xs text-gray-600 flex-1 min-w-[60px]">{layerLabel(seg.layerId)}</span>
@@ -843,7 +843,7 @@ export default function ReferenceAnalysis({
                     {extracting ? <Loader2 size={14} className="animate-spin" /> : (isStacked(seg) ? <Layers size={14} /> : <Wand2 size={14} />)}
                     {isStacked(seg) ? ' Extract from mix' : ' Extract part'}
                   </button>
-                  <button type="button" onClick={() => removeSegment(idx)} aria-label="Remove segment" className="p-1.5 text-gray-500 hover:text-port-error">
+                  <button type="button" onClick={() => removeSegment(idx)} aria-label="Remove segment" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error">
                     <Trash2 size={15} />
                   </button>
                 </div>
@@ -862,7 +862,7 @@ export default function ReferenceAnalysis({
                       />
                       <span>s</span>
                     </div>
-                    <button type="button" onClick={() => commitBacking(idx, 'bgStartMs', currentMs())} title="Set backing start from playhead" aria-label="Set backing start from playhead" className="p-1 text-gray-500 hover:text-port-accent">
+                    <button type="button" onClick={() => commitBacking(idx, 'bgStartMs', currentMs())} title="Set backing start from playhead" aria-label="Set backing start from playhead" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent">
                       <Flag size={14} />
                     </button>
                     <div className="flex items-center gap-1 text-xs text-gray-400">
@@ -875,10 +875,10 @@ export default function ReferenceAnalysis({
                       />
                       <span>s</span>
                     </div>
-                    <button type="button" onClick={() => commitBacking(idx, 'bgEndMs', currentMs())} title="Set backing end from playhead" aria-label="Set backing end from playhead" className="p-1 text-gray-500 hover:text-port-accent">
+                    <button type="button" onClick={() => commitBacking(idx, 'bgEndMs', currentMs())} title="Set backing end from playhead" aria-label="Set backing end from playhead" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent">
                       <FlagOff size={14} />
                     </button>
-                    <button type="button" onClick={() => playSegment({ startMs: seg.bgStartMs, endMs: seg.bgEndMs })} title="Play the backing reference" aria-label="Play backing reference" className="p-1 text-gray-500 hover:text-port-accent">
+                    <button type="button" onClick={() => playSegment({ startMs: seg.bgStartMs, endMs: seg.bgEndMs })} title="Play the backing reference" aria-label="Play backing reference" className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-accent">
                       <Play size={14} />
                     </button>
                     <span className="text-xs text-gray-600">the layers already present, just before the voice enters</span>
diff --git a/client/src/components/songs/RoundEditForm.jsx b/client/src/components/songs/RoundEditForm.jsx
index 73fad28854..9c1d207836 100644
--- a/client/src/components/songs/RoundEditForm.jsx
+++ b/client/src/components/songs/RoundEditForm.jsx
@@ -107,7 +107,7 @@ export default function RoundEditForm({
                     aria-label="Section label"
                     className="flex-1 bg-port-bg border border-port-border rounded-lg px-3 py-1.5 text-sm text-white focus:border-port-accent focus:outline-none"
                   />
-                  <button type="button" onClick={() => removeSection(s.id)} className="p-1.5 text-gray-500 hover:text-port-error" aria-label="Remove section">
+                  <button type="button" onClick={() => removeSection(s.id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error" aria-label="Remove section">
                     <Trash2 size={15} />
                   </button>
                 </div>
@@ -177,7 +177,7 @@ export default function RoundEditForm({
                     aria-label="Layer voice"
                     className="w-32 bg-port-bg border border-port-border rounded-lg px-3 py-1.5 text-sm text-white focus:border-port-accent focus:outline-none"
                   />
-                  <button type="button" onClick={() => removeLayer(l.id)} className="p-1.5 text-gray-500 hover:text-port-error" aria-label="Remove layer">
+                  <button type="button" onClick={() => removeLayer(l.id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error" aria-label="Remove layer">
                     <Trash2 size={15} />
                   </button>
                 </div>
@@ -275,7 +275,7 @@ export default function RoundEditForm({
                     aria-label="Reference URL"
                     className="flex-1 min-w-0 bg-port-bg border border-port-border rounded-lg px-3 py-1.5 text-sm text-white focus:border-port-accent focus:outline-none"
                   />
-                  <button type="button" onClick={() => removeReference(r.id)} className="p-1.5 text-gray-500 hover:text-port-error shrink-0" aria-label="Remove reference">
+                  <button type="button" onClick={() => removeReference(r.id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error shrink-0" aria-label="Remove reference">
                     <Trash2 size={15} />
                   </button>
                 </div>
diff --git a/client/src/components/songs/SongRecordings.jsx b/client/src/components/songs/SongRecordings.jsx
index 6683981b00..a51c47600e 100644
--- a/client/src/components/songs/SongRecordings.jsx
+++ b/client/src/components/songs/SongRecordings.jsx
@@ -311,7 +311,7 @@ export default function SongRecordings({ recordings = [], layers = [], onChange,
               <button
                 type="button"
                 onClick={() => toggleMute(r.id)}
-                className={`p-1 shrink-0 ${r.muted ? 'text-gray-600 hover:text-gray-400' : 'text-port-accent hover:text-port-accent/80'}`}
+                className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 shrink-0 ${r.muted ? 'text-gray-600 hover:text-gray-400' : 'text-port-accent hover:text-port-accent/80'}`}
                 aria-label={r.muted ? 'Unmute take' : 'Mute take'}
                 title={r.muted ? 'Muted — excluded from layered play' : 'Audible in layered play'}
               >
@@ -350,7 +350,7 @@ export default function SongRecordings({ recordings = [], layers = [], onChange,
                   onClick={() => toggleReview(r.id)}
                   aria-pressed={reviewId === r.id}
                   title={reviewId === r.id ? 'Hide saved grading' : 'Show this take’s grading on the staff'}
-                  className={`p-1 shrink-0 ${reviewId === r.id ? 'text-port-accent' : 'text-gray-500 hover:text-port-accent'}`}
+                  className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 shrink-0 ${reviewId === r.id ? 'text-port-accent' : 'text-gray-500 hover:text-port-accent'}`}
                   aria-label="Review take grading"
                 >
                   <Target size={15} />
@@ -358,7 +358,7 @@ export default function SongRecordings({ recordings = [], layers = [], onChange,
               )}
               {/* Solo listen to one take */}
               <audio controls preload="none" src={getUploadUrl(r.filename)} className="h-8 max-w-[160px] hidden sm:block" />
-              <button type="button" onClick={() => removeRecording(r.id)} className="p-1.5 text-gray-500 hover:text-port-error shrink-0" aria-label="Remove take">
+              <button type="button" onClick={() => removeRecording(r.id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error shrink-0" aria-label="Remove take">
                 <Trash2 size={15} />
               </button>
             </li>
diff --git a/client/src/components/songs/SongScoreParts.jsx b/client/src/components/songs/SongScoreParts.jsx
index d4ffee5de6..e33b7c8ece 100644
--- a/client/src/components/songs/SongScoreParts.jsx
+++ b/client/src/components/songs/SongScoreParts.jsx
@@ -173,7 +173,7 @@ export default function SongScoreParts({ songId, baseScore = '', baseDirty = fal
                   <button
                     type="button"
                     onClick={() => setOpenId(open ? null : p.id)}
-                    className="p-1 text-gray-400 hover:text-white shrink-0"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white shrink-0"
                     aria-label={open ? 'Collapse part' : 'Edit part notation'}
                     aria-expanded={open}
                   >
@@ -196,7 +196,7 @@ export default function SongScoreParts({ songId, baseScore = '', baseDirty = fal
                     <option value="">— role —</option>
                     {ROLE_OPTIONS.map((r) => <option key={r.id} value={r.id}>{r.label}</option>)}
                   </select>
-                  <button type="button" onClick={() => remove(p.id)} className="p-1.5 text-gray-500 hover:text-port-error shrink-0" aria-label="Remove part">
+                  <button type="button" onClick={() => remove(p.id)} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error shrink-0" aria-label="Remove part">
                     <Trash2 size={15} />
                   </button>
                 </div>
diff --git a/client/src/components/sprites/AssetPromptSection.jsx b/client/src/components/sprites/AssetPromptSection.jsx
index 4d01db5fcb..257664bd68 100644
--- a/client/src/components/sprites/AssetPromptSection.jsx
+++ b/client/src/components/sprites/AssetPromptSection.jsx
@@ -40,7 +40,7 @@ export default function AssetPromptSection({ recordId, path }) {
         <button
           type="button"
           onClick={() => copyToClipboard(data.prompt, 'Prompt copied')}
-          className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
           title="Copy prompt"
           aria-label="Copy prompt"
         >
diff --git a/client/src/components/sprites/LoopTrimmer.jsx b/client/src/components/sprites/LoopTrimmer.jsx
index ae864b22a5..c9d18d839d 100644
--- a/client/src/components/sprites/LoopTrimmer.jsx
+++ b/client/src/components/sprites/LoopTrimmer.jsx
@@ -285,21 +285,21 @@ export default function LoopTrimmer({
             <button
               onClick={() => step(-1)}
               aria-label="Previous frame"
-              className="p-1.5 bg-port-bg border border-port-border rounded text-gray-300 hover:border-port-accent"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 bg-port-bg border border-port-border rounded text-gray-300 hover:border-port-accent"
             >
               <ChevronLeft className="w-4 h-4" />
             </button>
             <button
               onClick={() => setPlaying((p) => !p)}
               aria-label={playing ? 'Pause' : 'Play'}
-              className="p-1.5 bg-port-bg border border-port-border rounded text-gray-300 hover:border-port-accent"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 bg-port-bg border border-port-border rounded text-gray-300 hover:border-port-accent"
             >
               {playing ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
             </button>
             <button
               onClick={() => step(1)}
               aria-label="Next frame"
-              className="p-1.5 bg-port-bg border border-port-border rounded text-gray-300 hover:border-port-accent"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 bg-port-bg border border-port-border rounded text-gray-300 hover:border-port-accent"
             >
               <ChevronRight className="w-4 h-4" />
             </button>
diff --git a/client/src/components/sprites/ReferenceWorkflow.jsx b/client/src/components/sprites/ReferenceWorkflow.jsx
index e6e3b32868..5bd63e464d 100644
--- a/client/src/components/sprites/ReferenceWorkflow.jsx
+++ b/client/src/components/sprites/ReferenceWorkflow.jsx
@@ -662,7 +662,7 @@ export default function ReferenceWorkflow({ record, reference, renders, correcti
                       type="button"
                       onClick={clearSource}
                       aria-label="Remove reference image"
-                      className="shrink-0 p-1 text-gray-400 hover:text-white"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 p-1 text-gray-400 hover:text-white"
                     >
                       <X className="h-4 w-4" />
                     </button>
diff --git a/client/src/components/sprites/SpriteCatalog.jsx b/client/src/components/sprites/SpriteCatalog.jsx
index 1f2bdeabd5..510ebff68c 100644
--- a/client/src/components/sprites/SpriteCatalog.jsx
+++ b/client/src/components/sprites/SpriteCatalog.jsx
@@ -128,12 +128,12 @@ function CatalogCard({ record, thumbPath, onOpen, onRenamed, onDeleted }) {
       {/* Always-visible (not hover-gated — hover doesn't exist on touch) action
           icons in the corner, siblings of the card button so the markup stays
           valid. */}
-      <div className="absolute top-1.5 right-1.5 flex gap-1">
+      <div className="absolute top-1.5 right-1.5 flex gap-2">
         <button
           type="button"
           onClick={startRename}
           aria-label={`Rename ${record.name}`}
-          className="p-1.5 rounded bg-port-card/90 border border-port-border text-gray-300 hover:text-white hover:border-port-accent"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded bg-port-card/90 border border-port-border text-gray-300 hover:text-white hover:border-port-accent"
         >
           <Pencil className="w-3.5 h-3.5" />
         </button>
@@ -141,7 +141,7 @@ function CatalogCard({ record, thumbPath, onOpen, onRenamed, onDeleted }) {
           type="button"
           onClick={startDelete}
           aria-label={`Delete ${record.name}`}
-          className="p-1.5 rounded bg-port-card/90 border border-port-border text-gray-300 hover:text-port-error hover:border-port-error"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded bg-port-card/90 border border-port-border text-gray-300 hover:text-port-error hover:border-port-error"
         >
           <Trash2 className="w-3.5 h-3.5" />
         </button>
diff --git a/client/src/components/sprites/SpriteDetailHeader.jsx b/client/src/components/sprites/SpriteDetailHeader.jsx
index b73eac0439..b9bbcd8ce2 100644
--- a/client/src/components/sprites/SpriteDetailHeader.jsx
+++ b/client/src/components/sprites/SpriteDetailHeader.jsx
@@ -63,7 +63,7 @@ export default function SpriteDetailHeader({ record, onRenamed, onDeleted }) {
               type="button"
               onClick={startRename}
               aria-label={`Rename ${record.name}`}
-              className="shrink-0 p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
             >
               <Pencil className="w-4 h-4" />
             </button>
@@ -71,7 +71,7 @@ export default function SpriteDetailHeader({ record, onRenamed, onDeleted }) {
               type="button"
               onClick={startDelete}
               aria-label={`Delete ${record.name}`}
-              className="shrink-0 p-1 rounded text-gray-400 hover:text-port-error hover:bg-port-border/50"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 p-1 rounded text-gray-400 hover:text-port-error hover:bg-port-border/50"
             >
               <Trash2 className="w-4 h-4" />
             </button>
diff --git a/client/src/components/sync/SyncDetailDrawer.jsx b/client/src/components/sync/SyncDetailDrawer.jsx
index 6d129422ba..f541d92b05 100644
--- a/client/src/components/sync/SyncDetailDrawer.jsx
+++ b/client/src/components/sync/SyncDetailDrawer.jsx
@@ -384,7 +384,7 @@ export default function SyncDetailDrawer({ kind, recordId, onClose }) {
             type="button"
             onClick={() => { refresh(); loadRecord(); }}
             title="Refresh sync status + reload record" aria-label="Refresh sync status + reload record"
-            className="p-1 text-gray-500 hover:text-gray-300 rounded"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-gray-300 rounded"
           >
             <RefreshCw className="w-3.5 h-3.5" />
           </button>
diff --git a/client/src/components/universe/VisionDescribeModal.jsx b/client/src/components/universe/VisionDescribeModal.jsx
index 07c32345c9..29df0465f0 100644
--- a/client/src/components/universe/VisionDescribeModal.jsx
+++ b/client/src/components/universe/VisionDescribeModal.jsx
@@ -246,7 +246,7 @@ export default function VisionDescribeModal({
                     onClick={() => removeImage(imageKey(img))}
                     title="Remove image"
                     aria-label="Remove image"
-                    className="absolute -top-1.5 -right-1.5 bg-port-bg border border-port-border rounded-full p-0.5 text-gray-400 hover:text-port-error"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute -top-1.5 -right-1.5 bg-port-bg border border-port-border rounded-full p-0.5 text-gray-400 hover:text-port-error"
                   >
                     <X size={11} />
                   </button>
diff --git a/client/src/components/universeBuilder/CompositeSheetsEditor.jsx b/client/src/components/universeBuilder/CompositeSheetsEditor.jsx
index 087d172ba7..827ac27958 100644
--- a/client/src/components/universeBuilder/CompositeSheetsEditor.jsx
+++ b/client/src/components/universeBuilder/CompositeSheetsEditor.jsx
@@ -103,7 +103,7 @@ export default function CompositeSheetsEditor({
                 : 'Lock all composite boards — Expand will preserve them'}
               aria-label={allSheetsLocked ? 'Unlock all composite boards' : 'Lock all composite boards'}
               aria-pressed={allSheetsLocked}
-              className={`p-1 rounded ${
+              className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded ${
                 allSheetsLocked
                   ? 'text-port-accent hover:bg-port-accent/20'
                   : 'text-gray-500 hover:text-gray-300'
@@ -292,12 +292,12 @@ function SheetRow({
   );
   const body = <div className="text-xs text-gray-400 line-clamp-3">{sheet.prompt}</div>;
   const actions = (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-2">
       {onRender && (
         <button
           onClick={onRender}
           disabled={!canRender}
-          className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
           title={canRender ? 'Render this board' : 'Save the world and configure a render backend to enable'} aria-label={canRender ? 'Render this board' : 'Save the world and configure a render backend to enable'}
         >
           <Play size={14} />
@@ -305,7 +305,7 @@ function SheetRow({
       )}
       <button
         onClick={onToggleLock}
-        className={`p-1 rounded ${sheet.locked ? 'text-port-accent hover:bg-port-accent/20' : 'text-gray-500 hover:text-gray-300'}`}
+        className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded ${sheet.locked ? 'text-port-accent hover:bg-port-accent/20' : 'text-gray-500 hover:text-gray-300'}`}
         title={sheet.locked ? 'Locked — AI expand will preserve this board' : 'Lock this board against AI expand'} aria-label={sheet.locked ? 'Locked — AI expand will preserve this board' : 'Lock this board against AI expand'}
         aria-pressed={!!sheet.locked}
       >
@@ -313,14 +313,14 @@ function SheetRow({
       </button>
       <button
         onClick={onStartEdit}
-        className="p-1 text-gray-400 hover:text-port-accent rounded"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent rounded"
         title="Edit" aria-label="Edit"
       >
         <Edit3 size={14} />
       </button>
       <button
         onClick={onRemove}
-        className="p-1 text-gray-400 hover:text-port-error rounded"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error rounded"
         title="Remove" aria-label="Remove"
       >
         <X size={14} />
diff --git a/client/src/components/universeBuilder/UniverseBibleTab.jsx b/client/src/components/universeBuilder/UniverseBibleTab.jsx
index 851e8716b5..c202662e27 100644
--- a/client/src/components/universeBuilder/UniverseBibleTab.jsx
+++ b/client/src/components/universeBuilder/UniverseBibleTab.jsx
@@ -24,7 +24,7 @@ function LockButton({ field, locked, onToggle, label }) {
     <button
       type="button"
       onClick={() => onToggle(field)}
-      className={`p-1 rounded -mr-1 transition-colors ${
+      className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded -mr-1 transition-colors ${
         isLocked
           ? 'bg-port-accent/20 text-port-accent ring-1 ring-port-accent/50 hover:bg-port-accent/30'
           : 'text-gray-600 hover:text-gray-300 hover:bg-white/5'
@@ -252,7 +252,7 @@ export default function BibleTab({
                     onClick={() => setRefineImage(null)}
                     title="Remove reference image"
                     aria-label="Remove reference image"
-                    className="absolute -top-1.5 -right-1.5 bg-port-bg border border-port-border rounded-full p-0.5 text-gray-400 hover:text-port-error"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute -top-1.5 -right-1.5 bg-port-bg border border-port-border rounded-full p-0.5 text-gray-400 hover:text-port-error"
                   >
                     <X size={11} />
                   </button>
diff --git a/client/src/components/universeBuilder/UniverseCategoryEditor.jsx b/client/src/components/universeBuilder/UniverseCategoryEditor.jsx
index ef0de5e900..99ab577478 100644
--- a/client/src/components/universeBuilder/UniverseCategoryEditor.jsx
+++ b/client/src/components/universeBuilder/UniverseCategoryEditor.jsx
@@ -172,12 +172,12 @@ export function CategoryEditor({
           {humanizeCategory(category)}
           <span className="ml-2 text-xs text-gray-500">{variations.length}</span>
         </h3>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           {onRenderCategory && (
             <button
               onClick={onRenderCategory}
               disabled={!canRender || variations.length === 0}
-              className="p-1 text-port-accent hover:bg-port-accent/20 disabled:opacity-30 disabled:cursor-not-allowed rounded"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-accent hover:bg-port-accent/20 disabled:opacity-30 disabled:cursor-not-allowed rounded"
               title={variations.length === 0 ? 'Add variations first' : 'Render this category'}
               aria-label="Render this category"
             >
@@ -188,7 +188,7 @@ export function CategoryEditor({
             <div className="relative" ref={assignWrapRef}>
               <button
                 onClick={() => setAssignOpen((v) => !v)}
-                className="p-1 text-port-accent hover:bg-port-accent/20 rounded"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-accent hover:bg-port-accent/20 rounded"
                 title="Move this bucket into a canon trunk (variations stay in place)"
                 aria-label="Assign bucket to a canon trunk"
                 aria-haspopup="menu"
@@ -226,7 +226,7 @@ export function CategoryEditor({
               <button
                 onClick={() => setGenOpen((v) => !v)}
                 disabled={generating}
-                className="p-1 text-port-accent hover:bg-port-accent/20 disabled:opacity-30 disabled:cursor-not-allowed rounded"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-accent hover:bg-port-accent/20 disabled:opacity-30 disabled:cursor-not-allowed rounded"
                 title="Ask the LLM for more variations in this category"
                 aria-label="Generate more variations"
                 aria-haspopup="menu"
@@ -286,7 +286,7 @@ export function CategoryEditor({
                 : 'Lock all variations — Expand / Generate will preserve them'}
               aria-label={allLocked ? 'Unlock all variations' : 'Lock all variations'}
               aria-pressed={allLocked}
-              className={`p-1 rounded ${
+              className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded ${
                 allLocked
                   ? 'text-port-accent hover:bg-port-accent/20'
                   : 'text-gray-500 hover:text-gray-300'
@@ -298,7 +298,7 @@ export function CategoryEditor({
           {canRemove && (
             <button
               onClick={onRemove}
-              className="p-1 text-gray-400 hover:text-port-error rounded"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error rounded"
               title="Remove category" aria-label="Remove category"
             >
               <Trash2 size={14} />
@@ -483,7 +483,7 @@ function VariationCard({
   const title = <div className="min-w-0 text-sm text-white font-medium break-words">{v.label}</div>;
   const body = <div className="text-xs text-gray-400 line-clamp-2 mt-1">{v.prompt}</div>;
   const actions = (
-    <div className="flex items-center gap-1">
+    <div className="flex items-center gap-2">
       {onPromote && (
         <div className="relative" ref={pickerIdx === idx ? pickerWrapRef : null}>
           <button
@@ -495,7 +495,7 @@ function VariationCard({
               runPromote(idx, v);
             }}
             disabled={!canPromote || promotingIdx !== null}
-            className="p-1 text-gray-400 hover:text-port-success disabled:opacity-30 disabled:cursor-not-allowed rounded"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-success disabled:opacity-30 disabled:cursor-not-allowed rounded"
             title={promoteTitle} aria-label={promoteTitle}
             aria-haspopup={requiresTargetKind ? 'menu' : undefined}
             aria-expanded={requiresTargetKind ? pickerIdx === idx : undefined}
@@ -530,7 +530,7 @@ function VariationCard({
         <button
           onClick={() => onRenderVariation(v)}
           disabled={!canRender}
-          className="p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed rounded"
           title={canRender ? 'Render this variation' : 'Save the world and configure a render backend to enable'} aria-label={canRender ? 'Render this variation' : 'Save the world and configure a render backend to enable'}
         >
           <Play size={14} />
@@ -538,7 +538,7 @@ function VariationCard({
       )}
       <button
         onClick={toggleLock}
-        className={`p-1 rounded ${locked ? 'text-port-accent hover:bg-port-accent/20' : 'text-gray-500 hover:text-gray-300'}`}
+        className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded ${locked ? 'text-port-accent hover:bg-port-accent/20' : 'text-gray-500 hover:text-gray-300'}`}
         title={locked ? 'Locked — AI expand will preserve this variation' : 'Lock this variation against AI expand'} aria-label={locked ? 'Locked — AI expand will preserve this variation' : 'Lock this variation against AI expand'}
         aria-pressed={locked}
       >
@@ -546,14 +546,14 @@ function VariationCard({
       </button>
       <button
         onClick={startEdit}
-        className="p-1 text-gray-400 hover:text-port-accent rounded"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-accent rounded"
         title="Edit" aria-label="Edit"
       >
         <Edit3 size={14} />
       </button>
       <button
         onClick={remove}
-        className="p-1 text-gray-400 hover:text-port-error rounded"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-port-error rounded"
         title="Remove" aria-label="Remove"
       >
         <X size={14} />
diff --git a/client/src/components/universeBuilder/UniverseStyleReferences.jsx b/client/src/components/universeBuilder/UniverseStyleReferences.jsx
index 78aa8589d5..aebd14fcb2 100644
--- a/client/src/components/universeBuilder/UniverseStyleReferences.jsx
+++ b/client/src/components/universeBuilder/UniverseStyleReferences.jsx
@@ -123,7 +123,7 @@ export default function UniverseStyleReferences({
                     <button
                       type="button"
                       onClick={() => onRemove?.(reference.id)}
-                      className="shrink-0 rounded p-1 text-gray-500 hover:bg-white/5 hover:text-port-error"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 rounded p-1 text-gray-500 hover:bg-white/5 hover:text-port-error"
                       aria-label={`Remove ${reference.title}`}
                       title="Remove art reference"
                     >
diff --git a/client/src/components/videoGen/IcLoraPanel.jsx b/client/src/components/videoGen/IcLoraPanel.jsx
index cdb1a8b3ba..fc526e4cdb 100644
--- a/client/src/components/videoGen/IcLoraPanel.jsx
+++ b/client/src/components/videoGen/IcLoraPanel.jsx
@@ -106,7 +106,7 @@ export default function IcLoraPanel({
                 onClick={() => onRemoveReferenceImage(i)}
                 disabled={referenceImageFiles.length <= minRefs}
                 aria-label={`Remove reference ${i + 1}`}
-                className="mt-1 p-1 text-gray-400 hover:text-port-error disabled:opacity-30 disabled:cursor-not-allowed"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center mt-1 p-1 text-gray-400 hover:text-port-error disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
diff --git a/client/src/components/videoGen/KeyframePanel.jsx b/client/src/components/videoGen/KeyframePanel.jsx
index 8466051648..906bc21260 100644
--- a/client/src/components/videoGen/KeyframePanel.jsx
+++ b/client/src/components/videoGen/KeyframePanel.jsx
@@ -72,7 +72,7 @@ export default function KeyframePanel({
                 onClick={() => onRemoveKeyframe(i)}
                 disabled={keyframes.length <= 2}
                 aria-label={`Remove keyframe ${i + 1}`}
-                className="mt-5 p-1 text-gray-400 hover:text-port-error disabled:opacity-30 disabled:cursor-not-allowed"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center mt-5 p-1 text-gray-400 hover:text-port-error disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
diff --git a/client/src/components/voice/VoicePicker.jsx b/client/src/components/voice/VoicePicker.jsx
index edf2519e71..d2498ac749 100644
--- a/client/src/components/voice/VoicePicker.jsx
+++ b/client/src/components/voice/VoicePicker.jsx
@@ -183,7 +183,7 @@ export default function VoicePicker({
         disabled={!value || previewing || disabled}
         title={value ? `Audition ${value}` : 'Pick a voice to audition'}
         aria-label={value ? `Audition ${value}` : 'Audition voice'}
-        className="shrink-0 p-1 rounded text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed"
+        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 p-1 rounded text-gray-400 hover:text-port-accent disabled:opacity-30 disabled:cursor-not-allowed"
       >
         {previewing ? <Loader2 size={12} className="animate-spin" /> : <Play size={12} />}
       </button>
diff --git a/client/src/components/voice/VoiceWidget.jsx b/client/src/components/voice/VoiceWidget.jsx
index 8c4bbb3462..6e64018ecd 100644
--- a/client/src/components/voice/VoiceWidget.jsx
+++ b/client/src/components/voice/VoiceWidget.jsx
@@ -728,7 +728,7 @@ export default function VoiceWidget() {
                 onClick={handleClear}
                 title="Clear conversation"
                 aria-label="Clear conversation"
-                className="p-1 rounded text-gray-400 hover:text-port-error hover:bg-port-error/10"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-port-error hover:bg-port-error/10"
               >
                 <Trash2 size={12} />
               </button>
@@ -842,7 +842,7 @@ export default function VoiceWidget() {
               onClick={() => setCollapsed((c) => !c)}
               title={collapsed ? 'Show conversation' : 'Hide conversation'}
               aria-label={collapsed ? 'Show conversation' : 'Hide conversation'}
-              className="p-1.5 rounded-full text-gray-400 hover:text-white hover:bg-port-border/70"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded-full text-gray-400 hover:text-white hover:bg-port-border/70"
             >
               {collapsed ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
             </button>
diff --git a/client/src/components/wiki/tabs/BrowseTab.jsx b/client/src/components/wiki/tabs/BrowseTab.jsx
index 546cccf17c..671a4001c0 100644
--- a/client/src/components/wiki/tabs/BrowseTab.jsx
+++ b/client/src/components/wiki/tabs/BrowseTab.jsx
@@ -148,7 +148,7 @@ export default function BrowseTab({ vaultId, notes, rawNotes, allNotes, onRefres
           </button>
           <button
             onClick={() => { loadTags(); setShowTags(!showTags); }}
-            className={`p-1.5 rounded ${showTags ? 'text-port-accent' : 'text-gray-500 hover:text-white'}`}
+            className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded ${showTags ? 'text-port-accent' : 'text-gray-500 hover:text-white'}`}
             title="Tags" aria-label="Tags"
           >
             <Tag size={14} />
@@ -238,7 +238,7 @@ export default function BrowseTab({ vaultId, notes, rawNotes, allNotes, onRefres
               <button
                 onClick={() => { setSelectedNote(null); updateNoteParam(null, { replace: true }); }}
                 aria-label="Back to list"
-                className="p-1 rounded hover:bg-port-card text-gray-400 hover:text-white md:hidden"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded hover:bg-port-card text-gray-400 hover:text-white md:hidden"
               >
                 <ArrowLeft size={16} />
               </button>
@@ -269,7 +269,7 @@ export default function BrowseTab({ vaultId, notes, rawNotes, allNotes, onRefres
                     <button
                       onClick={() => { setEditing(false); setNoteContent(selectedNote.content); }}
                       aria-label="Cancel"
-                      className="p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-white"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-white"
                     >
                       <X size={16} />
                     </button>
@@ -285,7 +285,7 @@ export default function BrowseTab({ vaultId, notes, rawNotes, allNotes, onRefres
                 )}
                 <button
                   onClick={() => setConfirmDelete(selectedNote.path)}
-                  className="p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-port-error"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-card text-gray-400 hover:text-port-error"
                   title="Delete note" aria-label="Delete note"
                 >
                   <Trash2 size={14} />
diff --git a/client/src/components/wiki/tabs/GraphTab.jsx b/client/src/components/wiki/tabs/GraphTab.jsx
index fca4b93f88..5e6d019be2 100644
--- a/client/src/components/wiki/tabs/GraphTab.jsx
+++ b/client/src/components/wiki/tabs/GraphTab.jsx
@@ -210,14 +210,14 @@ export default function GraphTab({ vaultId }) {
         <button
           onClick={() => setZoom(z => Math.min(z + 0.2, 3))}
           aria-label="Zoom in"
-          className="p-1.5 rounded bg-port-card border border-port-border text-gray-400 hover:text-white"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded bg-port-card border border-port-border text-gray-400 hover:text-white"
         >
           <ZoomIn size={14} />
         </button>
         <button
           onClick={() => setZoom(z => Math.max(z - 0.2, 0.3))}
           aria-label="Zoom out"
-          className="p-1.5 rounded bg-port-card border border-port-border text-gray-400 hover:text-white"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded bg-port-card border border-port-border text-gray-400 hover:text-white"
         >
           <ZoomOut size={14} />
         </button>
diff --git a/client/src/hooks/useAgentFeedbackToast.jsx b/client/src/hooks/useAgentFeedbackToast.jsx
index b90a89a3ed..01a79702c6 100644
--- a/client/src/hooks/useAgentFeedbackToast.jsx
+++ b/client/src/hooks/useAgentFeedbackToast.jsx
@@ -94,10 +94,10 @@ function AgentFeedbackToast({ t, agentData, onFeedback }) {
       {/* Feedback buttons */}
       <div className="flex items-center gap-2 pt-1 border-t border-port-border/30">
         <span className="text-xs text-gray-500">Was this helpful?</span>
-        <div className="flex gap-1 ml-auto">
+        <div className="flex gap-2 ml-auto">
           <button
             onClick={() => onFeedback(agentId, 'positive', t.id)}
-            className="p-1.5 rounded bg-green-500/20 hover:bg-green-500/30 text-green-400 transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded bg-green-500/20 hover:bg-green-500/30 text-green-400 transition-colors"
             title="Helpful"
             aria-label="Mark as helpful"
           >
@@ -105,7 +105,7 @@ function AgentFeedbackToast({ t, agentData, onFeedback }) {
           </button>
           <button
             onClick={() => onFeedback(agentId, 'negative', t.id)}
-            className="p-1.5 rounded bg-red-500/20 hover:bg-red-500/30 text-red-400 transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded bg-red-500/20 hover:bg-red-500/30 text-red-400 transition-colors"
             title="Not helpful"
             aria-label="Mark as not helpful"
           >
diff --git a/client/src/pages/ApiExplorer.jsx b/client/src/pages/ApiExplorer.jsx
index 6397173091..f159d25859 100644
--- a/client/src/pages/ApiExplorer.jsx
+++ b/client/src/pages/ApiExplorer.jsx
@@ -142,7 +142,7 @@ function CatalogView() {
                   </div>
                   <p className="mt-1 text-xs text-gray-500">{operation.summary} · {operation.access}</p>
                 </div>
-                <button type="button" onClick={() => copyToClipboard(`${operation.method} ${operation.path}`, 'Operation copied')} className="p-1.5 text-gray-500 hover:text-white" aria-label={`Copy ${operation.method} ${operation.path}`}>
+                <button type="button" onClick={() => copyToClipboard(`${operation.method} ${operation.path}`, 'Operation copied')} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-white" aria-label={`Copy ${operation.method} ${operation.path}`}>
                   <Copy size={13} />
                 </button>
               </div>
@@ -279,7 +279,7 @@ function EventCatalogView() {
                   </details>
                 )}
               </div>
-              <button type="button" onClick={() => copyToClipboard(event.event, 'Event copied')} className="p-1.5 text-gray-500 hover:text-white" aria-label={`Copy ${event.event}`}><Copy size={13} /></button>
+              <button type="button" onClick={() => copyToClipboard(event.event, 'Event copied')} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-white" aria-label={`Copy ${event.event}`}><Copy size={13} /></button>
             </div>
           </div>
         ))}
diff --git a/client/src/pages/Browser.jsx b/client/src/pages/Browser.jsx
index 95ac7d95f1..a50a8e23fe 100644
--- a/client/src/pages/Browser.jsx
+++ b/client/src/pages/Browser.jsx
@@ -597,7 +597,7 @@ export default function BrowserPage() {
                             </a>
                             <button
                               onClick={() => handleDeleteDownload(file.name)}
-                              className="p-1.5 rounded-md text-gray-400 hover:text-port-error hover:bg-port-border/50 transition-colors"
+                              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded-md text-gray-400 hover:text-port-error hover:bg-port-border/50 transition-colors"
                               title="Delete file" aria-label="Delete file"
                             >
                               <Trash2 size={16} />
diff --git a/client/src/pages/ChiefOfStaff.jsx b/client/src/pages/ChiefOfStaff.jsx
index 41c2573524..08ef8a6405 100644
--- a/client/src/pages/ChiefOfStaff.jsx
+++ b/client/src/pages/ChiefOfStaff.jsx
@@ -848,7 +848,7 @@ export default function ChiefOfStaff() {
       {desktopPanelCollapsed && (
         <button
           onClick={toggleDesktopPanel}
-          className="hidden lg:flex absolute left-0 top-2 z-20 p-1.5 text-port-text-muted hover:text-port-text transition-colors rounded-r-md hover:bg-port-border/80 bg-port-card/60 border border-l-0 border-port-accent-2/20"
+          className="min-h-[44px] min-w-[44px] items-center justify-center hidden lg:flex absolute left-0 top-2 z-20 p-1.5 text-port-text-muted hover:text-port-text transition-colors rounded-r-md hover:bg-port-border/80 bg-port-card/60 border border-l-0 border-port-accent-2/20"
           aria-label="Expand CoS panel"
           title="Expand CoS panel"
         >
@@ -866,7 +866,7 @@ export default function ChiefOfStaff() {
             <div className="hidden lg:block relative">
               <button
                 onClick={toggleDesktopPanel}
-                className="absolute top-2 right-2 z-10 p-1.5 text-gray-500 hover:text-white transition-colors rounded-md hover:bg-white/5"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute top-2 right-2 z-10 p-1.5 text-gray-500 hover:text-white transition-colors rounded-md hover:bg-white/5"
                 aria-label="Collapse CoS panel"
                 title="Collapse CoS panel"
               >
@@ -947,7 +947,7 @@ export default function ChiefOfStaff() {
           {/* Desktop Collapse Button */}
           <button
             onClick={toggleDesktopPanel}
-            className="hidden lg:flex absolute top-2 right-2 z-20 p-1.5 text-gray-500 hover:text-white transition-colors rounded-md hover:bg-white/5"
+            className="min-h-[44px] min-w-[44px] items-center justify-center hidden lg:flex absolute top-2 right-2 z-20 p-1.5 text-gray-500 hover:text-white transition-colors rounded-md hover:bg-white/5"
             aria-label="Collapse CoS panel"
             title="Collapse CoS panel"
           >
diff --git a/client/src/pages/FableLoom.jsx b/client/src/pages/FableLoom.jsx
index ba9a301555..0e9b274d51 100644
--- a/client/src/pages/FableLoom.jsx
+++ b/client/src/pages/FableLoom.jsx
@@ -304,7 +304,7 @@ export default function FableLoom() {
                         type="button"
                         aria-label={`Delete ${loom.name}`}
                         onClick={() => del.requestDelete(loom.id)}
-                        className="text-port-text-muted hover:text-port-error p-1"
+                        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-port-text-muted hover:text-port-error p-1"
                       >
                         <Trash2 size={15} />
                       </button>
diff --git a/client/src/pages/HistoryPage.jsx b/client/src/pages/HistoryPage.jsx
index 5405f823c3..7706cbdb61 100644
--- a/client/src/pages/HistoryPage.jsx
+++ b/client/src/pages/HistoryPage.jsx
@@ -213,7 +213,7 @@ export function HistoryPage() {
                       <span className="text-sm text-gray-500 shrink-0">{formatTime(entry.timestamp)}</span>
                       <button
                         onClick={(e) => handleDelete(entry.id, e)}
-                        className="p-1 text-gray-500 hover:text-port-error transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-port-accent rounded"
+                        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-port-accent rounded"
                         title="Delete entry"
                         aria-label={`Delete ${entry.action} entry from ${formatTime(entry.timestamp)}`}
                       >
diff --git a/client/src/pages/ImageGen.jsx b/client/src/pages/ImageGen.jsx
index cb369c9fd3..9877a200b8 100644
--- a/client/src/pages/ImageGen.jsx
+++ b/client/src/pages/ImageGen.jsx
@@ -1305,7 +1305,7 @@ export default function ImageGen() {
           <button
             onClick={() => refreshStatus(effectiveMode, modelId)}
             disabled={statusLoading}
-            className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50 disabled:opacity-50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50 disabled:opacity-50"
             title="Refresh status" aria-label="Refresh status"
           >
             <RefreshCw className={`w-3.5 h-3.5 ${statusLoading ? 'animate-spin' : ''}`} />
diff --git a/client/src/pages/Instances.jsx b/client/src/pages/Instances.jsx
index 6799ee5b28..0ba6751a9f 100644
--- a/client/src/pages/Instances.jsx
+++ b/client/src/pages/Instances.jsx
@@ -1149,12 +1149,12 @@ function PeerCard({ peer, onRefresh, syncStatus, tailnetInfo, parityReport }) {
             </div>
           )}
         </div>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           <button
             type="button"
             onClick={handleSync}
             disabled={syncing || peer.status !== 'online'}
-            className="p-1.5 text-gray-500 hover:text-port-accent transition-colors disabled:opacity-40 disabled:hover:text-gray-500"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-accent transition-colors disabled:opacity-40 disabled:hover:text-gray-500"
             title={peer.status === 'online' ? 'Sync now' : 'Peer offline — cannot sync'}
             aria-label={peer.status === 'online' ? 'Sync now' : 'Peer offline — cannot sync'}
           >
@@ -1163,7 +1163,7 @@ function PeerCard({ peer, onRefresh, syncStatus, tailnetInfo, parityReport }) {
           <button
             onClick={handleProbe}
             disabled={probing}
-            className="p-1.5 text-gray-500 hover:text-white transition-colors disabled:opacity-50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-white transition-colors disabled:opacity-50"
             title="Probe now" aria-label="Probe now"
           >
             <RefreshCw size={14} className={probing ? 'animate-spin' : ''} />
@@ -1183,7 +1183,7 @@ function PeerCard({ peer, onRefresh, syncStatus, tailnetInfo, parityReport }) {
           ) : (
             <button
               onClick={() => setConfirmRemove(true)}
-              className="p-1.5 text-gray-600 hover:text-port-error transition-colors"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-600 hover:text-port-error transition-colors"
               title="Remove peer" aria-label="Remove peer"
             >
               <Trash2 size={14} />
diff --git a/client/src/pages/Loops.jsx b/client/src/pages/Loops.jsx
index 8cdfed505b..2e4ebc55b0 100644
--- a/client/src/pages/Loops.jsx
+++ b/client/src/pages/Loops.jsx
@@ -250,22 +250,22 @@ function LoopCard({ loop, onAction, expandedId, onToggle }) {
           </div>
         </div>
 
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
           {loop.isRunning ? (
             <>
-              <button onClick={e => { e.stopPropagation(); onAction('trigger', loop.id); }} className="p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-accent" title="Run now" aria-label="Run now">
+              <button onClick={e => { e.stopPropagation(); onAction('trigger', loop.id); }} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-accent" title="Run now" aria-label="Run now">
                 <Zap size={14} />
               </button>
-              <button onClick={e => { e.stopPropagation(); onAction('stop', loop.id); }} className="p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-warning" title="Stop" aria-label="Stop">
+              <button onClick={e => { e.stopPropagation(); onAction('stop', loop.id); }} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-warning" title="Stop" aria-label="Stop">
                 <Square size={14} />
               </button>
             </>
           ) : (
-            <button onClick={e => { e.stopPropagation(); onAction('resume', loop.id); }} className="p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-success" title="Resume" aria-label="Resume">
+            <button onClick={e => { e.stopPropagation(); onAction('resume', loop.id); }} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-success" title="Resume" aria-label="Resume">
               <Play size={14} />
             </button>
           )}
-          <button onClick={e => { e.stopPropagation(); onAction('delete', loop.id); }} className="p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-error" title="Delete" aria-label="Delete">
+          <button onClick={e => { e.stopPropagation(); onAction('delete', loop.id); }} className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded hover:bg-port-border text-gray-400 hover:text-port-error" title="Delete" aria-label="Delete">
             <Trash2 size={14} />
           </button>
           {expanded ? <ChevronDown size={14} className="text-gray-500" /> : <ChevronRight size={14} className="text-gray-500" />}
diff --git a/client/src/pages/Loras.jsx b/client/src/pages/Loras.jsx
index 32d802ef2b..3c869d177a 100644
--- a/client/src/pages/Loras.jsx
+++ b/client/src/pages/Loras.jsx
@@ -1357,7 +1357,7 @@ function LoraCard({ lora, onDelete, onMeasured, deleting, deleteConfirm }) {
             <button
               onClick={runEffectCheck}
               disabled={checkingEffect}
-              className="text-gray-400 hover:text-gray-200 p-1.5 rounded hover:bg-port-bg disabled:opacity-50 disabled:cursor-not-allowed"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-gray-400 hover:text-gray-200 p-1.5 rounded hover:bg-port-bg disabled:opacity-50 disabled:cursor-not-allowed"
               title={`Check whether ${displayName} actually changes a render`}
               aria-label={`Check effect of ${displayName}`}
             >
@@ -1365,7 +1365,7 @@ function LoraCard({ lora, onDelete, onMeasured, deleting, deleteConfirm }) {
             </button>
             <button
               onClick={() => deleteConfirm.requestDelete(lora.filename)}
-              className="text-port-error hover:text-port-error/80 p-1.5 rounded hover:bg-port-error/10"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center text-port-error hover:text-port-error/80 p-1.5 rounded hover:bg-port-error/10"
               title={`Delete ${displayName}`} aria-label={`Delete ${displayName}`}
             >
               <Trash2 size={14} />
diff --git a/client/src/pages/MediaCollectionDetail.jsx b/client/src/pages/MediaCollectionDetail.jsx
index b05398e2e8..56e5465265 100644
--- a/client/src/pages/MediaCollectionDetail.jsx
+++ b/client/src/pages/MediaCollectionDetail.jsx
@@ -514,7 +514,7 @@ export default function MediaCollectionDetail() {
               type="button"
               onClick={exitSelectMode}
               disabled={bulkBusy}
-              className="p-1 text-gray-400 hover:text-white disabled:opacity-40"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white disabled:opacity-40"
               title="Exit select mode"
               aria-label="Exit select mode"
             >
diff --git a/client/src/pages/MediaHistory.jsx b/client/src/pages/MediaHistory.jsx
index 75a56079e1..18061a9d89 100644
--- a/client/src/pages/MediaHistory.jsx
+++ b/client/src/pages/MediaHistory.jsx
@@ -203,7 +203,7 @@ export default function MediaHistory() {
               <button
                 type="button"
                 onClick={() => setQuery('')}
-                className="absolute right-1 top-1/2 -translate-y-1/2 p-0.5 text-gray-500 hover:text-white"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center absolute right-1 top-1/2 -translate-y-1/2 p-0.5 text-gray-500 hover:text-white"
                 title="Clear search" aria-label="Clear search"
               >
                 <X className="w-3.5 h-3.5" />
diff --git a/client/src/pages/MoodBoardDetail.jsx b/client/src/pages/MoodBoardDetail.jsx
index c4037171a2..7b6f9b76f3 100644
--- a/client/src/pages/MoodBoardDetail.jsx
+++ b/client/src/pages/MoodBoardDetail.jsx
@@ -626,7 +626,7 @@ export default function MoodBoardDetail() {
                           onClick={() => setAnalyzeItemId(item.id)}
                           title={item.analysis ? 'View AI analysis' : 'Analyze with AI'}
                           aria-label={item.analysis ? 'View AI analysis' : 'Analyze with AI'}
-                          className={`p-1 transition-colors ${item.analysis ? 'text-port-accent hover:text-port-accent/80' : 'text-gray-500 hover:text-white'}`}
+                          className={`min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 transition-colors ${item.analysis ? 'text-port-accent hover:text-port-accent/80' : 'text-gray-500 hover:text-white'}`}
                         >
                           <ScanEye className="w-3.5 h-3.5" aria-hidden="true" />
                         </button>
@@ -636,7 +636,7 @@ export default function MoodBoardDetail() {
                         onClick={() => setConfirmingItemId(item.id)}
                         title="Remove item"
                         aria-label="Remove item"
-                        className="p-1 text-gray-500 hover:text-port-error transition-colors"
+                        className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                       >
                         <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                       </button>
@@ -692,7 +692,7 @@ export default function MoodBoardDetail() {
                   <button
                     type="button"
                     onClick={() => copyToClipboard(analyzeItem.analysis.prompt, 'Analysis prompt copied')}
-                    className="p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 rounded text-gray-400 hover:text-white hover:bg-port-border/50"
                     aria-label="Copy saved analysis prompt"
                   >
                     <Copy className="w-3.5 h-3.5" aria-hidden="true" />
diff --git a/client/src/pages/MoodBoards.jsx b/client/src/pages/MoodBoards.jsx
index 9083d911d3..c5ee514c49 100644
--- a/client/src/pages/MoodBoards.jsx
+++ b/client/src/pages/MoodBoards.jsx
@@ -140,7 +140,7 @@ export default function MoodBoards() {
                     onClick={() => setConfirmingId(board.id)}
                     title="Delete board"
                     aria-label={`Delete ${board.name}`}
-                    className="p-1.5 text-gray-500 hover:text-port-error transition-colors"
+                    className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error transition-colors"
                   >
                     <Trash2 className="w-4 h-4" aria-hidden="true" />
                   </button>
diff --git a/client/src/pages/PipelineSeries.jsx b/client/src/pages/PipelineSeries.jsx
index 4809dbf284..8228539d7d 100644
--- a/client/src/pages/PipelineSeries.jsx
+++ b/client/src/pages/PipelineSeries.jsx
@@ -204,7 +204,7 @@ export default function PipelineSeries() {
           <button
             type="button"
             onClick={toggleSidebar}
-            className="hidden lg:flex absolute left-0 top-2 z-20 p-1.5 text-gray-500 hover:text-white transition-colors rounded-r-md hover:bg-port-card bg-port-card/60 border border-l-0 border-port-border"
+            className="min-h-[44px] min-w-[44px] items-center justify-center hidden lg:flex absolute left-0 top-2 z-20 p-1.5 text-gray-500 hover:text-white transition-colors rounded-r-md hover:bg-port-card bg-port-card/60 border border-l-0 border-port-border"
             title="Show series bible"
             aria-label="Expand series bible sidebar"
           >
@@ -351,7 +351,7 @@ function BibleSidebar({ series, universes, patchSeries, onSeriesUpdate, onFlushP
         <button
           type="button"
           onClick={onCollapse}
-          className="hidden lg:inline-flex p-1.5 rounded text-gray-500 hover:text-white hover:bg-port-bg"
+          className="min-h-[44px] min-w-[44px] items-center justify-center hidden lg:inline-flex p-1.5 rounded text-gray-500 hover:text-white hover:bg-port-bg"
           title="Collapse bible sidebar"
           aria-label="Collapse bible sidebar"
         >
diff --git a/client/src/pages/PromptManager.jsx b/client/src/pages/PromptManager.jsx
index a5980af6c5..11b8ffd24c 100644
--- a/client/src/pages/PromptManager.jsx
+++ b/client/src/pages/PromptManager.jsx
@@ -526,7 +526,7 @@ export default function PromptManager() {
               <h3 className="text-sm font-medium text-gray-400">Prompt Stages</h3>
               <button
                 onClick={() => setCreatingStage(true)}
-                className="p-1 text-port-accent hover:text-port-accent/80"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-accent hover:text-port-accent/80"
                 title="New Stage" aria-label="New Stage"
               >
                 <Plus size={16} />
@@ -781,7 +781,7 @@ export default function PromptManager() {
               <button
                 onClick={newVariable}
                 aria-label="Add variable"
-                className="p-1 text-port-accent hover:text-port-accent/80"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-port-accent hover:text-port-accent/80"
               >
                 <Plus size={16} />
               </button>
@@ -818,7 +818,7 @@ export default function PromptManager() {
                     <button
                       onClick={() => requestVarDelete(key)}
                       aria-label={`Delete variable ${v.name || key}`}
-                      className="p-1 text-gray-500 hover:text-port-error"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error"
                     >
                       <Trash2 size={14} />
                     </button>
diff --git a/client/src/pages/Review.jsx b/client/src/pages/Review.jsx
index 6286526f45..c27cbbc533 100644
--- a/client/src/pages/Review.jsx
+++ b/client/src/pages/Review.jsx
@@ -449,7 +449,7 @@ export default function Review() {
                 </span>
                 <button
                   onClick={() => setBriefingFullscreen(prev => !prev)}
-                  className="p-1 text-gray-500 hover:text-white transition-colors rounded-md hover:bg-white/5"
+                  className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-white transition-colors rounded-md hover:bg-white/5"
                   title={briefingFullscreen ? 'Exit fullscreen' : 'Fullscreen'} aria-label={briefingFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
                 >
                   {briefingFullscreen ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
@@ -609,7 +609,7 @@ function QueueRow({ item, onDrill, onDismiss, onResolve, onPromoteAsk, resolving
           </p>
         )}
       </div>
-      <div className="flex items-center gap-1 shrink-0 flex-wrap justify-end">
+      <div className="flex items-center gap-2 shrink-0 flex-wrap justify-end">
         {item.action && onResolve && (
           <button
             onClick={() => onResolve(item)}
@@ -657,14 +657,14 @@ function QueueRow({ item, onDrill, onDismiss, onResolve, onPromoteAsk, resolving
         )}
         <button
           onClick={() => onDrill(item)}
-          className="p-1.5 text-gray-500 hover:text-port-accent transition-colors"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-accent transition-colors"
           title="Open" aria-label="Open"
         >
           <ArrowRight size={16} />
         </button>
         <button
           onClick={() => onDismiss(item.id)}
-          className="p-1.5 text-gray-500 hover:text-port-warning transition-colors"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-warning transition-colors"
           title="Dismiss from queue (this session)" aria-label="Dismiss from queue (this session)"
         >
           <X size={16} />
@@ -811,11 +811,11 @@ function ReviewItem({ item, config, idScope, isEditing, onComplete, onDismiss, o
       </div>
 
       {isPending && !isEditing && (
-        <div className="flex items-center gap-1 shrink-0">
+        <div className="flex items-center gap-2 shrink-0">
           {item.type === 'todo' && (
             <button
               onClick={onStartEdit}
-              className="p-1.5 text-gray-500 hover:text-white transition-colors"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-white transition-colors"
               title="Edit" aria-label="Edit"
             >
               <Pencil size={14} />
@@ -823,21 +823,21 @@ function ReviewItem({ item, config, idScope, isEditing, onComplete, onDismiss, o
           )}
           <button
             onClick={() => onComplete(item.id)}
-            className="p-1.5 text-gray-500 hover:text-port-success transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-success transition-colors"
             title={item.type === 'alert' ? 'Accept' : 'Complete'} aria-label={item.type === 'alert' ? 'Accept' : 'Complete'}
           >
             <CheckCircle2 size={16} />
           </button>
           <button
             onClick={() => onDismiss(item.id)}
-            className="p-1.5 text-gray-500 hover:text-port-warning transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-warning transition-colors"
             title={item.type === 'alert' ? 'Reject' : 'Dismiss'} aria-label={item.type === 'alert' ? 'Reject' : 'Dismiss'}
           >
             <X size={16} />
           </button>
           <button
             onClick={() => onDelete(item.id)}
-            className="p-1.5 text-gray-500 hover:text-port-error transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-500 hover:text-port-error transition-colors"
             title="Delete" aria-label="Delete"
           >
             <Trash2 size={14} />
diff --git a/client/src/pages/RoundEditor.jsx b/client/src/pages/RoundEditor.jsx
index 4f6655fa3d..1e8bffeb6b 100644
--- a/client/src/pages/RoundEditor.jsx
+++ b/client/src/pages/RoundEditor.jsx
@@ -77,7 +77,7 @@ export default function RoundEditor() {
         <button
           type="button"
           onClick={() => navigate("/rounds")}
-          className="p-1 text-gray-400 hover:text-white transition-colors"
+          className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
           title="Back to Rounds"
           aria-label="Back to Rounds"
         >
diff --git a/client/src/pages/RunnerPage.jsx b/client/src/pages/RunnerPage.jsx
index b91a77ddff..6582c7fff1 100644
--- a/client/src/pages/RunnerPage.jsx
+++ b/client/src/pages/RunnerPage.jsx
@@ -270,7 +270,7 @@ ${prompt.trim()}`;
             </div>
             <button
               onClick={() => setContinueContext(null)}
-              className="p-1 text-gray-400 hover:text-white"
+              className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white"
               title="Dismiss context"
               aria-label="Dismiss context"
             >
diff --git a/client/src/pages/ThreejsModelDetail.jsx b/client/src/pages/ThreejsModelDetail.jsx
index 81fd74447c..c2155133f8 100644
--- a/client/src/pages/ThreejsModelDetail.jsx
+++ b/client/src/pages/ThreejsModelDetail.jsx
@@ -557,7 +557,7 @@ export default function ThreejsModelDetail() {
           <button
             type="button"
             onClick={() => setConfirmingDelete(true)}
-            className="rounded p-1.5 text-gray-500 hover:bg-port-error/10 hover:text-port-error"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center rounded p-1.5 text-gray-500 hover:bg-port-error/10 hover:text-port-error"
             aria-label={`Delete ${record.name}`}
             title="Delete model"
           >
diff --git a/client/src/pages/Tribe.jsx b/client/src/pages/Tribe.jsx
index 6510ed6b44..23e31a1c55 100644
--- a/client/src/pages/Tribe.jsx
+++ b/client/src/pages/Tribe.jsx
@@ -493,7 +493,7 @@ function MemoryLinksPanel({ personId }) {
                 onClick={() => unlinkMemory(link.memoryId)}
                 title="Unlink memory"
                 aria-label="Unlink memory"
-                className="shrink-0 rounded p-1 text-gray-500 hover:text-rose-300"
+                className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center shrink-0 rounded p-1 text-gray-500 hover:text-rose-300"
               >
                 <X size={14} aria-hidden="true" />
               </button>
diff --git a/client/src/pages/VideoGen.jsx b/client/src/pages/VideoGen.jsx
index 73fb67267b..df0a216055 100644
--- a/client/src/pages/VideoGen.jsx
+++ b/client/src/pages/VideoGen.jsx
@@ -859,7 +859,7 @@ export default function VideoGen() {
           <button
             onClick={refreshStatus}
             disabled={statusLoading}
-            className="p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50 disabled:opacity-50"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 rounded text-gray-400 hover:text-white hover:bg-port-border/50 disabled:opacity-50"
             title="Refresh status" aria-label="Refresh status"
           >
             <RefreshCw className={`w-3.5 h-3.5 ${statusLoading ? 'animate-spin' : ''}`} />
diff --git a/client/src/pages/VideoTimeline.jsx b/client/src/pages/VideoTimeline.jsx
index 396125ff65..6f31a9534e 100644
--- a/client/src/pages/VideoTimeline.jsx
+++ b/client/src/pages/VideoTimeline.jsx
@@ -118,7 +118,7 @@ export default function VideoTimeline() {
                     <button
                       type="button"
                       onClick={() => handleDelete(project)}
-                      className="p-1 text-gray-500 hover:text-port-error transition-colors"
+                      className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-500 hover:text-port-error transition-colors"
                       title="Delete project" aria-label="Delete project"
                     >
                       <Trash2 className="w-4 h-4" />
diff --git a/client/src/pages/VideoTimelineEditor.jsx b/client/src/pages/VideoTimelineEditor.jsx
index c0dc6b7818..34db529ca9 100644
--- a/client/src/pages/VideoTimelineEditor.jsx
+++ b/client/src/pages/VideoTimelineEditor.jsx
@@ -766,7 +766,7 @@ export default function VideoTimelineEditor() {
           <button
             type="button"
             onClick={() => navigate('/media/timeline')}
-            className="p-1.5 text-gray-400 hover:text-white"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1.5 text-gray-400 hover:text-white"
             title="Back to projects" aria-label="Back to projects"
           >
             <ArrowLeft className="w-4 h-4" />
diff --git a/client/src/pages/WritersRoom.jsx b/client/src/pages/WritersRoom.jsx
index 49330db078..ab448b2dce 100644
--- a/client/src/pages/WritersRoom.jsx
+++ b/client/src/pages/WritersRoom.jsx
@@ -134,7 +134,7 @@ export default function WritersRoom() {
         <div className="flex items-center gap-2 px-3 py-1.5 border-b border-port-border bg-port-card">
           <button
             onClick={toggleLibrary}
-            className="p-1 text-gray-400 hover:text-white transition-colors"
+            className="min-h-[44px] min-w-[44px] inline-flex items-center justify-center p-1 text-gray-400 hover:text-white transition-colors"
             title="Show library"
             aria-label="Show library"
           >