From 67387ad4c6bc3cb1beb59f0fcf6a90108302f27f Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Sat, 28 Feb 2026 12:22:50 +0000 Subject: [PATCH] fix(site): prevent layout shift when opening dropdowns on /agents page The agents page opts out of the global scrollbar-gutter: stable because it uses internal scroll containers and the reserved gutter wastes space. However, simply setting scrollbar-gutter: auto broke the global body[data-scroll-locked] CSS fix in index.css, which assumes stable gutter is always active. When a Radix dropdown opened, two things caused layout shift: 1. react-remove-scroll-bar measures gap = window.innerWidth - document.documentElement.clientWidth. With scrollbar-gutter: stable the gutter is reserved even without overflow, so gap > 0 and the library injects padding-right/margin-right on html/body. 2. The global CSS rule `html body[data-scroll-locked] { overflow-y: scroll !important }` forces a scrollbar onto body when Radix locks scroll, creating a scrollbar that never existed on this page. Fix with a single useEffect that: - Sets overflow:hidden on both and so neither can produce a scrollbar. - Sets scrollbar-gutter:auto on so the browser stops reserving gutter space, making the react-remove-scroll-bar gap measurement 0. - Injects a