@shival99/z-ui 2.3.2 → 2.3.4

package/assets/css/overlay.css

@@ -20,12 +20,17 @@
     pointer-events: none;
   }
 
-  /* Bare global overlays (z-dynamic) own the viewport scroll when their content is taller than it. */
+  /* Global panels own their scrolling; the overlay host must not create a second viewport. */
   .z-overlay-host.z-overlay-global {
-    overflow: auto;
+    overflow: hidden;
     overscroll-behavior: contain;
   }
 
+  /* Free-form dynamic overlays opt into viewport scrolling explicitly. */
+  .z-overlay-host.z-overlay-global.z-overlay-scrollable {
+    overflow: auto;
+  }
+
   .z-overlay-host::backdrop {
     display: none; /* dùng div backdrop riêng (.z-overlay-backdrop) để giữ nguyên animation cũ */
   }
@@ -72,12 +77,6 @@
     }
   }
 
-  /* Khoá scroll trang nhưng giữ nguyên document flow để overlay không bị layout shift. */
-  html.z-scroll-locked {
-    overflow: hidden;
-    scrollbar-gutter: stable;
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .z-overlay-pane,
     .z-overlay-backdrop {
@@ -85,3 +84,24 @@
     }
   }
 }
+
+/*
+ * Khoá scroll trang. Phải nằm NGOÀI `@layer base` để thắng rule `html { ... }` mà app khai báo
+ * không-layer (rule trong layer luôn thua rule không-layer, bất kể specificity).
+ */
+html.z-scroll-locked {
+  overflow: hidden;
+}
+
+/*
+ * `overflow: hidden` làm scrollbar biến mất và nhả lại đúng chiều rộng của nó -> toàn bộ UI (kể cả
+ * element `position: fixed`) nở ra rồi co lại khi đóng overlay. `scrollbar-gutter: stable` giữ nguyên
+ * chỗ đó nên không có gì dịch chuyển. ZScrollLockService chỉ gắn class này khi trang vốn đã dành chỗ
+ * cho scrollbar — trang không có scrollbar (hoặc scrollbar dạng overlay) mà giữ gutter thì lại co vào.
+ * Trình duyệt không hỗ trợ `scrollbar-gutter`: service đo hiệu số thật rồi bù `padding-right` vào body
+ * và ghi ra `--z-scroll-lock-gutter` (0px khi không nhả) để app tự bù cho element fixed của mình:
+ * `.my-fixed-bar { padding-right: var(--z-scroll-lock-gutter, 0px); }`
+ */
+html.z-scroll-locked.z-scroll-locked-gutter {
+  scrollbar-gutter: stable;
+}