Problem

On mobile viewports every settings shell renders a fixed 240px sidebar next to the content in a non-responsive flex row, leaving the content almost no width. The MCP Servers page is worst: its fixed-layout table cannot shrink, so the whole page collapses into a single cramped column.

Changes

• Sidebar component: full width below the lg breakpoint, w-60 at lg+.
• Six settings layouts (AI, Deployment, Organization, User, Workspace, Template) stack the nav above the content below lg and keep the previous side-by-side spacing at lg+. Content wrappers get min-w-0 so flex children cannot force overflow, and horizontal padding tightens on small screens.
• MCP servers table gets min-w-[640px] so the existing overflow-auto wrapper provides horizontal scrolling instead of colliding column headers.

Tailwind class changes only; no component or behavior changes.

Testing

• pnpm check and pnpm run lint:types pass.
• Dogfood UAT on a dev deployment: at 390x844 the MCP Servers, Deployment, Account, and Template settings pages stack nav-above-content with no horizontal body overflow and a scrollable MCP table; boundary verified stacked at 1023px and side-by-side at 1024px; at 1440x900 the layouts are pixel-identical to before (240px sidebar, 112px gap, 40px padding).

Closes CODAGT-828.

Created by Mux, an AI agent, on Mike's behalf.