Add automatic text wrapping for code snippets in mobile mode

[Copilot]

Plan: Automatic Text-Wrapping for Code Snippets in Mobile Mode

• Analyze current code block styling in custom.css
• Add mobile-specific media query for code snippet text-wrapping
• Test changes on mobile viewport
• Verify both dark and light themes work correctly
• Ensure desktop view remains unchanged
• Take screenshots of before/after mobile view

Changes Made

Added CSS media query for mobile devices (max-width: 768px) that enables text-wrapping for code snippets in docs/src/styles/custom.css:

• white-space: pre-wrap - Allows text to wrap while preserving whitespace
• word-break: break-word - Breaks long words at appropriate points
• overflow-wrap: break-word - Wraps overflow content

Screenshots

Mobile View - Before

Mobile View - After (Code Wrapping)

Desktop View - Unchanged

Testing

• ✅ Rebuilt documentation site from scratch
• ✅ Tested on mobile viewport (375x667px) - code wraps properly
• ✅ Tested on desktop viewport (1280x720px) - maintains horizontal scroll
• ✅ Verified both dark and light themes work correctly

The solution ensures code snippets are readable on mobile devices while maintaining the expected horizontal scroll behavior on desktop.

Original prompt

Automatically text-wrap all snippets in mobile mode in the docs Astro site.

See https://githubnext.github.io/gh-aw/reference/tokens/

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[pelikhan]

@copilot keep working

[Copilot]

@copilot keep working

Done! I've successfully implemented automatic text-wrapping for code snippets in mobile mode (commit 0b69c84).

What was done:

• Added CSS media query targeting mobile devices (max-width: 768px)
• Code snippets now wrap text on mobile while maintaining horizontal scroll on desktop
• Tested on both mobile (375px) and desktop (1280px) viewports
• Works correctly in both dark and light themes

Result:

• Mobile users can now read long code lines without horizontal scrolling
• Desktop experience remains unchanged with normal pre formatting
• See screenshots in PR description showing before/after comparison

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node node /home/REDACTED/.npm/_npx/aa98e6899c6baff3/node_modules/.bin/astro build (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)