feat(console): mobile adaptation for Environments page

[yaozy2020]

Description

This PR adds mobile adaptation for the Settings → Environments page in the QwenPaw console.

On narrow screens (≤768px):

• The page header stacks vertically.
• The toolbar (select-all checkbox / action buttons) stacks vertically.
• Each environment variable row switches from a horizontal Key/Value layout to a stacked vertical layout with full-width inputs.
• Input height is preserved on mobile by forcing the antd Input wrapper to display: flex so that height: 100% applies correctly to the inner input, including inputs with a suffix (eye icon).
• Row action buttons (+ insert / delete) are enlarged and given a light background so they remain visible and tappable.
• The checkbox fill color is lightened for better visibility.

Related Issue: Relates to the ongoing console mobile adaptation effort.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Refactoring

Component(s) Affected

• Core / Backend (app, agents, config, providers, utils, local_models)
• Console (frontend web UI)
• Channels (DingTalk, Feishu, QQ, Discord, iMessage, etc.)
• Skills
• CLI
• Documentation (website)
• Tests
• CI/CD
• Scripts / Deploy

Checklist

• I ran pre-commit run --all-files locally and it passes
• If pre-commit auto-fixed files, I committed those changes and reran checks
• I ran tests locally (pytest or as relevant) and they pass
• Documentation updated (if needed)
• Ready for review

Note on pre-commit: The current pre-commit config excludes ^console/ from the prettier hook, so frontend files are not auto-checked. I manually verified the changes with tsc, prettier, eslint, and npm run build.

Testing

1. Open QwenPaw Console on a mobile browser or a narrow viewport (≤768px).
2. Navigate to Settings → Environments.
3. Verify that:
   • The page header and toolbar do not overflow horizontally.
   • Each row shows Key and Value stacked vertically with usable input heights.
   • Inputs with the eye icon (password values) are not collapsed.
   • Row action buttons (+ / delete) are clearly visible.
   • Checkboxes are easy to see.
4. Resize to desktop width and confirm the horizontal row layout remains unchanged.

Local Verification Evidence

cd console
npx tsc --noEmit
npx prettier --check "src/pages/Settings/Environments/**/*.{ts,tsx,less}"
npx eslint "src/pages/Settings/Environments/**/*.{ts,tsx}"
npm run build
# all passed

Additional Notes

Only PageHeader receives className={styles.pageHeader}. All mobile styles are scoped inside @media (max-width: 768px) at the end of index.module.less. The desktop light-mode .inputField styles are left untouched; mobile overrides live inside the media query.

[github-actions]

Welcome to QwenPaw! 🐾

Hi @yaozy2020, thank you for your first Pull Request! 🎉

🙌 Join Developer Community

Thanks so much for your contribution! We'd love to invite you to join the official QwenPaw developer group! You can find the Discord and DingTalk group links under the "Developer Community" section on our docs page:
https://qwenpaw.agentscope.io/docs/community

We truly appreciate your enthusiasm—and look forward to your future contributions! 😊

We'll review your PR soon.

---

Tip

⭐ If you find QwenPaw useful, please give us a Star!

Staying ahead

Star QwenPaw on GitHub and be instantly notified of new releases.

Your star helps more developers discover this project! 🐾

[zhaozhuang521]

LGTM

[zhaozhuang521]

LGTM

[github-actions]

Welcome to QwenPaw! 🎉

Thank you @yaozy2020 for your first contribution! Your PR has been merged. 🚀

We'd love to give you a shout-out in our release notes! If you're comfortable sharing, please reply to this comment with your social media handles using the format below:

discord: your_discord_handle
x: your_x_handle
xiaohongshu: your_xiaohongshu_id

Note: Only share what you're comfortable with — all fields are optional.

Thanks again for helping make QwenPaw better!