diff --git a/.github/instructions/frontend-style-guide.instructions.md b/.github/instructions/frontend-style-guide.instructions.md
index f102bb66b3..a1f292c57d 100644
--- a/.github/instructions/frontend-style-guide.instructions.md
+++ b/.github/instructions/frontend-style-guide.instructions.md
@@ -545,6 +545,8 @@ myPromise.then((v) => console.log(v))
 - Use semantic HTML elements (`<nav>`, `<main>`, `<button>`, etc.) and Fluent UI components (which are accessible by default).
 - Add `aria-label` or `aria-describedby` when the visual label is insufficient.
 - Interactive elements MUST be keyboard-accessible. Use `data-testid` for test selectors, not DOM structure.
+- Small and icon buttons that are reachable on touch/mobile MUST meet a minimum touch-target size. Apply the `mobileTouchTarget` (or `mobileTouchTargetHeight`) helper from `src/styles/touchTargets` in the component's `makeStyles` and set it on the button's `className`.
+- Use `NARROW_VIEWPORT_QUERY` for layout/reflow (wrapping, stacking on small screens) and `TOUCH_INPUT_QUERY` for sizing decisions (touch-target minimums). Never use `NARROW_VIEWPORT_QUERY` for hit-area sizing.
 
 ### Comments & Documentation
 - Use `/** JSDoc */` for documentation that users of the code should read (exported functions, components, interfaces).
diff --git a/frontend/e2e/accessibility.spec.ts b/frontend/e2e/accessibility.spec.ts
index 4dad46118a..adc89c464a 100644
--- a/frontend/e2e/accessibility.spec.ts
+++ b/frontend/e2e/accessibility.spec.ts
@@ -1,6 +1,11 @@
 import { test, expect, type Locator, type Page } from "@playwright/test";
 import { makeTarget } from "./_targets";
 
+const MOBILE_VIEWPORT = { width: 390, height: 844 };
+const DESKTOP_VIEWPORT = { width: 1280, height: 800 };
+
+type TourViewportName = "mobile" | "desktop";
+
 async function expectMinimumTouchTarget(locator: Locator, minimum = 44): Promise<void> {
   await expect(locator).toBeVisible();
 
@@ -59,6 +64,37 @@ async function expectTourContained(page: Page, dialog: Locator, checkTouchTarget
   }
 }
 
+async function expectTourContainedAndActionable(
+  page: Page,
+  viewportName: TourViewportName
+): Promise<void> {
+  await page.getByRole("button", { name: "Take a tour" }).click();
+
+  const dialog = page.getByRole("alertdialog");
+
+  for (let step = 0; step < 5; step += 1) {
+    await expect(dialog).toContainText(`${step + 1} of 5`);
+    await expectTourContained(page, dialog, viewportName === "mobile");
+
+    if (viewportName === "desktop" && step === 0) {
+      const targetBox = await page.locator('[data-tour="sidebar-nav"]').boundingBox();
+      const dialogBox = await dialog.boundingBox();
+
+      expect(targetBox).not.toBeNull();
+      expect(dialogBox).not.toBeNull();
+      expect(dialogBox!.x).toBeGreaterThanOrEqual(targetBox!.x + targetBox!.width);
+    }
+
+    if (step < 4) {
+      await dialog.getByRole("button", { name: "Next", exact: true }).click();
+    }
+  }
+
+  await dialog.getByRole("button", { name: "Anchors Away!", exact: true }).click();
+  await expect(dialog).toBeHidden();
+  await expect(page).toHaveURL(/\/$/);
+}
+
 test.describe("Accessibility", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
@@ -270,73 +306,53 @@ test.describe("Accessibility", () => {
     }
   });
 
-  test("mobile audit controls provide 44px touch targets", async ({ page }) => {
-    await page.setViewportSize({ width: 390, height: 844 });
-
-    await expectMinimumTouchTarget(page.getByRole("button", { name: "Labels" }));
-    await expectMinimumTouchTarget(page.getByRole("button", { name: "Configure a target" }));
-    await expectMinimumTouchTarget(page.getByRole("button", { name: "Take a tour" }));
-
-    await page.route(/\/api\/targets/, async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: "application/json",
-        body: JSON.stringify({
-          items: [
-            makeTarget({
-              target_registry_name: "mobile-touch-target",
-              target_type: "OpenAIChatTarget",
-              endpoint: "https://test.com",
-              model_name: "gpt-4o",
-            }),
-          ],
-          pagination: { limit: 200, has_more: false, next_cursor: null, prev_cursor: null },
-        }),
+  test.describe("mobile touch context", () => {
+    test.use({ hasTouch: true });
+
+    test("mobile audit controls provide 44px touch targets", async ({ page }) => {
+      await page.setViewportSize(MOBILE_VIEWPORT);
+
+      await expectMinimumTouchTarget(page.getByRole("button", { name: "Labels" }));
+      await expectMinimumTouchTarget(page.getByRole("button", { name: "Configure a target" }));
+      await expectMinimumTouchTarget(page.getByRole("button", { name: "Take a tour" }));
+
+      await page.route(/\/api\/targets/, async (route) => {
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          body: JSON.stringify({
+            items: [
+              makeTarget({
+                target_registry_name: "mobile-touch-target",
+                target_type: "OpenAIChatTarget",
+                endpoint: "https://test.com",
+                model_name: "gpt-4o",
+              }),
+            ],
+            pagination: { limit: 200, has_more: false, next_cursor: null, prev_cursor: null },
+          }),
+        });
       });
+
+      await page.getByRole("button", { name: "Configuration" }).click();
+      await expect(
+        page.getByRole("heading", { level: 1, name: "Target Configuration" })
+      ).toBeVisible();
+      await expect(page.getByRole("button", { name: "Refresh" })).toBeEnabled();
+      await expectMinimumTouchTarget(page.getByRole("button", { name: "Refresh" }));
+      await expectMinimumTouchTarget(page.getByRole("button", { name: "New Target" }));
     });
 
-    await page.getByRole("button", { name: "Configuration" }).click();
-    await expect(
-      page.getByRole("heading", { level: 1, name: "Target Configuration" })
-    ).toBeVisible();
-    await expect(page.getByRole("button", { name: "Refresh" })).toBeEnabled();
-    await expectMinimumTouchTarget(page.getByRole("button", { name: "Refresh" }));
-    await expectMinimumTouchTarget(page.getByRole("button", { name: "New Target" }));
+    test("tour remains contained and actionable on mobile", async ({ page }) => {
+      await page.setViewportSize(MOBILE_VIEWPORT);
+      await expectTourContainedAndActionable(page, "mobile");
+    });
   });
 
-  for (const viewport of [
-    { name: "mobile", width: 390, height: 844 },
-    { name: "desktop", width: 1280, height: 800 },
-  ]) {
-    test(`tour remains contained and actionable on ${viewport.name}`, async ({ page }) => {
-      await page.setViewportSize({ width: viewport.width, height: viewport.height });
-      await page.getByRole("button", { name: "Take a tour" }).click();
-
-      const dialog = page.getByRole("alertdialog");
-
-      for (let step = 0; step < 5; step += 1) {
-        await expect(dialog).toContainText(`${step + 1} of 5`);
-        await expectTourContained(page, dialog, viewport.name === "mobile");
-
-        if (viewport.name === "desktop" && step === 0) {
-          const targetBox = await page.locator('[data-tour="sidebar-nav"]').boundingBox();
-          const dialogBox = await dialog.boundingBox();
-
-          expect(targetBox).not.toBeNull();
-          expect(dialogBox).not.toBeNull();
-          expect(dialogBox!.x).toBeGreaterThanOrEqual(targetBox!.x + targetBox!.width);
-        }
-
-        if (step < 4) {
-          await dialog.getByRole("button", { name: "Next", exact: true }).click();
-        }
-      }
-
-      await dialog.getByRole("button", { name: "Anchors Away!", exact: true }).click();
-      await expect(dialog).toBeHidden();
-      await expect(page).toHaveURL(/\/$/);
-    });
-  }
+  test("tour remains contained and actionable on desktop", async ({ page }) => {
+    await page.setViewportSize(DESKTOP_VIEWPORT);
+    await expectTourContainedAndActionable(page, "desktop");
+  });
 });
 
 test.describe("Visual Consistency", () => {
diff --git a/frontend/e2e/touch-targets.spec.ts b/frontend/e2e/touch-targets.spec.ts
new file mode 100644
index 0000000000..0543cc8a63
--- /dev/null
+++ b/frontend/e2e/touch-targets.spec.ts
@@ -0,0 +1,559 @@
+import { expect, test, type Locator, type Page } from "@playwright/test";
+import { makeTarget } from "./_targets";
+
+const MOBILE_VIEWPORT = { width: 390, height: 844 };
+const DESKTOP_VIEWPORT = { width: 1280, height: 800 };
+const MINIMUM_TOUCH_TARGET_SIZE = 44;
+
+const TARGETS = [
+  makeTarget({
+    target_registry_name: "mobile-round-robin",
+    target_type: "RoundRobinTarget",
+    model_name: "mobile-router",
+    capabilities: {
+      supports_multi_turn: true,
+      supports_system_prompt: true,
+      supported_input_modalities: ["text", "image_path"],
+      supported_output_modalities: ["text"],
+    },
+    target_specific_params: { weights: [1, 1] },
+    inner_targets: [
+      {
+        target_registry_name: "mobile-inner-primary",
+        target_type: "OpenAIChatTarget",
+        endpoint: "https://primary.example.test",
+        model_name: "gpt-4o-primary",
+      },
+      {
+        target_registry_name: "mobile-inner-secondary",
+        target_type: "OpenAIChatTarget",
+        endpoint: "https://secondary.example.test",
+        model_name: "gpt-4o-secondary",
+      },
+    ],
+  }),
+  makeTarget({
+    target_registry_name: "mobile-chat-target",
+    target_type: "OpenAIChatTarget",
+    endpoint: "https://chat.example.test",
+    model_name: "gpt-4o-mobile",
+    capabilities: {
+      supports_multi_turn: true,
+      supports_system_prompt: true,
+      supported_input_modalities: ["text", "image_path"],
+      supported_output_modalities: ["text"],
+    },
+  }),
+];
+
+const MESSAGES = [
+  {
+    turn_number: 1,
+    role: "user",
+    created_at: "2026-07-22T13:10:00.000Z",
+    message_pieces: [
+      {
+        id: "mobile-user-piece",
+        original_value_data_type: "text",
+        converted_value_data_type: "text",
+        original_value: "Assess this deterministic mobile prompt",
+        converted_value: "Assess this deterministic mobile prompt",
+        scores: [],
+        response_error: "none",
+      },
+    ],
+  },
+  {
+    turn_number: 1,
+    role: "assistant",
+    created_at: "2026-07-22T13:10:01.000Z",
+    message_pieces: [
+      {
+        id: "mobile-assistant-piece",
+        original_value_data_type: "text",
+        converted_value_data_type: "text",
+        original_value: "Deterministic assistant response for touch-target tests.",
+        converted_value: "Deterministic assistant response for touch-target tests.",
+        scores: [],
+        response_error: "none",
+      },
+    ],
+  },
+];
+
+const ATTACK_SUMMARY = {
+  attack_result_id: "home-attack-001",
+  conversation_id: "home-conversation-001",
+  attack_type: "PromptSendingAttack",
+  target: {
+    target_type: "OpenAIChatTarget",
+    endpoint: "https://chat.example.test",
+    model_name: "gpt-4o-mobile",
+  },
+  converters: [],
+  outcome: "success",
+  labels: { operator: "mobile_operator", operation: "touch_targets" },
+  message_count: 2,
+  related_conversation_ids: [],
+  created_at: "2026-07-22T13:07:00.000Z",
+  updated_at: "2026-07-22T13:08:00.000Z",
+  last_message_preview: "Deterministic recent operation",
+};
+
+function jsonResponse(body: unknown) {
+  return {
+    status: 200,
+    contentType: "application/json",
+    body: JSON.stringify(body),
+  };
+}
+
+async function installTouchTargetMocks(page: Page): Promise<void> {
+  await page.route("**/api/**", async (route) => {
+    const request = route.request();
+    const apiPath = new URL(request.url()).pathname.replace(/^\/api/, "");
+    const method = request.method();
+
+    if (apiPath === "/health") {
+      await route.fulfill(jsonResponse({ status: "healthy" }));
+      return;
+    }
+    if (apiPath === "/auth/config") {
+      await route.fulfill(
+        jsonResponse({ clientId: "", tenantId: "", allowedGroupIds: "" })
+      );
+      return;
+    }
+    if (apiPath === "/version") {
+      await route.fulfill(
+        jsonResponse({
+          version: "touch-target-test",
+          display: "touch-target-test",
+          default_labels: {
+            operator: "mobile_operator",
+            operation: "touch_targets",
+          },
+        })
+      );
+      return;
+    }
+    if (apiPath === "/labels") {
+      await route.fulfill(
+        jsonResponse({
+          source: "attacks",
+          labels: {
+            operator: ["mobile_operator"],
+            operation: ["touch_targets"],
+            campaign: ["mobile_audit"],
+          },
+        })
+      );
+      return;
+    }
+    if (apiPath === "/targets/catalog") {
+      await route.fulfill(
+        jsonResponse({
+          items: [
+            {
+              target_type: "OpenAIChatTarget",
+              parameters: [],
+              supported_auth_modes: ["api_key"],
+            },
+            {
+              target_type: "RoundRobinTarget",
+              parameters: [],
+              supported_auth_modes: ["api_key"],
+            },
+          ],
+        })
+      );
+      return;
+    }
+    if (apiPath === "/targets" && method === "GET") {
+      await route.fulfill(
+        jsonResponse({
+          items: TARGETS,
+          pagination: {
+            limit: 200,
+            has_more: false,
+            next_cursor: null,
+            prev_cursor: null,
+          },
+        })
+      );
+      return;
+    }
+    if (apiPath === "/converters/catalog" || apiPath === "/converters") {
+      await route.fulfill(jsonResponse({ items: [] }));
+      return;
+    }
+    if (apiPath === "/attacks" && method === "GET") {
+      await route.fulfill(
+        jsonResponse({
+          items: [ATTACK_SUMMARY],
+          pagination: {
+            limit: 50,
+            has_more: false,
+            next_cursor: null,
+            prev_cursor: null,
+          },
+        })
+      );
+      return;
+    }
+    if (apiPath === "/attacks" && method === "POST") {
+      await route.fulfill(
+        jsonResponse({
+          attack_result_id: "mobile-attack-001",
+          conversation_id: "mobile-conversation-001",
+        })
+      );
+      return;
+    }
+    if (apiPath === "/attacks/mobile-attack-001") {
+      await route.fulfill(
+        jsonResponse({
+          attack_result_id: "mobile-attack-001",
+          attack_type: "PromptSendingAttack",
+          conversation_id: "mobile-conversation-001",
+          related_conversation_ids: [],
+          labels: {
+            operator: "mobile_operator",
+            operation: "touch_targets",
+          },
+          target: {
+            target_type: "RoundRobinTarget",
+            endpoint: null,
+            model_name: "mobile-router",
+            identifier_hash: "mobile-round-robin-hash",
+          },
+          updated_at: "2026-07-22T13:10:01.000Z",
+        })
+      );
+      return;
+    }
+    if (apiPath === "/attacks/mobile-attack-001/messages") {
+      await route.fulfill(
+        method === "POST"
+          ? jsonResponse({ messages: { messages: MESSAGES } })
+          : jsonResponse({ messages: MESSAGES })
+      );
+      return;
+    }
+    if (apiPath === "/attacks/mobile-attack-001/conversations") {
+      await route.fulfill(
+        jsonResponse({
+          attack_result_id: "mobile-attack-001",
+          main_conversation_id: "mobile-conversation-001",
+          conversations: [
+            {
+              conversation_id: "mobile-conversation-001",
+              message_count: 2,
+              last_message_preview: "Deterministic assistant response",
+              created_at: "2026-07-22T13:10:00.000Z",
+            },
+          ],
+        })
+      );
+      return;
+    }
+    if (apiPath === "/attacks/attack-options") {
+      await route.fulfill(
+        jsonResponse({ attack_types: ["PromptSendingAttack"] })
+      );
+      return;
+    }
+    if (apiPath === "/attacks/converter-options") {
+      await route.fulfill(jsonResponse({ converter_types: [] }));
+      return;
+    }
+
+    throw new Error(`Unhandled touch-target API request: ${method} ${apiPath}`);
+  });
+}
+
+async function expectMinimumTouchTarget(locator: Locator): Promise<void> {
+  await expect(locator).toBeVisible();
+  const box = await locator.boundingBox();
+  if (!box) {
+    throw new Error("Expected a visible touch target");
+  }
+  expect(box.width).toBeGreaterThanOrEqual(MINIMUM_TOUCH_TARGET_SIZE);
+  expect(box.height).toBeGreaterThanOrEqual(MINIMUM_TOUCH_TARGET_SIZE);
+}
+
+async function expectMinimumTouchTargets(locator: Locator): Promise<void> {
+  const count = await locator.count();
+  expect(count).toBeGreaterThan(0);
+  for (let index = 0; index < count; index += 1) {
+    await expectMinimumTouchTarget(locator.nth(index));
+  }
+}
+
+async function expectCompactDesktopTarget(locator: Locator): Promise<void> {
+  await expect(locator).toBeVisible();
+  const box = await locator.boundingBox();
+  if (!box) {
+    throw new Error("Expected a visible desktop target");
+  }
+  expect(box.height).toBeLessThan(MINIMUM_TOUCH_TARGET_SIZE);
+}
+
+async function expectNoDocumentOverflow(page: Page): Promise<void> {
+  const dimensions = await page.evaluate(() => ({
+    viewportWidth: document.documentElement.clientWidth,
+    documentWidth: document.documentElement.scrollWidth,
+    bodyWidth: document.body.scrollWidth,
+  }));
+  expect(dimensions.documentWidth).toBeLessThanOrEqual(
+    dimensions.viewportWidth
+  );
+  expect(dimensions.bodyWidth).toBeLessThanOrEqual(dimensions.viewportWidth);
+}
+
+async function startChatWithMessages(page: Page): Promise<void> {
+  await page.getByRole("button", { name: "Configuration", exact: true }).click();
+  await expect(page.getByText("gpt-4o-mobile")).toBeVisible();
+  await page.getByRole("button", { name: "Set Active" }).first().click();
+  await page.getByRole("button", { name: "Chat", exact: true }).click();
+  await page.getByTestId("chat-input").fill(
+    "Assess this deterministic mobile prompt"
+  );
+  await page.getByTestId("send-message-btn").click();
+  await expect(
+    page.getByText("Deterministic assistant response for touch-target tests.")
+  ).toBeVisible();
+}
+
+test.beforeEach(async ({ page }) => {
+  await installTouchTargetMocks(page);
+});
+
+test.describe("Mobile touch targets", () => {
+  test.use({ viewport: MOBILE_VIEWPORT, hasTouch: true });
+
+  test("keeps Home, Configuration, and History controls at least 44px", async ({
+    page,
+  }) => {
+    await page.goto("/");
+    await expect(page.getByTestId("home-view")).toBeVisible();
+
+    await expectMinimumTouchTargets(
+      page.getByTestId("home-view").locator(
+        [
+          '[data-testid="labels-icon-btn"]',
+          '[data-testid="home-configure-target-btn"]',
+          '[data-testid="home-view-all-history-btn"]',
+          '[data-testid="home-open-attack-home-attack-001"]',
+        ].join(",")
+      )
+    );
+    await expectMinimumTouchTarget(
+      page.getByRole("button", { name: "Home", exact: true })
+    );
+    await expectNoDocumentOverflow(page);
+
+    await page
+      .getByRole("button", { name: "Configuration", exact: true })
+      .click();
+    await expect(page.getByText("gpt-4o-mobile")).toBeVisible();
+
+    await expectMinimumTouchTarget(
+      page.getByRole("button", { name: "Refresh", exact: true })
+    );
+    await expectMinimumTouchTarget(
+      page.getByRole("button", { name: "New Target", exact: true })
+    );
+    await expectMinimumTouchTargets(
+      page.getByRole("button", { name: "Set Active" })
+    );
+    await expectMinimumTouchTarget(
+      page.getByRole("button", { name: "Expand inner targets" })
+    );
+    await expectMinimumTouchTarget(page.locator("select"));
+    await expectNoDocumentOverflow(page);
+
+    await page.goto("/history");
+    await expect(
+      page.getByTestId("open-attack-home-attack-001")
+    ).toBeVisible();
+
+    await expectMinimumTouchTarget(page.getByTestId("refresh-btn"));
+    await expectMinimumTouchTargets(
+      page.locator(
+        [
+          '[data-testid="attack-type-filter"]',
+          '[data-testid="outcome-filter"]',
+          '[data-testid="converter-filter"]',
+          '[data-testid="operator-filter"]',
+          '[data-testid="operation-filter"]',
+          '[data-testid="label-filter"]',
+        ].join(",")
+      )
+    );
+    await expectMinimumTouchTargets(
+      page.getByRole("button", { name: "Open", exact: true })
+    );
+
+    const openAttack = page.getByTestId("open-attack-home-attack-001");
+    await openAttack.scrollIntoViewIfNeeded();
+    await expectMinimumTouchTarget(openAttack);
+    await expectMinimumTouchTarget(page.getByTestId("prev-page-btn"));
+    await expectMinimumTouchTarget(page.getByTestId("next-page-btn"));
+    await expectNoDocumentOverflow(page);
+  });
+
+  test("keeps Chat message, input, and conversation controls at least 44px", async ({
+    page,
+  }) => {
+    await page.goto("/");
+    await startChatWithMessages(page);
+
+    await expectMinimumTouchTargets(
+      page.locator(
+        [
+          '[data-testid="labels-icon-btn"]',
+          '[data-testid="toggle-panel-btn"]',
+          '[data-testid="new-attack-btn"]',
+          '[aria-label="Attach files"]',
+          '[data-testid="toggle-converter-panel-btn"]',
+          '[data-testid="chat-input"]',
+          '[data-testid="send-message-btn"]',
+          '[data-testid="copy-to-input-btn-1"]',
+          '[data-testid="copy-to-new-conv-btn-1"]',
+          '[data-testid="branch-conv-btn-1"]',
+          '[data-testid="branch-attack-btn-1"]',
+        ].join(",")
+      )
+    );
+    await expectNoDocumentOverflow(page);
+
+    await page.getByTestId("toggle-panel-btn").click();
+    await expect(
+      page.getByRole("dialog", { name: "Attack Conversations" })
+    ).toBeVisible();
+
+    await expectMinimumTouchTargets(
+      page.locator(
+        [
+          '[data-testid="new-conversation-btn"]',
+          '[data-testid="close-panel-btn"]',
+          '[data-testid="conversation-item-mobile-conversation-001"]',
+          '[data-testid="star-btn-mobile-conversation-001"]',
+        ].join(",")
+      )
+    );
+    await expectNoDocumentOverflow(page);
+  });
+
+  test("keeps every tour action at least 44px without changing containment", async ({
+    page,
+  }) => {
+    await page.goto("/");
+    await page.getByTestId("start-tour").click();
+
+    await expect(page.getByText("1 of 5")).toBeVisible();
+    await expectMinimumTouchTargets(
+      page.getByRole("button", {
+        name: /^(Close|Skip tour|Next)$/,
+      })
+    );
+
+    for (const step of [2, 3, 4]) {
+      await page
+        .getByRole("button", { name: "Next", exact: true })
+        .click({ force: true });
+      await expect(page.getByText(`${step} of 5`)).toBeVisible();
+      await expectMinimumTouchTargets(
+        page.getByRole("button", {
+          name: /^(Close|Skip tour|Back|Next)$/,
+        })
+      );
+    }
+
+    await page
+      .getByRole("button", { name: "Next", exact: true })
+      .click({ force: true });
+    await expect(page.getByText("5 of 5")).toBeVisible();
+    await expectMinimumTouchTarget(
+      page.getByRole("button", { name: "Back", exact: true })
+    );
+    await expectMinimumTouchTarget(
+      page.getByRole("button", { name: "Anchors Away!", exact: true })
+    );
+  });
+});
+
+test("preserves compact desktop controls and existing sidebar dimensions", async ({
+  page,
+}) => {
+  await page.setViewportSize(DESKTOP_VIEWPORT);
+  await page.goto("/");
+  await expect(page.getByTestId("home-view")).toBeVisible();
+
+  const sidebarHome = page.getByRole("button", {
+    name: "Home",
+    exact: true,
+  });
+  const sidebarBox = await sidebarHome.boundingBox();
+  expect(sidebarBox?.width).toBe(44);
+  expect(sidebarBox?.height).toBe(44);
+
+  await expectCompactDesktopTarget(page.getByTestId("labels-icon-btn"));
+  await expectCompactDesktopTarget(
+    page.getByTestId("home-configure-target-btn")
+  );
+  await expectCompactDesktopTarget(
+    page.getByTestId("home-open-attack-home-attack-001")
+  );
+
+  await page
+    .getByRole("button", { name: "Configuration", exact: true })
+    .click();
+  await expect(page.getByText("gpt-4o-mobile")).toBeVisible();
+  await expectCompactDesktopTarget(
+    page.getByRole("button", { name: "Refresh", exact: true })
+  );
+  await expectCompactDesktopTarget(page.locator("select"));
+  await expectCompactDesktopTarget(
+    page.getByRole("button", { name: "Set Active" }).first()
+  );
+  await expectCompactDesktopTarget(
+    page.getByRole("button", { name: "Expand inner targets" })
+  );
+
+  await startChatWithMessages(page);
+  await expectCompactDesktopTarget(page.getByTestId("toggle-panel-btn"));
+  await expectCompactDesktopTarget(
+    page.getByRole("button", { name: "Attach files" })
+  );
+  await expectCompactDesktopTarget(page.getByTestId("chat-input"));
+  await expectCompactDesktopTarget(page.getByTestId("copy-to-input-btn-1"));
+
+  await page.getByTestId("toggle-panel-btn").click();
+  await expect(page.getByTestId("conversation-panel")).toBeVisible();
+  await expectCompactDesktopTarget(page.getByTestId("close-panel-btn"));
+  await expectCompactDesktopTarget(
+    page.getByTestId("star-btn-mobile-conversation-001")
+  );
+  await page.getByTestId("close-panel-btn").click();
+
+  await page.getByRole("button", { name: "Home", exact: true }).click();
+  await page.getByTestId("start-tour").click();
+  await expect(page.getByText("1 of 5")).toBeVisible();
+  await expectCompactDesktopTarget(
+    page.getByRole("button", { name: "Close", exact: true })
+  );
+  await expectCompactDesktopTarget(
+    page.getByRole("button", { name: "Next", exact: true })
+  );
+
+  await page.goto("/history");
+  await expect(page.getByTestId("refresh-btn")).toBeVisible();
+  await expectCompactDesktopTarget(page.getByTestId("refresh-btn"));
+  await expectCompactDesktopTarget(page.getByTestId("attack-type-filter"));
+  const openAttack = page.getByTestId("open-attack-home-attack-001");
+  await openAttack.scrollIntoViewIfNeeded();
+  await expectCompactDesktopTarget(openAttack);
+  await expectCompactDesktopTarget(page.getByTestId("next-page-btn"));
+});
diff --git a/frontend/src/components/Chat/ChatInputArea.styles.ts b/frontend/src/components/Chat/ChatInputArea.styles.ts
index 27aa9c61da..b5d0d17868 100644
--- a/frontend/src/components/Chat/ChatInputArea.styles.ts
+++ b/frontend/src/components/Chat/ChatInputArea.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget, mobileTouchTargetHeight } from '../../styles/touchTargets'
 
 export const useChatInputAreaStyles = makeStyles({
   root: {
@@ -109,6 +110,7 @@ export const useChatInputAreaStyles = makeStyles({
     minHeight: '24px',
     maxHeight: '60vh',
     overflowY: 'auto',
+    ...mobileTouchTargetHeight,
     '::placeholder': {
       color: tokens.colorNeutralForeground4,
     },
@@ -133,12 +135,14 @@ export const useChatInputAreaStyles = makeStyles({
     padding: 0,
     borderRadius: '50%',
     border: `1px solid ${tokens.colorNeutralStroke1}`,
+    ...mobileTouchTarget,
   },
   dismissBtn: {
     minWidth: '24px',
     width: '24px',
     height: '24px',
     padding: 0,
+    ...mobileTouchTarget,
   },
   sendButton: {
     minWidth: '32px',
@@ -146,6 +150,7 @@ export const useChatInputAreaStyles = makeStyles({
     height: '32px',
     padding: 0,
     borderRadius: '50%',
+    ...mobileTouchTarget,
   },
   clearConversionButton: {
     minWidth: '32px',
@@ -156,6 +161,7 @@ export const useChatInputAreaStyles = makeStyles({
     border: `1px solid ${tokens.colorNeutralStroke1}`,
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground2,
+    ...mobileTouchTarget,
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
       color: tokens.colorNeutralForeground1,
@@ -227,6 +233,7 @@ export const useChatInputAreaStyles = makeStyles({
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
     padding: 0,
+    ...mobileTouchTargetHeight,
     '::-webkit-scrollbar': {
       width: '8px',
     },
@@ -288,6 +295,7 @@ export const useChatInputAreaStyles = makeStyles({
     textDecoration: 'none',
     flexShrink: 0,
     height: '20px',
+    ...mobileTouchTarget,
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
       color: tokens.colorNeutralForegroundOnBrand,
@@ -300,6 +308,9 @@ export const useChatInputAreaStyles = makeStyles({
     color: tokens.colorPaletteYellowForeground2,
     fontSize: tokens.fontSizeBase200,
   },
+  touchTarget: {
+    ...mobileTouchTarget,
+  },
   originalBadge: {
     display: 'inline-block',
     padding: `0 ${tokens.spacingHorizontalXS}`,
diff --git a/frontend/src/components/Chat/ChatInputArea.tsx b/frontend/src/components/Chat/ChatInputArea.tsx
index 898d71a273..e2c0721b04 100644
--- a/frontend/src/components/Chat/ChatInputArea.tsx
+++ b/frontend/src/components/Chat/ChatInputArea.tsx
@@ -33,9 +33,10 @@ interface StatusBannerProps {
   className: string
   textClassName: string
   buttonTestId?: string
+  buttonClassName?: string
 }
 
-function StatusBanner({ icon, text, buttonText, buttonIcon, onButtonClick, testId, className, textClassName, buttonTestId }: StatusBannerProps) {
+function StatusBanner({ icon, text, buttonText, buttonIcon, onButtonClick, testId, className, textClassName, buttonTestId, buttonClassName }: StatusBannerProps) {
   return (
     <div className={className} data-testid={testId}>
       {icon}
@@ -44,6 +45,7 @@ function StatusBanner({ icon, text, buttonText, buttonIcon, onButtonClick, testI
       </Text>
       {onButtonClick && buttonText && (
         <Button
+          className={buttonClassName}
           appearance="primary"
           icon={buttonIcon}
           onClick={onButtonClick}
@@ -504,6 +506,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             onButtonClick={onConfigureTarget}
             testId="no-target-banner"
             buttonTestId="configure-target-input-btn"
+            buttonClassName={styles.touchTarget}
           />
         ) : operatorLocked ? (
           <StatusBanner
@@ -516,6 +519,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             onButtonClick={onUseAsTemplate}
             testId="operator-locked-banner"
             buttonTestId="use-as-template-btn"
+            buttonClassName={styles.touchTarget}
           />
         ) : crossTargetLocked ? (
           <StatusBanner
@@ -528,6 +532,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             onButtonClick={onUseAsTemplate}
             testId="cross-target-banner"
             buttonTestId="use-as-template-btn"
+            buttonClassName={styles.touchTarget}
           />
         ) : singleTurnLimitReached ? (
           <StatusBanner
@@ -540,6 +545,7 @@ const ChatInputArea = forwardRef<ChatInputAreaHandle, ChatInputAreaProps>(functi
             onButtonClick={onNewConversation}
             testId="single-turn-banner"
             buttonTestId="new-conversation-btn"
+            buttonClassName={styles.touchTarget}
           />
         ) : (
         <>
diff --git a/frontend/src/components/Chat/ChatWindow.styles.ts b/frontend/src/components/Chat/ChatWindow.styles.ts
index 35edca0562..97a4eb8135 100644
--- a/frontend/src/components/Chat/ChatWindow.styles.ts
+++ b/frontend/src/components/Chat/ChatWindow.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget } from '../../styles/touchTargets'
 
 export const useChatWindowStyles = makeStyles({
   root: {
@@ -69,8 +70,12 @@ export const useChatWindowStyles = makeStyles({
     gap: tokens.spacingHorizontalS,
     flexShrink: 0,
   },
+  ribbonAction: {
+    ...mobileTouchTarget,
+  },
   newAttackButton: {
     flexShrink: 0,
+    ...mobileTouchTarget,
   },
   newAttackLabel: {
     '@media (max-width: 600px)': {
diff --git a/frontend/src/components/Chat/ChatWindow.tsx b/frontend/src/components/Chat/ChatWindow.tsx
index 5f9b0b5363..c24f070fcb 100644
--- a/frontend/src/components/Chat/ChatWindow.tsx
+++ b/frontend/src/components/Chat/ChatWindow.tsx
@@ -647,6 +647,7 @@ export default function ChatWindow({
               <Button
                 {...restoreFocusTargetAttributes}
                 appearance="subtle"
+                className={styles.ribbonAction}
                 icon={<PanelRightRegular />}
                 onClick={() => setIsPanelOpen((open) => !open)}
                 disabled={!attackResultId}
diff --git a/frontend/src/components/Chat/ConversationPanel.styles.ts b/frontend/src/components/Chat/ConversationPanel.styles.ts
index 707b955ccc..46d88f1f8d 100644
--- a/frontend/src/components/Chat/ConversationPanel.styles.ts
+++ b/frontend/src/components/Chat/ConversationPanel.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget, mobileTouchTargetHeight } from '../../styles/touchTargets'
 
 export const useConversationPanelStyles = makeStyles({
   root: {
@@ -25,6 +26,9 @@ export const useConversationPanelStyles = makeStyles({
     gap: tokens.spacingHorizontalXS,
     fontWeight: tokens.fontWeightSemibold,
   },
+  headerButton: {
+    ...mobileTouchTarget,
+  },
   conversationList: {
     flex: 1,
     overflowY: 'auto',
@@ -63,6 +67,11 @@ export const useConversationPanelStyles = makeStyles({
     gap: tokens.spacingHorizontalXS,
     overflow: 'hidden',
   },
+  starButton: {
+    minWidth: 'auto',
+    padding: '2px',
+    ...mobileTouchTarget,
+  },
   preview: {
     color: tokens.colorNeutralForeground3,
     overflow: 'hidden',
@@ -84,4 +93,7 @@ export const useConversationPanelStyles = makeStyles({
     justifyContent: 'center',
     padding: tokens.spacingVerticalL,
   },
+  retryButton: {
+    ...mobileTouchTargetHeight,
+  },
 })
diff --git a/frontend/src/components/Chat/ConversationPanel.tsx b/frontend/src/components/Chat/ConversationPanel.tsx
index 3ef5d31706..4f70a1fa7b 100644
--- a/frontend/src/components/Chat/ConversationPanel.tsx
+++ b/frontend/src/components/Chat/ConversationPanel.tsx
@@ -141,6 +141,7 @@ export default function ConversationPanel({
             <Button
               appearance="subtle"
               size="small"
+              className={styles.headerButton}
               icon={<AddRegular />}
               onClick={onNewConversation}
               disabled={!attackResultId || !!lockedReason}
@@ -151,6 +152,7 @@ export default function ConversationPanel({
             <Button
               appearance="subtle"
               size="small"
+              className={styles.headerButton}
               icon={<DismissRegular />}
               onClick={onClose}
               data-testid="close-panel-btn"
@@ -174,6 +176,7 @@ export default function ConversationPanel({
             <Button
               appearance="primary"
               size="small"
+              className={styles.retryButton}
               icon={<ArrowSyncRegular />}
               onClick={handleRetry}
               data-testid="conversation-retry-btn"
@@ -240,7 +243,7 @@ export default function ConversationPanel({
                         }
                       }}
                       data-testid={`star-btn-${conv.conversation_id}`}
-                      style={{ minWidth: 'auto', padding: '2px' }}
+                      className={styles.starButton}
                     />
                   </Tooltip>
                   <Badge appearance="tint" size="small">
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts
index eff9f3d62f..51a3a61eda 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget } from '../../../styles/touchTargets'
 
 export const useConverterPanelStyles = makeStyles({
   resizeContainer: {
@@ -224,6 +225,9 @@ export const useConverterPanelStyles = makeStyles({
     fontWeight: tokens.fontWeightSemibold as unknown as string,
     padding: 0,
   },
+  touchTarget: {
+    ...mobileTouchTarget,
+  },
   paramBlock: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx
index 509e822e60..1470085a43 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterPanel.tsx
@@ -328,6 +328,7 @@ export default function ConverterPanel({ onClose, previewText = '', attachmentDa
           size="small"
           icon={<DismissRegular />}
           onClick={onClose}
+          className={styles.touchTarget}
           data-testid="close-converter-panel-btn"
         />
       </div>
diff --git a/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx b/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
index 1607755c76..4f733bb778 100644
--- a/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
+++ b/frontend/src/components/Chat/ConverterPanel/ConverterParams.tsx
@@ -1,4 +1,4 @@
-import { Button, Input, Select, Switch, Text, Tooltip } from '@fluentui/react-components'
+import { Button, Input, mergeClasses, Select, Switch, Text, Tooltip } from '@fluentui/react-components'
 import { ChevronDownRegular, ChevronRightRegular, InfoRegular } from '@fluentui/react-icons'
 import type { ConverterCatalogEntry, Parameter } from '../../../types'
 import { useConverterPanelStyles } from './ConverterPanel.styles'
@@ -42,6 +42,7 @@ function ParameterFileViewer({ param, value, isMissing, onChange, onBrowse }: Pa
         appearance="subtle"
         size="small"
         onClick={() => onBrowse(param.name)}
+        className={styles.touchTarget}
         data-testid={`param-${param.name}-browse`}
       >
         Browse
@@ -86,7 +87,7 @@ export default function ConverterParams({ converter, paramValues, paramsExpanded
         size="small"
         icon={paramsExpanded ? <ChevronDownRegular /> : <ChevronRightRegular />}
         onClick={onToggleExpanded}
-        className={styles.paramsSectionHeader}
+        className={mergeClasses(styles.paramsSectionHeader, styles.touchTarget)}
         data-testid="toggle-params-btn"
       >
         Parameters
diff --git a/frontend/src/components/Chat/MessageList.styles.ts b/frontend/src/components/Chat/MessageList.styles.ts
index 6d2c44480d..29603f7514 100644
--- a/frontend/src/components/Chat/MessageList.styles.ts
+++ b/frontend/src/components/Chat/MessageList.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { NARROW_VIEWPORT_QUERY, mobileTouchTarget } from '../../styles/touchTargets'
 
 export const useMessageListStyles = makeStyles({
   root: {
@@ -169,6 +170,7 @@ export const useMessageListStyles = makeStyles({
     fontWeight: tokens.fontWeightSemibold as unknown as string,
     textDecoration: 'none',
     flexShrink: 0,
+    ...mobileTouchTarget,
     ':hover': {
       backgroundColor: tokens.colorBrandBackgroundHover,
       color: tokens.colorNeutralForegroundOnBrand,
@@ -195,6 +197,14 @@ export const useMessageListStyles = makeStyles({
     justifyContent: 'flex-end',
     gap: tokens.spacingHorizontalXXS,
     marginTop: tokens.spacingVerticalS,
+    [NARROW_VIEWPORT_QUERY]: {
+      flexWrap: 'wrap',
+    },
+  },
+  messageActionButton: {
+    minWidth: 'auto',
+    padding: '2px',
+    ...mobileTouchTarget,
   },
   reasoningContainer: {
     backgroundColor: tokens.colorNeutralBackground1,
diff --git a/frontend/src/components/Chat/MessageList.tsx b/frontend/src/components/Chat/MessageList.tsx
index 64a2d4caa4..fc6b2ef7d2 100644
--- a/frontend/src/components/Chat/MessageList.tsx
+++ b/frontend/src/components/Chat/MessageList.tsx
@@ -328,7 +328,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                           disabled={disabled}
                           onClick={() => onCopyToInput(index)}
                           data-testid={`copy-to-input-btn-${index}`}
-                          style={{ minWidth: 'auto', padding: '2px' }}
+                          className={styles.messageActionButton}
                         />
                       </Tooltip>
                     )
@@ -353,7 +353,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                           disabled={disabled}
                           onClick={() => onCopyToNewConversation(index)}
                           data-testid={`copy-to-new-conv-btn-${index}`}
-                          style={{ minWidth: 'auto', padding: '2px' }}
+                          className={styles.messageActionButton}
                         />
                       </Tooltip>
                     )
@@ -380,7 +380,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                           disabled={disabled}
                           onClick={() => onBranchConversation(index)}
                           data-testid={`branch-conv-btn-${index}`}
-                          style={{ minWidth: 'auto', padding: '2px' }}
+                          className={styles.messageActionButton}
                         />
                       </Tooltip>
                     )
@@ -398,7 +398,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                             icon={<ChatAddRegular />}
                             onClick={() => onBranchAttack(index)}
                             data-testid={`branch-attack-btn-${index}`}
-                            style={{ minWidth: 'auto', padding: '2px' }}
+                            className={styles.messageActionButton}
                           />
                         </Tooltip>
                       )
@@ -418,7 +418,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                           icon={<ChatAddRegular />}
                           disabled
                           data-testid={`branch-attack-btn-${index}`}
-                          style={{ minWidth: 'auto', padding: '2px' }}
+                          className={styles.messageActionButton}
                         />
                       </Tooltip>
                     )
@@ -433,7 +433,7 @@ export default function MessageList({ messages, onCopyToInput, onCopyToNewConver
                         icon={<ArrowDownloadRegular />}
                         onClick={() => handleDownload(att)}
                         data-testid={`download-btn-${index}-${ai}`}
-                        style={{ minWidth: 'auto', padding: '2px' }}
+                        className={styles.messageActionButton}
                       />
                     </Tooltip>
                   ))}
diff --git a/frontend/src/components/Config/CreateTargetDialog.styles.ts b/frontend/src/components/Config/CreateTargetDialog.styles.ts
index 4c6a50e304..677c1d9b74 100644
--- a/frontend/src/components/Config/CreateTargetDialog.styles.ts
+++ b/frontend/src/components/Config/CreateTargetDialog.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget } from '../../styles/touchTargets'
 
 export const useCreateTargetDialogStyles = makeStyles({
   dialogSurface: {
@@ -112,6 +113,9 @@ export const useCreateTargetDialogStyles = makeStyles({
     width: '5rem',
     minWidth: '5rem',
   },
+  touchTarget: {
+    ...mobileTouchTarget,
+  },
   weightError: {
     alignSelf: 'flex-end',
     marginTop: tokens.spacingVerticalXXS,
diff --git a/frontend/src/components/Config/CreateTargetDialog.tsx b/frontend/src/components/Config/CreateTargetDialog.tsx
index 3f148d837b..59869c9d86 100644
--- a/frontend/src/components/Config/CreateTargetDialog.tsx
+++ b/frontend/src/components/Config/CreateTargetDialog.tsx
@@ -560,6 +560,7 @@ export default function CreateTargetDialog({ open, onClose, onCreated, existingT
                                     icon={<DeleteRegular />}
                                     aria-label={`Remove ${sel.registryName}`}
                                     onClick={() => removeInnerTarget(sel.registryName)}
+                                    className={styles.touchTarget}
                                   />
                                 </div>
                                 {weightError && (
diff --git a/frontend/src/components/Config/TargetConfig.styles.ts b/frontend/src/components/Config/TargetConfig.styles.ts
index 9d90bffdc2..57f9cad94a 100644
--- a/frontend/src/components/Config/TargetConfig.styles.ts
+++ b/frontend/src/components/Config/TargetConfig.styles.ts
@@ -1,4 +1,10 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import {
+  NARROW_VIEWPORT_QUERY,
+  TOUCH_INPUT_QUERY,
+  MINIMUM_TOUCH_TARGET_SIZE,
+  mobileTouchTarget,
+} from '../../styles/touchTargets'
 
 export const useTargetConfigStyles = makeStyles({
   root: {
@@ -45,10 +51,16 @@ export const useTargetConfigStyles = makeStyles({
     },
   },
   headerAction: {
-    '@media (max-width: 600px)': {
+    [NARROW_VIEWPORT_QUERY]: {
       flex: '1 1 8rem',
       minHeight: '44px',
     },
+    [TOUCH_INPUT_QUERY]: {
+      minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+    },
+  },
+  touchTarget: {
+    ...mobileTouchTarget,
   },
   emptyState: {
     display: 'flex',
diff --git a/frontend/src/components/Config/TargetConfig.tsx b/frontend/src/components/Config/TargetConfig.tsx
index feb067511a..fc46bd61ea 100644
--- a/frontend/src/components/Config/TargetConfig.tsx
+++ b/frontend/src/components/Config/TargetConfig.tsx
@@ -133,6 +133,7 @@ export default function TargetConfig({ activeTarget, onSetActiveTarget }: Target
             for details.
           </Text>
           <Button
+            className={styles.touchTarget}
             appearance="primary"
             icon={<AddRegular />}
             onClick={() => setDialogOpen(true)}
diff --git a/frontend/src/components/Config/TargetTable.styles.ts b/frontend/src/components/Config/TargetTable.styles.ts
index 323cfe4472..9e7af2032f 100644
--- a/frontend/src/components/Config/TargetTable.styles.ts
+++ b/frontend/src/components/Config/TargetTable.styles.ts
@@ -1,4 +1,10 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import {
+  TOUCH_INPUT_QUERY,
+  MINIMUM_TOUCH_TARGET_SIZE,
+  mobileTouchTarget,
+  mobileTouchTargetHeight,
+} from '../../styles/touchTargets'
 
 export const useTargetTableStyles = makeStyles({
   tableContainer: {
@@ -86,6 +92,15 @@ export const useTargetTableStyles = makeStyles({
     flex: '1 1 12.5rem',
     minWidth: 0,
     maxWidth: '20rem',
+    ...mobileTouchTargetHeight,
+    '& > select': {
+      [TOUCH_INPUT_QUERY]: {
+        minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+      },
+    },
+  },
+  rowAction: {
+    ...mobileTouchTarget,
   },
   /** Sub-row for inner targets of a RoundRobinTarget — visually indented with a
    *  lighter background so it's clear these are children, not standalone targets. */
diff --git a/frontend/src/components/Config/TargetTable.tsx b/frontend/src/components/Config/TargetTable.tsx
index 062dc4132d..4129d01787 100644
--- a/frontend/src/components/Config/TargetTable.tsx
+++ b/frontend/src/components/Config/TargetTable.tsx
@@ -290,6 +290,7 @@ export default function TargetTable({ targets, activeTarget, onSetActiveTarget }
                 <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                   {hasInnerTargets(activeTarget) && (
                     <Button
+                      className={styles.rowAction}
                       appearance="subtle"
                       size="small"
                       icon={expandedRows.has(activeTarget.target_registry_name) ? <ChevronDownRegular /> : <ChevronRightRegular />}
@@ -415,6 +416,7 @@ export default function TargetTable({ targets, activeTarget, onSetActiveTarget }
                       </Badge>
                     ) : (
                       <Button
+                        className={styles.rowAction}
                         appearance="primary"
                         size="small"
                         onClick={() => onSetActiveTarget(target)}
@@ -428,6 +430,7 @@ export default function TargetTable({ targets, activeTarget, onSetActiveTarget }
                       {/* Chevron in the Type column keeps the action column aligned */}
                       {expandable && (
                         <Button
+                          className={styles.rowAction}
                           appearance="subtle"
                           size="small"
                           icon={expanded ? <ChevronDownRegular /> : <ChevronRightRegular />}
diff --git a/frontend/src/components/History/AttackHistory.styles.ts b/frontend/src/components/History/AttackHistory.styles.ts
index 7c0c87417c..f01526bca8 100644
--- a/frontend/src/components/History/AttackHistory.styles.ts
+++ b/frontend/src/components/History/AttackHistory.styles.ts
@@ -1,4 +1,10 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import {
+  TOUCH_INPUT_QUERY,
+  MINIMUM_TOUCH_TARGET_SIZE,
+  mobileTouchTarget,
+  mobileTouchTargetHeight,
+} from '../../styles/touchTargets'
 
 export const useAttackHistoryStyles = makeStyles({
   root: {
@@ -27,6 +33,27 @@ export const useAttackHistoryStyles = makeStyles({
   },
   filterDropdown: {
     minWidth: '160px',
+    ...mobileTouchTargetHeight,
+    '& > input': {
+      [TOUCH_INPUT_QUERY]: {
+        minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+      },
+    },
+    '& > [role="button"]': {
+      [TOUCH_INPUT_QUERY]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minWidth: MINIMUM_TOUCH_TARGET_SIZE,
+        minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+      },
+    },
+  },
+  touchTarget: {
+    ...mobileTouchTarget,
+  },
+  touchTargetHeight: {
+    ...mobileTouchTargetHeight,
   },
   content: {
     flex: 1,
diff --git a/frontend/src/components/History/AttackHistory.tsx b/frontend/src/components/History/AttackHistory.tsx
index 12aff7ca6d..13544cad60 100644
--- a/frontend/src/components/History/AttackHistory.tsx
+++ b/frontend/src/components/History/AttackHistory.tsx
@@ -182,6 +182,7 @@ export default function AttackHistory({ onOpenAttack, filters, onFiltersChange }
         <div className={styles.headerRow}>
           <Text as="h1" size={500} weight="semibold">Attack History</Text>
           <Button
+            className={styles.touchTargetHeight}
             appearance="subtle"
             icon={<ArrowSyncRegular />}
             onClick={() => fetchAttacks()}
@@ -213,6 +214,7 @@ export default function AttackHistory({ onOpenAttack, filters, onFiltersChange }
               <MessageBarBody>{error}</MessageBarBody>
             </MessageBar>
             <Button
+              className={styles.touchTargetHeight}
               appearance="primary"
               icon={<ArrowSyncRegular />}
               onClick={() => fetchAttacks()}
diff --git a/frontend/src/components/History/AttackTable.tsx b/frontend/src/components/History/AttackTable.tsx
index 906be3538b..d6826ea00e 100644
--- a/frontend/src/components/History/AttackTable.tsx
+++ b/frontend/src/components/History/AttackTable.tsx
@@ -169,6 +169,7 @@ export default function AttackTable({ attacks, onOpenAttack, formatDate }: Attac
             <TableCell>
               <Tooltip content="Open attack" relationship="label">
                 <Button
+                  className={styles.touchTarget}
                   appearance="subtle"
                   size="small"
                   icon={<OpenRegular />}
diff --git a/frontend/src/components/History/HistoryFiltersBar.tsx b/frontend/src/components/History/HistoryFiltersBar.tsx
index 7165cd3960..8fe4eadb2b 100644
--- a/frontend/src/components/History/HistoryFiltersBar.tsx
+++ b/frontend/src/components/History/HistoryFiltersBar.tsx
@@ -170,6 +170,7 @@ export default function HistoryFiltersBar({
       {hasActiveFilters && (
         <Tooltip content="Reset all filters" relationship="label">
           <Button
+            className={styles.touchTargetHeight}
             appearance="subtle"
             size="small"
             icon={<FilterDismissRegular />}
diff --git a/frontend/src/components/History/HistoryPagination.tsx b/frontend/src/components/History/HistoryPagination.tsx
index 154bfdc641..635e7d3898 100644
--- a/frontend/src/components/History/HistoryPagination.tsx
+++ b/frontend/src/components/History/HistoryPagination.tsx
@@ -21,6 +21,7 @@ export default function HistoryPagination({ page, isLastPage, onPrevPage, onNext
   return (
     <div className={styles.pagination}>
       <Button
+        className={styles.touchTargetHeight}
         appearance="subtle"
         icon={<ChevronLeftRegular />}
         disabled={page === 0}
@@ -31,6 +32,7 @@ export default function HistoryPagination({ page, isLastPage, onPrevPage, onNext
       </Button>
       <Text size={200}>Page {page + 1}</Text>
       <Button
+        className={styles.touchTargetHeight}
         appearance="subtle"
         icon={<ChevronRightRegular />}
         iconPosition="after"
diff --git a/frontend/src/components/Home/Home.styles.ts b/frontend/src/components/Home/Home.styles.ts
index ba43ff6261..eea298ccb2 100644
--- a/frontend/src/components/Home/Home.styles.ts
+++ b/frontend/src/components/Home/Home.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget, mobileTouchTargetHeight } from '../../styles/touchTargets'
 
 export const useHomeStyles = makeStyles({
   root: {
@@ -71,10 +72,8 @@ export const useHomeStyles = makeStyles({
     justifyContent: 'flex-end',
     gap: tokens.spacingHorizontalS,
   },
-  mobilePrimaryAction: {
-    '@media (max-width: 600px)': {
-      minHeight: '44px',
-    },
+  touchTarget: {
+    ...mobileTouchTarget,
   },
   targetSummary: {
     display: 'flex',
@@ -147,6 +146,7 @@ export const useHomeStyles = makeStyles({
     width: '100%',
     textAlign: 'left',
     color: 'inherit',
+    ...mobileTouchTargetHeight,
     ':hover': {
       backgroundColor: tokens.colorNeutralBackground1Hover,
     },
diff --git a/frontend/src/components/Home/Home.tsx b/frontend/src/components/Home/Home.tsx
index 56bc499596..6f25824c2e 100644
--- a/frontend/src/components/Home/Home.tsx
+++ b/frontend/src/components/Home/Home.tsx
@@ -187,12 +187,12 @@ export default function Home({
             </div>
             <div className={styles.cardFooter}>
               <Button
+                className={styles.touchTarget}
                 appearance="primary"
                 icon={<ArrowRightRegular />}
                 iconPosition="after"
                 onClick={() => onNavigate('config')}
                 data-testid="home-configure-target-btn"
-                className={styles.mobilePrimaryAction}
               >
                 {activeTarget ? 'Manage targets' : 'Configure a target'}
               </Button>
@@ -204,6 +204,7 @@ export default function Home({
           <div className={styles.sectionHeader}>
             <Text as="h2" size={500} weight="semibold">Recent operations</Text>
             <Button
+              className={styles.touchTarget}
               appearance="subtle"
               icon={<ArrowRightRegular />}
               iconPosition="after"
@@ -229,6 +230,7 @@ export default function Home({
                 Configure a target and start a new attack from the Chat tab.
               </Text>
               <Button
+                className={styles.touchTarget}
                 appearance="primary"
                 onClick={() => onNavigate('chat')}
                 data-testid="home-start-attack-btn"
diff --git a/frontend/src/components/Labels/LabelsBar.styles.ts b/frontend/src/components/Labels/LabelsBar.styles.ts
index f21e7b3dd5..aabb3c3bae 100644
--- a/frontend/src/components/Labels/LabelsBar.styles.ts
+++ b/frontend/src/components/Labels/LabelsBar.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget } from '../../styles/touchTargets'
 
 export const useLabelsBarStyles = makeStyles({
   root: {
@@ -16,9 +17,7 @@ export const useLabelsBarStyles = makeStyles({
   },
   iconButton: {
     flexShrink: 0,
-    '@media (max-width: 600px)': {
-      minHeight: '44px',
-    },
+    ...mobileTouchTarget,
   },
   iconTooltipBody: {
     whiteSpace: 'nowrap',
diff --git a/frontend/src/components/Tour/TourTooltip.styles.ts b/frontend/src/components/Tour/TourTooltip.styles.ts
index f3caf03c98..cb1fa76c69 100644
--- a/frontend/src/components/Tour/TourTooltip.styles.ts
+++ b/frontend/src/components/Tour/TourTooltip.styles.ts
@@ -1,4 +1,5 @@
 import { makeStyles, tokens } from '@fluentui/react-components'
+import { mobileTouchTarget } from '../../styles/touchTargets'
 
 export const useTourTooltipStyles = makeStyles({
   // Outer wrapper: provides space for the mascot to overflow below the card
@@ -42,10 +43,7 @@ export const useTourTooltipStyles = makeStyles({
     marginTop: '-4px',
   },
   closeButton: {
-    '@media (max-width: 600px)': {
-      minWidth: '44px',
-      minHeight: '44px',
-    },
+    ...mobileTouchTarget,
   },
   content: {
     color: tokens.colorNeutralForeground1,
@@ -72,9 +70,6 @@ export const useTourTooltipStyles = makeStyles({
     justifyContent: 'flex-end',
   },
   actionButton: {
-    '@media (max-width: 600px)': {
-      minWidth: '44px',
-      minHeight: '44px',
-    },
+    ...mobileTouchTarget,
   },
 })
diff --git a/frontend/src/styles/touchTargets.ts b/frontend/src/styles/touchTargets.ts
new file mode 100644
index 0000000000..2942fe64c1
--- /dev/null
+++ b/frontend/src/styles/touchTargets.ts
@@ -0,0 +1,21 @@
+// Screen width only - for layout/reflow decisions (wrapping, stacking,
+// hiding columns).
+export const NARROW_VIEWPORT_QUERY = '@media (max-width: 600px)'
+
+// Input mechanism only - for sizing hit areas for a finger vs. a cursor.
+export const TOUCH_INPUT_QUERY = '@media (pointer: coarse)'
+
+export const MINIMUM_TOUCH_TARGET_SIZE = '2.75rem'
+
+export const mobileTouchTarget = {
+  [TOUCH_INPUT_QUERY]: {
+    minWidth: MINIMUM_TOUCH_TARGET_SIZE,
+    minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+  },
+}
+
+export const mobileTouchTargetHeight = {
+  [TOUCH_INPUT_QUERY]: {
+    minHeight: MINIMUM_TOUCH_TARGET_SIZE,
+  },
+}