@classic-homes/theme-svelte 1.15.0 → 1.15.1

package/dist/__tests__/data-panel-viewport.test.js

@@ -0,0 +1,45 @@
+/**
+ * DataPanel card sizing uses the layout viewport, not window.innerWidth.
+ *
+ * innerWidth includes a vertical scrollbar; the layout width does not. With
+ * a 15px scrollbar the card used to be 16px from the left edge and 1px from
+ * the right, because both its width and its centred offset came from the
+ * wider number.
+ */
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { mount, unmount, flushSync, createRawSnippet } from 'svelte';
+import DataPanel from '../lib/components/DataPanel.svelte';
+const children = createRawSnippet(() => ({ render: () => '<p>Legend</p>' }));
+let instance = null;
+afterEach(() => {
+    if (instance)
+        unmount(instance);
+    instance = null;
+    vi.restoreAllMocks();
+});
+describe('DataPanel card viewport width', () => {
+    it('insets the card equally when a scrollbar makes innerWidth wider than the layout', () => {
+        // 390px window with a 15px vertical scrollbar: 375px of layout
+        vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(390);
+        vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(375);
+        const host = document.createElement('div');
+        document.body.appendChild(host);
+        instance = mount(DataPanel, {
+            target: host,
+            props: {
+                title: 'Legend & Information',
+                variant: 'card',
+                expanded: false,
+                disableClose: true,
+                mobileBreakpoint: 768,
+                cardConfig: { maxWidth: 480, horizontalMargin: 16 },
+                children,
+            },
+        });
+        flushSync();
+        const panel = host.querySelector('[role="dialog"]');
+        expect(panel.style.left).toBe('16px');
+        // 375 - 2 * 16, so the right margin is 16px too
+        expect(panel.style.width).toBe('343px');
+    });
+});

package/dist/lib/components/DataPanel.svelte

@@ -244,8 +244,19 @@
   // Panel element ref
   let panelRef = $state<HTMLDivElement | null>(null);
 
+  /**
+   * Layout viewport width. Not layoutViewportWidth(): that includes a vertical
+   * scrollbar, and the card sheet's width and centred left offset are
+   * computed from this number, so with a scrollbar showing (a desktop
+   * browser at phone width, device toolbars) the card came out 16px from the
+   * left edge and a scrollbar's width short of the right one.
+   */
+  function layoutViewportWidth(): number {
+    return document.documentElement.clientWidth;
+  }
+
   // Viewport dimensions
-  let viewportWidth = $state(typeof window !== 'undefined' ? window.innerWidth : 1024);
+  let viewportWidth = $state(typeof document !== 'undefined' ? layoutViewportWidth() : 1024);
   let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 768);
 
   // Detect mobile
@@ -311,7 +322,7 @@
   // Initialize from persistence on mount
   onMount(() => {
     // Update viewport dimensions
-    viewportWidth = window.innerWidth;
+    viewportWidth = layoutViewportWidth();
     viewportHeight = window.innerHeight;
 
     // Initialize card expanded height
@@ -319,7 +330,7 @@
 
     // Listen for resize
     const handleResize = () => {
-      viewportWidth = window.innerWidth;
+      viewportWidth = layoutViewportWidth();
       viewportHeight = window.innerHeight;
       cardExpandedHeight = viewportHeight * resolvedCardConfig.expandedRatio;
     };
@@ -348,7 +359,7 @@
       ) {
         detachedPosition = getInitialDetachedPosition(
           detachedSize,
-          window.innerWidth,
+          layoutViewportWidth(),
           window.innerHeight
         );
       }
@@ -465,7 +476,7 @@
     const snap = detectEdgeSnap(
       newPosition,
       detachedSize,
-      window.innerWidth,
+      layoutViewportWidth(),
       window.innerHeight,
       snapThreshold
     );
@@ -476,7 +487,7 @@
     detachedPosition = constrainPosition(
       newPosition,
       detachedSize,
-      window.innerWidth,
+      layoutViewportWidth(),
       window.innerHeight
     );
   }
@@ -517,7 +528,7 @@
         pinnedSize,
         detachedSize,
         edge,
-        window.innerWidth,
+        layoutViewportWidth(),
         window.innerHeight
       );
 
@@ -708,7 +719,7 @@
         result.position,
         result.size,
         resolvedConstraints,
-        window.innerWidth,
+        layoutViewportWidth(),
         window.innerHeight,
         resizeHandle
       );
@@ -725,7 +736,7 @@
       const newSize = resizeSizeStart.width + delta * direction;
 
       if (isHorizontalEdge(edge)) {
-        pinnedSize = constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth);
+        pinnedSize = constrainPinnedWidth(newSize, resolvedConstraints, layoutViewportWidth());
       } else {
         pinnedSize = constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
       }
@@ -791,7 +802,7 @@
           candidatePosition,
           { width, height },
           resolvedConstraints,
-          window.innerWidth,
+          layoutViewportWidth(),
           window.innerHeight,
           handle
         );
@@ -829,7 +840,7 @@
       if (handled) {
         e.preventDefault();
         pinnedSize = horizontal
-          ? constrainPinnedWidth(newSize, resolvedConstraints, window.innerWidth)
+          ? constrainPinnedWidth(newSize, resolvedConstraints, layoutViewportWidth())
           : constrainPinnedHeight(newSize, resolvedConstraints, window.innerHeight);
         debouncedSave();
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",