Fix overlapping OAuth provider detail URLs

[kentcdodds]

Long authorize/token URLs in the Provider details grid were overflowing into neighboring columns on /connect/oauth.

Changes

• Teach shared detailItemCss / detailValueCss to constrain width and wrap unbroken strings (min-width: 0, overflow-wrap: anywhere).
• Apply detailValueCss to bare <code> URL/name fields on the connect OAuth page.
• Drop the duplicate wrap styles from account integrations now that the shared primitive handles it.
• Follow-up: drop word-break: break-all so multi-word values can wrap at spaces.

Verification

System recap — extends existing primitives (medium risk)

Mode: recap · Base: main @ 5fe4a1cd · Head: latest on branch

Classification: extends — shared UI detail styles now wrap long values so grid columns stay in bounds.

Primitives touched

Primitive	Group	Impact
app-ui	surfaces	extends — detail grid/value CSS wraps long URLs; connect OAuth and account integrations consume it

System map

flowchart LR
  connect["/connect/oauth Provider details"] --> detail["detailGridCss / detailValueCss"]
  integrations["/account/integrations"] --> detail
  detail --> wrap["min-width 0 + overflow-wrap"]

Loading

Risk callouts

• Visual-only CSS change; no auth, storage, or MCP contract changes.

  

Summary by CodeRabbit

• Bug Fixes
  • Improved rendering of integration and provider detail sections to better handle long content.
  • Updated detail value layout and wrapping so long URLs/tokens/metadata wrap within their containers rather than overflowing.
  • Standardized styling for code-formatted fields across OAuth configuration screens, including “Authorize URL” and “Token URL” values.

[coderabbitai]

📝 Walkthrough

Walkthrough

Integration detail styles now constrain and wrap long values consistently. Account integration and OAuth detail views use the shared value styling for displayed URLs, secrets, metadata, and other integration fields.

Changes

Integration detail layout

Layer / File(s)	Summary
Shared detail style rules packages/worker/client/styles/style-primitives.ts	detailItemCss now sets minWidth: 0, while detailValueCss adds block layout, width limits, and explicit wrapping rules.
Integration detail style adoption packages/worker/client/routes/account-integrations.tsx, packages/worker/client/routes/connect-oauth.tsx	Integration and OAuth detail values now consistently use detailValueCss without duplicated local wrapping styles.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• kentcdodds/kody#550: Introduced the account integrations page UI in the same integration-detail rendering area.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: preventing OAuth provider detail URLs from overlapping in the Connect OAuth UI.

✨ 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 cursor/fix-provider-details-url-overflow-adf8

---

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.}

[github-actions]

🔎 Preview deployed: https://kody-pr-696.kody-a99.workers.dev

Worker: kody-pr-696
D1: kody-pr-696-db
KV: kody-pr-696-oauth-kv

Mocks:

• cloudflare: https://kody-pr-696-mock-cloudflare.kody-a99.workers.dev/__mocks (kody-pr-696-mock-cloudflare)

[coderabbitai]

🧹 Nitpick comments (1)

packages/worker/client/styles/style-primitives.ts (1)

231-237: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

wordBreak: 'break-all' is redundant and degrades non-URL text wrapping.

overflowWrap: 'anywhere' already handles long unbreakable strings (URLs) by breaking mid-word only when the content would overflow. Adding wordBreak: 'break-all' forces breaking at every character boundary regardless of available space, which causes mid-word breaks in multi-word values like scopes ("chat:write channels:read") even when breaking at spaces would suffice. Since detailValueCss is now shared across all detail values (URLs, scopes, timestamps, flow names), removing wordBreak improves wrapping for non-URL text without affecting URL behavior.

♻️ Proposed fix

 export const detailValueCss = {
 	display: 'block',
 	maxWidth: '100%',
 	minWidth: 0,
 	color: colors.text,
 	overflowWrap: 'anywhere',
 	whiteSpace: 'normal',
-	wordBreak: 'break-all',
 }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/worker/client/styles/style-primitives.ts` around lines 231 - 237,
Remove the wordBreak: 'break-all' declaration from detailValueCss, while
retaining overflowWrap: 'anywhere' so long unbreakable values still wrap without
forcing unnecessary mid-word breaks in scopes, timestamps, and other detail
values.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/worker/client/styles/style-primitives.ts`:
- Around line 231-237: Remove the wordBreak: 'break-all' declaration from
detailValueCss, while retaining overflowWrap: 'anywhere' so long unbreakable
values still wrap without forcing unnecessary mid-word breaks in scopes,
timestamps, and other detail values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9244dcef-6afd-46b4-a73f-da790ed07074

📥 Commits

Reviewing files that changed from the base of the PR and between 5fe4a1c and 45c41ba.

📒 Files selected for processing (3)

• packages/worker/client/routes/account-integrations.tsx
• packages/worker/client/routes/connect-oauth.tsx
• packages/worker/client/styles/style-primitives.ts