fix: contain long custom provider URLs

[andrebrait]

Summary

• Allow custom-provider identity columns to shrink and wrap long URLs and hostnames without truncation.
• Wrap provider actions onto additional rows when space is limited.
• Apply the same sizing rules to the provider editor header.

Verification

• Chromium smoke check of the real ModelsConfig component with synthetic long-hostname/long-path provider data and application CSS at 320, 768, 1024, and 1440 pixels.
• Provider cards and editor content have matching scrollWidth/clientWidth; their controls remain inside their containers.
• Keyboard navigation opens the custom-provider list and editor.
• TypeScript typecheck and component ESLint passed.
• Existing application suite passed: 636 passed, 1 platform-specific skip.

No provider data, validation, or API behavior changed. Temporary browser smoke scaffolding was removed. Unrelated local PWA work is excluded from this branch.

Summary by CodeRabbit

• Bug Fixes
  • Long custom-provider URLs, hostnames, names, descriptions, and paths now stay within their cards.
  • Provider actions wrap correctly on narrow screens.
  • Provider navigation labels remain fully visible.
  • Add Provider and Save controls wrap correctly in narrow settings panels.
  • Improved layout behavior for provider detail and custom-provider cards.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: 7d8ec3d8-0093-4738-a1f0-e6d6e0d448bd

📥 Commits

Reviewing files that changed from the base of the PR and between b6b0a44 and 26cf4b1.

📒 Files selected for processing (3)

• CHANGELOG.md
• app/globals.css
• components/ModelsConfig.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• CHANGELOG.md

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

Provider configuration layouts now wrap long names, URLs, descriptions, navigation labels, and actions within narrow panels. The changelog records these responsive layout fixes.

Changes

Provider responsive layout

Layer / File(s)	Summary
Provider content wrapping components/ModelsConfig.tsx	Provider detail and custom-provider sections wrap long text and action buttons. Text regions can shrink and break long values.
Provider controls wrapping app/globals.css, components/ModelsConfig.tsx, CHANGELOG.md	Provider navigation labels and save controls wrap within narrow panels. The changelog documents the responsive changes.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: kahme247

Merge Risk: ⚪ Minimal · up to 26cf4

Responsive provider layout changes are ready to merge; no material runtime or product risk is identified.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: containing long custom-provider URLs in narrow layouts.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files. (2 skipped: 2 …
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/custom-provider-overflow

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[andrebrait]

@coderabbitai review

[coderabbitai]

⚠️ Action not completed

Already reviewed the last commit. Use @coderabbitai full review to rerun a review of the entire changeset.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

🟢 Approval recommended

No unresolved blocking issues were identified in the reviewed changes.

Pull request overview

Improves responsive custom-provider layouts so long names, URLs, and hostnames remain contained.

Changes:

• Adds wrapping and shrinking for provider identity content.
• Wraps provider actions on narrow screens.
• Documents the fix in CHANGELOG.md.

File summaries

File	Summary
components/ModelsConfig.tsx	Adds responsive wrapping and long-text containment.
CHANGELOG.md	Records the unreleased layout fix.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[andrebrait]

Follow-up c4f504b addresses the screenshot: the Custom Providers navigation label is no longer clipped, and Save stays inside the footer. Provider navigation now wraps, as do footer text/actions and the Add Provider header. Verified the complete real ModelsConfig panel in Chromium with fresh application CSS and application fonts: empty state at 320/360/402/768/1024/1440px; populated long-URL state at 320/402/768/1440px; long save error at 320px. Every panel button stays contained, both navigation groups show complete labels, and footer scrollWidth matches clientWidth. Save was exercised through keyboard interaction against an isolated fixture; no real provider configuration was changed. Typecheck and component ESLint passed. Temporary smoke files and server were removed.

[andrebrait]

@coderabbitai review

[coderabbitai]

⚠️ Action not completed

Review rate limited.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

🟢 Approval recommended

No unresolved review issues remain.

Review details

• Files reviewed: 3/3 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

🔵 Needs a closer look

The segmented control may still exceed its available width by 2px on narrow settings panels.

Review details

Suppressed comments (1)

app/globals.css:2342

• max-width: 100% limits only the content box by default, while this control still adds a 1px border on both sides. When the segmented control reaches the available width on a narrow settings panel, its outer box can therefore be 2px wider and create horizontal overflow despite the containment fix. Set the control to box-sizing: border-box (or subtract the border from the max width).

  max-width: 100%;

• Files reviewed: 3/3 changed files
• Comments generated: 0 new
• Review effort level: Lite

[andrebrait]

Reviewed Copilot’s suppressed border-box concern on 26cf4b1. No change needed: app/globals.css imports Tailwind, whose preflight applies box-sizing: border-box globally to every element (node_modules/tailwindcss/preflight.css:7–15). The real-component Chromium check used the compiled application CSS: at a 320px viewport, the provider panel has 292px content width and each segmented control has 290px clientWidth plus its two 1px borders, totaling exactly 292px. Navigation scrollWidth equals clientWidth, labels remain visible, and the entire panel has no horizontal overflow. Adding a component-specific duplicate reset would not change behavior.

[andrebrait]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.