@arcote.tech/arc-ds 0.7.27 → 0.7.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.7.27",
+  "version": "0.7.29",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -30,7 +30,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.27",
+    "@arcote.tech/arc": "^0.7.29",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/layout/layout.tsx

@@ -310,6 +310,8 @@ function MobileToolbar() {
   const toolbarRef = useRef<HTMLDivElement>(null);
   const collapseRef = useRef(collapse);
   collapseRef.current = collapse;
+  const isExpandedRef = useRef(isExpanded);
+  isExpandedRef.current = isExpanded;
 
   useEffect(() => {
     if (isExpanded) {
@@ -319,10 +321,27 @@ function MobileToolbar() {
     }
   }, [isExpanded, requestOverlay, releaseOverlay]);
 
+  // Blokada scrolla treści pod spodem gdy panel jest rozwinięty — panel nakłada
+  // się na stronę (overlay), więc scroll strony musi być zamrożony na miejscu.
+  useEffect(() => {
+    if (!isExpanded) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isExpanded]);
+
   useEffect(() => {
     const el = toolbarRef.current;
     if (!el) return;
-    const update = () => setTopHeight(el.offsetHeight);
+    // Mierzymy tylko wysokość ZWINIĘTEGO paska. Gdy panel jest rozwinięty,
+    // ignorujemy zmiany rozmiaru — rozwinięty panel ma się nakładać na treść,
+    // a nie wypychać jej w dół rosnącym spacerem.
+    const update = () => {
+      if (isExpandedRef.current) return;
+      setTopHeight(el.offsetHeight);
+    };
     update();
     const ro = new ResizeObserver(update);
     ro.observe(el);