[riasvdv]

Summary

Classic (non-overlay) scrollbars took 15px from the layout only while content overflowed, so the content and details pane shifted when a scrollbar appeared.

 html
+  scrollbar-gutter: stable          # page scrollbar space always reserved
 <DetailsPanelContent>
-  <div class="… overflow-y-auto">
+  <div class="… overflow-y-auto [scrollbar-gutter:stable]">

.cp-details and the CP sidebar already reserve their gutter this way.

scripts/lint-tailwind-classes.mjs crashed on arbitrary-property candidates such as [scrollbar-gutter:stable], because they have no root. It now skips them.

Evidence

Chromium with classic 15px scrollbars, 1400×1300, entry edit page:

Measurement	Before: no overflow → overflow	After: no overflow → overflow
Details pane left edge	951px → 936px	936px → 936px
Main column width	724px → 709px	709px → 709px
Details panel field width	384px → 369px	369px → 369px

The login page, entry index and entry edit page do not scroll sideways.

vp check passes on the changed files. DetailsPanels.test.ts, ContentDetails.browser.test.ts and ScreenSkipLinks.browser.test.ts pass (32/32). composer ci passes.

Related issues

• [6.x]: Control panel: layout shift and nested scrollbars #20011

[github-actions]

📚 Storybook previews

@craftcms/ui — open Storybook

No changed components detected in this Storybook.

resources/js — open Storybook

No changed components detected in this Storybook.