fix(console): stabilize provider card header layout across locales

[EuanTop]

Description

Improve layout consistency of Models > Providers cards across locales (English/Chinese/Japanese/Russian) while preserving narrow-width usability.

This PR focuses on stable, predictable card structure in multilingual scenarios:

• Keep provider action buttons on one line and prevent overflow in narrow card widths.
• Keep custom provider delete action compact on narrow cards (Delete Provider → Delete).
• Make provider header layout consistent across locales:
  • Status block alignment is stable.
  • Wrapped titles and provider tags follow consistent placement rules.
  • Vertical spacing is tuned to avoid uneven visual rhythm between cards.

Security Considerations: N/A (UI layout/text behavior only, no auth/config/data-path changes)

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

Testing

Manual:

1. Open Models > Providers page.
2. Verify card layout under multiple locales (at least English, Chinese, Japanese, Russian).
3. Verify title/status/tag/action placement remains consistent across cards.
4. Resize browser width to narrow layout and confirm action area does not overflow.
5. Confirm custom provider delete text compacts only in narrow widths.

Build:

• Frontend production build succeeds.

Local Verification Evidence

pre-commit run --all-files

• Passed locally.

pytest

• Passed locally.

npm run build (console)

• Passed locally.

Additional Notes

This change is intentionally scoped to console UI layout consistency and does not alter provider APIs or backend behavior.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user experience of the Models > Providers page by improving the responsiveness of provider cards. The changes focus on preventing UI elements from overflowing or wrapping inappropriately when the browser window is narrow, ensuring a cleaner and more functional layout across different screen sizes.

Highlights

• Responsive UI for Provider Cards: Implemented responsive design adjustments to prevent action button overflow in Models > Providers cards on narrow browser widths.
• Non-wrapping Action Buttons: Ensured that action buttons within provider cards remain on a single line, preventing them from wrapping onto multiple lines.
• Dynamic Spacing and Padding: Introduced responsive spacing and padding for card actions and buttons, which dynamically adjusts as the card width shrinks.
• Conditional Delete Button Text: Changed the 'Delete Provider' label for custom providers to simply 'Delete' on narrow card widths to avoid text overflow, while retaining the full label on wider screens.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• console/src/pages/Settings/Models/components/cards/RemoteProviderCard.tsx
  • Implemented conditional rendering for the delete button text to support truncation on narrow widths.
  • Applied a new CSS class (configBtn) to the delete button for responsive styling.
• console/src/pages/Settings/Models/index.module.less
  • Enabled container queries for provider cards by adding container-type: inline-size; to .providerCard.
  • Adjusted cardActions styling to prevent button wrapping (flex-wrap: nowrap;) and introduce responsive spacing (gap: clamp(...)).
  • Modified configBtn styling for responsive internal gap and padding (gap: clamp(...), padding: 6px clamp(...)).
  • Introduced container and media queries to control the visibility of long and short delete button text labels (deleteTextLong, deleteTextShort) and further refine spacing and padding on narrow layouts.

Activity

• No human activity has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Generative AI Prohibited Use Policy, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request fixes an overflow issue on provider cards by making the action buttons responsive. The approach uses a combination of CSS techniques including clamp(), media queries, and container queries. While this works, the mix of these techniques for the same properties makes the styling complex and harder to maintain. My review includes suggestions to refactor the CSS to rely solely on container queries for responsive adjustments. This will make the component's styling more robust, self-contained, and easier to reason about.

[Copilot]

Pull request overview

This PR addresses action-button overflow in the Console’s Models > Providers cards at narrow widths by making the action area non-wrapping and reducing spacing/padding responsively, including shortening the custom-provider delete label when space is constrained.

Changes:

• Enables container queries on provider cards and uses them to tighten action spacing/padding at very narrow card widths.
• Forces the actions row and individual action buttons to remain on a single line (no wrapping).
• Updates the custom provider delete button to swap between “Delete Provider” and “Delete” based on container width.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
console/src/pages/Settings/Models/index.module.less	Adds container-query-driven compact styles for provider card actions and adjusts spacing/padding to avoid overflow.
console/src/pages/Settings/Models/components/cards/RemoteProviderCard.tsx	Wraps delete label in long/short spans and applies shared action-button styling to the delete button.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[EuanTop]

addressed review comments and unified responsive card layout across locales.

[Copilot]

Pull request overview

This PR improves the layout stability of the Models > Providers cards across multiple locales by restructuring the provider card header and action areas to behave more predictably at narrow widths.

Changes:

• Added container-query-driven responsive tweaks for provider card actions (gap/padding and compact delete label on narrow cards).
• Reworked provider card header layout to stabilize title/tag placement and status alignment.
• Introduced runtime wrapped-title detection to switch between single-line vs structured two-line header rendering.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
console/src/pages/Settings/Models/index.module.less	Adds container queries and new header/status/title/action styles to keep alignment stable across widths/locales.
console/src/pages/Settings/Models/components/cards/RemoteProviderCard.tsx	Updates remote provider card header rendering, adds wrapped-title detection, and shortens delete label on narrow cards.
console/src/pages/Settings/Models/components/cards/LocalProviderCard.tsx	Mirrors the header/title/status layout behavior of remote cards, including wrapped-title detection.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

Improves the visual stability of the Models > Providers cards across multiple locales by adjusting the provider card header layout, title wrapping behavior, status block layout, and narrow-width action button behavior.

Changes:

• Adds container-query driven responsive tweaks to provider cards to keep actions on one line and shorten delete text on narrow cards.
• Refactors provider header structure/styles to stabilize title/tag wrapping and status alignment.
• Adds runtime title-wrapping detection (via ResizeObserver) to switch between title layouts.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

File	Description
console/src/pages/Settings/Models/index.module.less	Adds container queries and new header/title/status/action layout styles to stabilize card layout across locales and widths.
console/src/pages/Settings/Models/components/cards/RemoteProviderCard.tsx	Updates header markup to support the new title/tag/status layout, including wrap detection and compact delete label.
console/src/pages/Settings/Models/components/cards/LocalProviderCard.tsx	Mirrors the new header/title/status layout and wrap detection for local provider cards.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

Pull request overview

This PR improves the visual stability of the Models → Providers card headers across locales by restructuring the header layout, tightening action button behavior at narrow widths, and standardizing status/title/tag placement.

Changes:

• Adds container-query-based responsive tweaks to keep provider action buttons on one line and shorten the delete label on very narrow cards.
• Reworks provider header layout to stabilize status alignment and title/tag placement (including wrapped-title handling).
• Refactors status rendering into “main” + “meta” lines with ellipsis handling and a consistent dot placement.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
console/src/pages/Settings/Models/index.module.less	Adds container queries and new layout classes for consistent header/title/status/actions behavior across widths/locales.
console/src/pages/Settings/Models/components/cards/RemoteProviderCard.tsx	Updates remote provider card header rendering (wrapped title logic, status split, compact delete label).
console/src/pages/Settings/Models/components/cards/LocalProviderCard.tsx	Applies the same wrapped-title/status layout approach to local provider cards for consistency.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.