From a8347080807d85cc8e0ace1ce3ee0d76056c4f8f Mon Sep 17 00:00:00 2001
From: Grug <acrylic_sons.1q@icloud.com>
Date: Fri, 23 Oct 2026 14:52:09 +0800
Subject: [PATCH] Lock page scroll while a modal dialog is open (#214)

Pure CSS: html:has(<dialog>:modal) gets overflow: hidden. A scroll
timeline sets scrollbar-gutter: stable only when the page can scroll,
so the layout doesn't shift.

Co-authored-by: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
---
 CHANGELOG.md                  |  1 +
 src/css/components/dialog.css | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b6b5d7..fc22b46 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Prevented Escape from dismissing an enclosing dialog while closing an open Combobox popup.
 - Fixed long Tooltip text clipping instead of showing an ellipsis across all style packs.
+- Locked page scroll while a modal Dialog, Alert Dialog, Command Dialog or Drawer is open.
 
 ## [1.0.2] - 2026-07-06
 
diff --git a/src/css/components/dialog.css b/src/css/components/dialog.css
index 2248b1e..a2f6cac 100644
--- a/src/css/components/dialog.css
+++ b/src/css/components/dialog.css
@@ -1,5 +1,19 @@
 /* Dialog */
+@keyframes dialog-scroll-lock {
+  from, to {
+    scrollbar-gutter: stable;
+  }
+}
+
 @layer components {
+  /* Lock page scroll while a modal dialog is open. The scroll timeline only
+     reserves the scrollbar gutter if the page can scroll, so nothing shifts. */
+  html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
+    overflow: hidden;
+    animation: dialog-scroll-lock linear both;
+    animation-timeline: scroll(self);
+  }
+
   .dialog,
   .alert-dialog {
     @apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;