From b8d6f6d823a780326363a99ab26f428d88399094 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Apr 2026 12:39:31 +0000 Subject: [PATCH 1/3] Initial plan From d9b95af40cb13f7d172c428846739b904c48b05f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Apr 2026 13:05:39 +0000 Subject: [PATCH 2/3] fix(docs): keep landing-page code block scrollable on mobile Agent-Logs-Url: https://github.com/github/gh-aw/sessions/f8002d2a-63b7-4b42-9f54-36f382412ab1 Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- docs/src/styles/custom.css | 16 +++++++ .../homepage-code-block-overflow.spec.ts | 44 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 docs/tests/homepage-code-block-overflow.spec.ts diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css index a73d8605e79..a42c5d01fa4 100644 --- a/docs/src/styles/custom.css +++ b/docs/src/styles/custom.css @@ -1598,6 +1598,22 @@ main, /* Mobile-specific: Enable text wrapping for code snippets */ @media (max-width: 768px) { + /* Keep Expressive Code examples scrollable within the code frame on mobile */ + .sl-markdown-content .expressive-code, + .sl-markdown-content .expressive-code .frame, + .sl-markdown-content .expressive-code pre { + max-width: 100%; + min-width: 0; + } + + .sl-markdown-content .expressive-code .frame { + overflow-x: auto; + } + + .sl-markdown-content .expressive-code pre { + width: 100%; + } + .sl-markdown-content pre code { white-space: pre-wrap; word-break: break-word; diff --git a/docs/tests/homepage-code-block-overflow.spec.ts b/docs/tests/homepage-code-block-overflow.spec.ts new file mode 100644 index 00000000000..990de84c86b --- /dev/null +++ b/docs/tests/homepage-code-block-overflow.spec.ts @@ -0,0 +1,44 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Homepage code block overflow', () => { + const mobileWidths = [360, 393, 428]; + + for (const width of mobileWidths) { + test(`keeps landing page code block accessible at ${width}px`, async ({ page }) => { + await page.setViewportSize({ width, height: 852 }); + await page.goto('/gh-aw/'); + await page.waitForLoadState('networkidle'); + + const metrics = await page.evaluate(() => { + const frame = document.querySelector('.expressive-code .frame'); + if (!frame) { + return null; + } + + const frameStyle = getComputedStyle(frame); + const hasHorizontalOverflow = frame.scrollWidth > frame.clientWidth + 1; + + if (hasHorizontalOverflow) { + frame.scrollLeft = frame.scrollWidth; + } + + return { + bodyScrollWidth: document.body.scrollWidth, + bodyClientWidth: document.body.clientWidth, + frameOverflowX: frameStyle.overflowX, + frameScrollWidth: frame.scrollWidth, + frameClientWidth: frame.clientWidth, + frameScrolled: frame.scrollLeft > 0, + }; + }); + + expect(metrics).not.toBeNull(); + expect(metrics!.bodyScrollWidth).toBeLessThanOrEqual(metrics!.bodyClientWidth + 1); + expect(['auto', 'scroll']).toContain(metrics!.frameOverflowX); + + if (metrics!.frameScrollWidth > metrics!.frameClientWidth + 1) { + expect(metrics!.frameScrolled).toBeTruthy(); + } + }); + } +}); From 6ef330a502e80a24412d6909f29ecda68bda190e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Apr 2026 13:13:23 +0000 Subject: [PATCH 3/3] test(docs): remove magic numbers in mobile overflow regression test Agent-Logs-Url: https://github.com/github/gh-aw/sessions/f8002d2a-63b7-4b42-9f54-36f382412ab1 Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> --- docs/tests/homepage-code-block-overflow.spec.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/tests/homepage-code-block-overflow.spec.ts b/docs/tests/homepage-code-block-overflow.spec.ts index 990de84c86b..475b640b272 100644 --- a/docs/tests/homepage-code-block-overflow.spec.ts +++ b/docs/tests/homepage-code-block-overflow.spec.ts @@ -1,6 +1,7 @@ import { test, expect } from '@playwright/test'; test.describe('Homepage code block overflow', () => { + const SUBPIXEL_TOLERANCE = 1; const mobileWidths = [360, 393, 428]; for (const width of mobileWidths) { @@ -9,14 +10,14 @@ test.describe('Homepage code block overflow', () => { await page.goto('/gh-aw/'); await page.waitForLoadState('networkidle'); - const metrics = await page.evaluate(() => { + const metrics = await page.evaluate((tolerance) => { const frame = document.querySelector('.expressive-code .frame'); if (!frame) { return null; } const frameStyle = getComputedStyle(frame); - const hasHorizontalOverflow = frame.scrollWidth > frame.clientWidth + 1; + const hasHorizontalOverflow = frame.scrollWidth > frame.clientWidth + tolerance; if (hasHorizontalOverflow) { frame.scrollLeft = frame.scrollWidth; @@ -30,13 +31,13 @@ test.describe('Homepage code block overflow', () => { frameClientWidth: frame.clientWidth, frameScrolled: frame.scrollLeft > 0, }; - }); + }, SUBPIXEL_TOLERANCE); expect(metrics).not.toBeNull(); - expect(metrics!.bodyScrollWidth).toBeLessThanOrEqual(metrics!.bodyClientWidth + 1); + expect(metrics!.bodyScrollWidth).toBeLessThanOrEqual(metrics!.bodyClientWidth + SUBPIXEL_TOLERANCE); expect(['auto', 'scroll']).toContain(metrics!.frameOverflowX); - if (metrics!.frameScrollWidth > metrics!.frameClientWidth + 1) { + if (metrics!.frameScrollWidth > metrics!.frameClientWidth + SUBPIXEL_TOLERANCE) { expect(metrics!.frameScrolled).toBeTruthy(); } });