chore(website): [playground] improve mobile design

[armano2]

PR Checklist

• Addresses an existing open issue: fixes #000
• That issue was marked as accepting prs
• Steps in Contributing were taken

Overview

Improve playground design on mobile devices

this change has been extracted from #6656

[typescript-eslint]

Thanks for the PR, @armano2!

typescript-eslint is a 100% community driven project, and we are incredibly grateful that you are contributing to that community.

The core maintainers work on this in their personal time, so please understand that it may not be possible for them to review your work immediately.

Thanks again!

---

🙏 Please, if you or your company is finding typescript-eslint valuable, help us sustain the project by sponsoring it transparently on https://opencollective.com/typescript-eslint.

[netlify]

✅ Deploy Preview for typescript-eslint ready!

Name	Link
🔨 Latest commit	37bf042
🔍 Latest deploy log	https://app.netlify.com/sites/typescript-eslint/deploys/65522074255767000821c8f9
😎 Deploy Preview	https://deploy-preview-7672--typescript-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 (🔴 down 4 from production) Accessibility: 100 (no change from production) Best Practices: 92 (no change from production) SEO: 98 (no change from production) PWA: 80 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4529592. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 19 targets

• nx test eslint-plugin --coverage=false
• nx test typescript-estree --coverage=false
• nx test utils --coverage=false
• nx run types:build
• nx run repo-tools:postinstall-script
• nx run-many --target=lint --parallel
• nx test visitor-keys --coverage=false
• nx test type-utils --coverage=false
• nx test rule-schema-to-typescript-types --coverage=false
• nx test scope-manager --coverage=false
• nx test eslint-plugin-internal --coverage=false
• nx test parser --coverage=false
• nx test repo-tools --coverage=false
• nx test eslint-plugin-tslint --coverage=false
• nx test ast-spec --coverage=false
• nx run integration-tests:test
• nx run-many --target=typecheck --parallel
• nx run eslint-plugin:generate:configs
• nx run-many --target=build --parallel --exclude=website --exclude=website-eslint

---

Sent with 💌 from NxCloud.

[bradzacher]

The layout seems a bit wrong on mobile - the bottom panel is real small and I can't scroll to see the content.

[armano2]

can you tell me what browser / os is that, i will check it out

---

edit, nvm i can see where issue is, after clearing cache i'm able to reproduce it on my phone and in browser

---

issue seem to be present only in normal build and not in dev mode

---

edit, issue fixed

[bradzacher]

this is looking good to me from a design perspective and the react code sure looks like react code (it's been a while since I've properly written any react so :nodders:

my only point of feedback is this logic here - chained, mixed logicals within a JSX expression are pretty gnarly to read, but we've already got #7630 for that so :nodders: again

[bradzacher]

something about this PR is breaking in CI. The initial install step is failing to finish (it was auto-cancelled after SIX hours)

[JoshuaKGoldberg]

Swell, thanks!