fix: improve playground mobile responsiveness

[ooples]

Summary

• Enable word wrap in Monaco editor for better mobile display
• Add aggressive overflow controls to prevent horizontal scrolling
• Constrain panel headers and editor containers to viewport width
• Add max-width: 100vw to root elements on mobile
• Fix Monaco editor width with deep CSS selectors

Test plan

• Open playground on mobile device or Chrome DevTools mobile simulator
• Verify code editor fits within viewport width
• Verify "Code Editor" and "Program.cs" header is visible and not cut off
• Verify long lines of code wrap properly
• Verify output panel displays correctly

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
aidotnet-playground-api	Ready	Preview, Comment	Jan 23, 2026 1:40pm

[coderabbitai]

Summary by CodeRabbit

• New Features

  • Enhanced mobile responsiveness across the application and documentation site with improved layout, typography, and touch targets for small screens.
  • Optimized editor experience on mobile devices with word-wrapping and responsive panel stacking.

• Chores

  • Improved GitHub Pages deployment compatibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

This PR implements mobile-responsive design improvements across the documentation and playground components while ensuring GitHub Pages compatibility. Changes include adding .nojekyll markers in deployment workflows, updating configuration files, and introducing extensive CSS media queries for responsive layouts on small screens.

Changes

Cohort / File(s)	Summary
GitHub Actions Workflow Updates .github/workflows/docs.yml, .github/workflows/sonarcloud.yml	Add .nojekyll file creation steps to prevent GitHub Pages from ignoring underscore-prefixed folders in both conditional and unconditional deployment paths.
Configuration & Ignore Files .gitignore, docfx.json	Add ignore patterns for _playground_new/ and _playground_test/ directories; extend template array with templates/modern path for DocFX builds.
Playground Layout Responsiveness src/AiDotNet.Playground/MainLayout.razor	Add mobile-responsive CSS with viewport height adjustments, flex constraints for header/footer/content, and media queries for screens ≤768px and ≤480px affecting spacing, font sizes, and visibility.
Playground Editor Responsiveness src/AiDotNet.Playground/Pages/Index.razor	Add container overflow handling, Monaco editor width constraints, and extensive mobile media queries to reflow editor panels vertically; enable word wrapping in editor options for mobile usability.
Documentation CSS Mobile Enhancements templates/modern/public/main.css	Add mobile-first responsive styling for tables (scrollable with gradient indicators), code blocks, navigation, content spacing, typography scaling, and print formatting across 768px and 480px breakpoints.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• fix: enhance disk space cleanup and remove duplicate build in docs deployment #740 — Modifies docs deployment workflows to handle .nojekyll creation in _site prior to Pages upload.
• docs: comprehensive documentation and README fixes #730 — Updates .github/workflows/docs.yml to add unconditional .nojekyll file creation steps.
• fix: run documentation deployment in parallel with tests #734 — Modifies both docs and sonarcloud workflows around playground copy/deploy and skip_playground logic with .nojekyll handling.

Suggested labels

feature

Poem

🐰 Mobile hops across the screen so small,
Responsive layout answers the call!
.nojekyll guards the underscore halls,
While CSS queries dance through breakpoints, one and all—
A fluffy web, now friendly to all! 📱✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main focus of this PR: improving mobile responsiveness in the playground, which aligns with all file changes.
Description check	✅ Passed	The description is directly related to the changeset, providing a clear summary of the mobile responsiveness improvements and a concrete test plan for validation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/mobile-responsive-docs

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud