From 5db4cee84080ec1f3f583a49322e24fef5038c69 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Apr 2026 19:44:17 +0000
Subject: [PATCH 1/2] Initial plan


From f2258582e0297692a32f22d60e4d7a49b1a148c6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Apr 2026 19:55:18 +0000
Subject: [PATCH 2/2] fix: increase mobile table cell touch target to 44px and
 add WCAG/scroll-wrapper tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase `min-height` for mobile table cells from 1.5rem (24px) to 2.75rem
  (44px) to meet WCAG 2.5.5 AAA touch target recommendation
- Add Playwright test to verify every table on the engines reference page is
  wrapped in `.table-scroll-wrapper` for consistent horizontal scrolling
- Add Playwright test to verify mobile table cells meet the 44px minimum
  touch target size at ≤640px viewport"

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/8470571e-188a-4873-926b-51b337516fdd

Co-authored-by: gh-aw-bot <259018956+gh-aw-bot@users.noreply.github.com>
---
 docs/src/styles/custom.css           |  2 +-
 docs/tests/mobile-responsive.spec.ts | 46 ++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 91f7010102b..320d7ab9b4d 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -831,7 +831,7 @@ header::after {
     text-align: right;
     position: relative;
     padding-left: 50%;
-    min-height: 1.5rem;
+    min-height: 2.75rem;
   }
 
   .sl-markdown-content td:first-child {
diff --git a/docs/tests/mobile-responsive.spec.ts b/docs/tests/mobile-responsive.spec.ts
index b4ebcf0ed4e..87affc73a55 100644
--- a/docs/tests/mobile-responsive.spec.ts
+++ b/docs/tests/mobile-responsive.spec.ts
@@ -53,6 +53,52 @@ test.describe('Mobile and Responsive Layout', () => {
     await context.close();
   });
 
+  test('should wrap ALL markdown tables in a scroll wrapper on the engines reference page', async ({ browser }) => {
+    const context = await browser.newContext({
+      javaScriptEnabled: false,
+      viewport: { width: 768, height: 1024 },
+    });
+    const page = await context.newPage();
+
+    await page.goto('/gh-aw/reference/engines/');
+    await page.waitForLoadState('domcontentloaded');
+
+    // Count all tables in markdown content area
+    const tableCount = await page.locator('.sl-markdown-content table').count();
+    expect(tableCount).toBeGreaterThan(0);
+
+    // Count tables that are direct children of .table-scroll-wrapper
+    const wrappedTableCount = await page.locator('.sl-markdown-content .table-scroll-wrapper > table').count();
+
+    // Every table must have a scroll wrapper for consistent horizontal scrolling on all viewports
+    expect(wrappedTableCount).toBe(tableCount);
+
+    await context.close();
+  });
+
+  test('should have WCAG 2.5.5-compliant touch target size for mobile table cells', async ({ browser }) => {
+    const context = await browser.newContext({
+      javaScriptEnabled: true,
+      viewport: { width: 390, height: 844 },
+    });
+    const page = await context.newPage();
+
+    await page.goto('/gh-aw/reference/engines/');
+    await page.waitForLoadState('networkidle');
+
+    // On mobile (<=640px), table cells are rendered as stacked cards.
+    // Each cell must meet the WCAG 2.5.5 AAA minimum touch target of 44 px (2.75 rem).
+    const tdMinHeight = await page.evaluate(() => {
+      const td = document.querySelector('.sl-markdown-content table tbody td');
+      if (!td) return 0;
+      return parseFloat(getComputedStyle(td).minHeight);
+    });
+
+    expect(tdMinHeight).toBeGreaterThanOrEqual(44);
+
+    await context.close();
+  });
+
   for (const formFactor of formFactors) {
     test.describe(`${formFactor.name}`, () => {
       test.beforeEach(async ({ page }) => {