fix(frontend): fit the AI providers page on phones

[vedtod07]

Summary

On a phone, Settings → AI providers spent 128px of a 390px screen on px-16 gutters. The title rendered as "AI provid…", "Provider setup" sat beside the description and squeezed it to about 125px, and the provider table used w-full table-fixed so columns compressed instead of scrolling.

pageGutterClass now uses px-4 lg:px-16, the same collapse the sessions screen already uses. Desktop gutters stay 64px from lg up. The settings header stacks the docs link under the description below lg. The table keeps a minWidth of the declared columns so Credential, Active models, and Created are reachable by swiping.

Fixes #6206.

Testing

Verified locally

Prettier on the touched files. Could not run package vitest here (no web/node_modules in this sparse checkout).

Added or updated tests

• pageWidth.test.ts: gutters are px-4 below lg and lg:px-16 from there, with no bare px-16.
• dataTableColumnWidths.test.ts: when the container is narrower than the columns, tableMinWidth stays at the declared total so overflow-x can scroll.

QA follow-up

#6206 asks for real phones, both engines, not DevTools:

• Chrome on Android and Safari on iOS: /m → Settings → AI providers. Title reads "AI providers" in full. Swipe the table to reach Credential, Active models, and Created.
• Add provider is full width and tappable. The add-provider drawer still works at phone width.
• Other settings tabs still look right (shared shell gutters).
• Desktop Settings → AI providers at a normal width: 64px gutters and title unchanged.

Demo

Layout mock of the 390px page. Real-phone screenshots still belong in QA as requested on #6206.

Checklist

• I have included a video or screen recording for UI changes, or marked Demo as N/A
• Relevant tests pass locally
• Relevant linting and formatting pass locally
• I have signed the CLA, or I will sign it when the bot prompts me

[vercel]

@vedtod07 is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✅ Thanks @vedtod07! This PR now meets the contribution requirements and has been reopened. A maintainer will review it soon.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 4d5af8cb-7ee0-4641-a2d7-f9f11ba8905d

📥 Commits

Reviewing files that changed from the base of the PR and between a09a0f0 and ee2acf3.

⛔ Files ignored due to path filters (1)

• .github/pr-assets/6206-ai-providers-phone.png is excluded by !**/*.png

📒 Files selected for processing (5)

• web/packages/agenta-settings-ui/src/SettingsPageShell.tsx
• web/packages/agenta-ui/src/components/pageWidth.ts
• web/packages/agenta-ui/src/components/ui/data-table.tsx
• web/packages/agenta-ui/tests/unit/dataTableColumnWidths.test.ts
• web/packages/agenta-ui/tests/unit/pageWidth.test.ts

Disabled knowledge base sources:

• Linear integration is disabled

You can enable these sources in your CodeRabbit configuration.

---

📝 Walkthrough

Summary by CodeRabbit

• Improvements
  • Improved responsive settings page layouts on smaller screens.
  • Preserved content and table minimum widths to prevent unwanted compression.
  • Enabled horizontal scrolling for wide tables when needed.
  • Reduced side padding on narrow screens while retaining wider spacing on large displays.
  • Kept the settings header visible while improving title, description, and documentation link stacking.

Walkthrough

The changes improve narrow-screen layout behavior for settings pages and data tables. Page gutters collapse below lg, settings content preserves minimum widths, and tables retain declared column widths for horizontal scrolling. Unit tests cover both responsive gutter classes and table width calculation.

Changes

Responsive layout and table sizing

Layer / File(s)	Summary
Responsive page layout web/packages/agenta-ui/src/components/pageWidth.ts, web/packages/agenta-settings-ui/src/SettingsPageShell.tsx, web/packages/agenta-ui/tests/unit/pageWidth.test.ts	Page gutters use px-4 below lg and lg:px-16 at larger widths. Settings containers preserve minimum widths, and the header content stacks below lg.
Table minimum width web/packages/agenta-ui/src/components/ui/data-table.tsx, web/packages/agenta-ui/tests/unit/dataTableColumnWidths.test.ts	tableMinWidth calculates column widths plus the actions gutter. The table applies this value as its inline minWidth.

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

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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