diff --git a/site/src/pages/AgentsPage/AgentsPage.tsx b/site/src/pages/AgentsPage/AgentsPage.tsx index 370932287c2..be69ad9df1b 100644 --- a/site/src/pages/AgentsPage/AgentsPage.tsx +++ b/site/src/pages/AgentsPage/AgentsPage.tsx @@ -107,15 +107,45 @@ const AgentsPage: FC = () => { const canSetSystemPrompt = isAgentsAdmin; // The global CSS sets scrollbar-gutter: stable on to prevent - // layout shift on pages that toggle scrollbars. The agents page uses - // its own internal scroll containers so the reserved gutter space is - // unnecessary and wastes horizontal room. + // layout shift on pages that toggle scrollbars. The agents page + // uses its own internal scroll containers so the reserved gutter + // space is unnecessary and wastes horizontal room. + // + // Removing the gutter requires three things: + // + // 1. overflow:hidden on both and so neither element + // can produce a scrollbar. + // 2. scrollbar-gutter:auto on so the browser stops + // reserving space for a scrollbar that will never appear. + // This is what makes react-remove-scroll-bar measure a gap of + // 0 when a Radix dropdown opens, so it injects no padding or + // margin compensation. + // 3. An injected