@sovereignfs/ui 0.21.2 → 0.21.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/Dialog.module.css +8 -4
  2. package/dist/index.js +2 -2
  3. package/package.json +1 -1
  4. package/src/components/Dialog/Dialog.module.css +8 -4
  5. package/src/scroll-lock.ts +8 -2
package/dist/Dialog.module.css CHANGED
@@ -48,11 +48,15 @@
48
48
  .content {
49
49
  flex: 1 1 auto;
50
50
  overflow-y: auto;
51
+ overflow-x: hidden;
51
52
  padding: var(--sv-space-6);
52
- /* Prevent iOS scroll-chaining: when the dialog content reaches its top/bottom
53
- boundary, stop the gesture from propagating to the document (which would
54
- scroll the shell header and footer out of view in standalone PWA mode). */
55
- overscroll-behavior: contain;
53
+ /* Disable elastic overscroll within the dialog: `none` stops both scroll-
54
+ chaining to the parent and the iOS rubber-band bounce inside the panel.
55
+ `contain` only prevents chaining — the panel itself still bounces, which
56
+ reveals white panel-background between the mobileBar and the sticky tab
57
+ strip on iOS PWA. A dialog is a bounded surface where bounce is a visual
58
+ bug, not a feature. */
59
+ overscroll-behavior: none;
56
60
  }
57
61
 
58
62
  /* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus
package/dist/index.js CHANGED
@@ -910,12 +910,12 @@ import { useEffect as useEffect2, useRef as useRef2 } from "react";
910
910
  function lockBodyScroll() {
911
911
  const count = parseInt(document.body.dataset.scrollLocks ?? "0", 10);
912
912
  document.body.dataset.scrollLocks = String(count + 1);
913
- if (count === 0) document.body.style.overflow = "hidden";
913
+ if (count === 0) document.body.style.overflowY = "hidden";
914
914
  }
915
915
  function unlockBodyScroll() {
916
916
  const next = Math.max(0, parseInt(document.body.dataset.scrollLocks ?? "0", 10) - 1);
917
917
  document.body.dataset.scrollLocks = String(next);
918
- if (next === 0) document.body.style.overflow = "";
918
+ if (next === 0) document.body.style.overflowY = "";
919
919
  }
920
920
 
921
921
  // src/components/Dialog/Dialog.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sovereignfs/ui",
3
- "version": "0.21.2",
3
+ "version": "0.21.3",
4
4
  "type": "module",
5
5
  "description": "Sovereign Design System — design tokens and React components.",
6
6
  "keywords": [
package/src/components/Dialog/Dialog.module.css CHANGED
@@ -48,11 +48,15 @@
48
48
  .content {
49
49
  flex: 1 1 auto;
50
50
  overflow-y: auto;
51
+ overflow-x: hidden;
51
52
  padding: var(--sv-space-6);
52
- /* Prevent iOS scroll-chaining: when the dialog content reaches its top/bottom
53
- boundary, stop the gesture from propagating to the document (which would
54
- scroll the shell header and footer out of view in standalone PWA mode). */
55
- overscroll-behavior: contain;
53
+ /* Disable elastic overscroll within the dialog: `none` stops both scroll-
54
+ chaining to the parent and the iOS rubber-band bounce inside the panel.
55
+ `contain` only prevents chaining — the panel itself still bounces, which
56
+ reveals white panel-background between the mobileBar and the sticky tab
57
+ strip on iOS PWA. A dialog is a bounded surface where bounce is a visual
58
+ bug, not a feature. */
59
+ overscroll-behavior: none;
56
60
  }
57
61
 
58
62
  /* Fixed sizes. `max-*: 100%` caps to the scrim's content box (viewport minus
package/src/scroll-lock.ts CHANGED
@@ -2,15 +2,21 @@
2
2
  // open simultaneously; the body stays locked until all of them close.
3
3
  // Uses data-scroll-locks on <body> as a counter so concurrent callers
4
4
  // don't clobber each other's lock state.
5
+ //
6
+ // Only locks overflow-y (not the shorthand overflow) so the stylesheet's
7
+ // overflow-x: hidden on html,body is never overridden. On Android, clearing
8
+ // the overflow shorthand causes a brief frame where overflow-x is also
9
+ // unlocked — content wider than the viewport can paint and the home screen
10
+ // appears to "blow out" after the overlay closes.
5
11
 
6
12
  export function lockBodyScroll(): void {
7
13
  const count = parseInt(document.body.dataset.scrollLocks ?? '0', 10);
8
14
  document.body.dataset.scrollLocks = String(count + 1);
9
- if (count === 0) document.body.style.overflow = 'hidden';
15
+ if (count === 0) document.body.style.overflowY = 'hidden';
10
16
  }
11
17
 
12
18
  export function unlockBodyScroll(): void {
13
19
  const next = Math.max(0, parseInt(document.body.dataset.scrollLocks ?? '0', 10) - 1);
14
20
  document.body.dataset.scrollLocks = String(next);
15
- if (next === 0) document.body.style.overflow = '';
21
+ if (next === 0) document.body.style.overflowY = '';
16
22
  }