From f18c664be2a2f5211d0437f0c395b2cd48bf028e Mon Sep 17 00:00:00 2001 From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com> Date: Mon, 20 Jul 2026 19:35:23 +0200 Subject: [PATCH] fix(site): stack settings layouts on mobile (#27334) ## 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. --- site/src/components/Sidebar/Sidebar.tsx | 6 +++++- site/src/modules/management/DeploymentSettingsLayout.tsx | 6 +++--- site/src/modules/management/OrganizationSidebarLayout.tsx | 6 +++--- site/src/pages/AISettingsPage/AISettingsLayout.tsx | 6 +++--- .../AISettingsPage/MCPServersPage/MCPServersPageView.tsx | 2 +- .../pages/TemplateSettingsPage/TemplateSettingsLayout.tsx | 6 +++--- site/src/pages/UserSettingsPage/Layout.tsx | 6 +++--- .../pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx | 6 +++--- 8 files changed, 24 insertions(+), 20 deletions(-) diff --git a/site/src/components/Sidebar/Sidebar.tsx b/site/src/components/Sidebar/Sidebar.tsx index f95098792d..e8e89d6d73 100644 --- a/site/src/components/Sidebar/Sidebar.tsx +++ b/site/src/components/Sidebar/Sidebar.tsx @@ -8,7 +8,11 @@ interface SidebarProps { } export const Sidebar: FC = ({ className, children }) => { - return ; + return ( + + ); }; interface SidebarHeaderProps { diff --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.tsx index 6a16f2eda7..6a97f752cd 100644 --- a/site/src/modules/management/DeploymentSettingsLayout.tsx +++ b/site/src/modules/management/DeploymentSettingsLayout.tsx @@ -51,10 +51,10 @@ const DeploymentSettingsLayout: FC = () => {
-
-
+
+
-
+
}> diff --git a/site/src/modules/management/OrganizationSidebarLayout.tsx b/site/src/modules/management/OrganizationSidebarLayout.tsx index 447046bfae..abaee4227a 100644 --- a/site/src/modules/management/OrganizationSidebarLayout.tsx +++ b/site/src/modules/management/OrganizationSidebarLayout.tsx @@ -5,10 +5,10 @@ import { OrganizationSidebar } from "./OrganizationSidebar"; const OrganizationSidebarLayout: FC = () => { return ( -
-
+
+
-
+
}> diff --git a/site/src/pages/AISettingsPage/AISettingsLayout.tsx b/site/src/pages/AISettingsPage/AISettingsLayout.tsx index 8a44e10352..bb523820ec 100644 --- a/site/src/pages/AISettingsPage/AISettingsLayout.tsx +++ b/site/src/pages/AISettingsPage/AISettingsLayout.tsx @@ -5,10 +5,10 @@ import { AISettingsSidebar } from "#/modules/management/AISettingsSidebar"; const AISettingsLayout = () => { return ( -
-
+
+
-
+
}> diff --git a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx index f92fb33538..e64cea7302 100644 --- a/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx +++ b/site/src/pages/AISettingsPage/MCPServersPage/MCPServersPageView.tsx @@ -55,7 +55,7 @@ const MCPServersPageView: FC = ({
)} - +
Name diff --git a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx index 9de61b416c..8cce82d23b 100644 --- a/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx +++ b/site/src/pages/TemplateSettingsPage/TemplateSettingsLayout.tsx @@ -52,8 +52,8 @@ export const TemplateSettingsLayout: FC = () => { <> {pageTitle(templateName, "Settings")} - -
+ +
{templateQuery.isError || permissionsQuery.isError ? ( ) : ( @@ -65,7 +65,7 @@ export const TemplateSettingsLayout: FC = () => { > }> -
+
diff --git a/site/src/pages/UserSettingsPage/Layout.tsx b/site/src/pages/UserSettingsPage/Layout.tsx index 86c0dfb291..5146207f8f 100644 --- a/site/src/pages/UserSettingsPage/Layout.tsx +++ b/site/src/pages/UserSettingsPage/Layout.tsx @@ -29,10 +29,10 @@ const Layout: FC = () => {
-
-
+
+
-
+
}> diff --git a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx index 6a03e0b71c..31d351e475 100644 --- a/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx +++ b/site/src/pages/WorkspaceSettingsPage/WorkspaceSettingsLayout.tsx @@ -35,8 +35,8 @@ export const WorkspaceSettingsLayout: FC = () => { <> {pageTitle(workspaceName, "Settings")} - -
+ +
{error ? ( ) : ( @@ -50,7 +50,7 @@ export const WorkspaceSettingsLayout: FC = () => { > }> -
+