@asksable/site-connector 0.6.13 → 0.6.15

package/dist/styles.css

@@ -2727,15 +2727,19 @@
 @media (max-width: 1024px) {
   /* Lock the frame to a single height across all steps so the widget
      doesn't bounce as the user moves between services / date / etc.
-     Sized to fit the tallest step (date + time) with a little
-     breathing room above and below. Body scrolls internally when a
-     step exceeds it. */
+     Host pages with their own header can set --bw-mobile-viewport-offset
+     so the header + booking frame fit inside the visible viewport. */
   .bw {
-    /* svh (small viewport height) doesn't jump when iOS Safari's URL
-       bar toggles, unlike vh which uses the largest possible height
-       and overflows when bars become visible. */
-    min-height: 82svh;
-    max-height: 82svh;
+    /* svh is the fallback for browsers without dvh support. */
+    min-height: max(0px, calc(100svh - var(--bw-mobile-viewport-offset, 0px)));
+    max-height: max(0px, calc(100svh - var(--bw-mobile-viewport-offset, 0px)));
+  }
+
+  @supports (height: 100dvh) {
+    .bw {
+      min-height: max(0px, calc(100dvh - var(--bw-mobile-viewport-offset, 0px)));
+      max-height: max(0px, calc(100dvh - var(--bw-mobile-viewport-offset, 0px)));
+    }
   }
 
   /* Lock header/footer in the column so they never shrink under
@@ -2750,6 +2754,8 @@
   }
 
   .bw-body {
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
@@ -2766,8 +2772,15 @@
   }
 
   .bw-placeholder {
-    min-height: 82svh;
-    max-height: 82svh;
+    min-height: max(0px, calc(100svh - var(--bw-mobile-viewport-offset, 0px)));
+    max-height: max(0px, calc(100svh - var(--bw-mobile-viewport-offset, 0px)));
+  }
+
+  @supports (height: 100dvh) {
+    .bw-placeholder {
+      min-height: max(0px, calc(100dvh - var(--bw-mobile-viewport-offset, 0px)));
+      max-height: max(0px, calc(100dvh - var(--bw-mobile-viewport-offset, 0px)));
+    }
   }
 
   .bw-placeholder-header {
@@ -3061,7 +3074,7 @@
        there's always real breathing room below the Confirm button.
        Host site MUST include `viewport-fit=cover` in its viewport
        meta for env(safe-area-inset-*) to be non-zero on iOS. */
-    margin-top: 16px;
+    margin-top: auto;
     padding: 16px 24px max(24px, calc(env(safe-area-inset-bottom) + 16px));
     border-top: 1px solid var(--bw-border-light);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asksable/site-connector",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "private": false,
   "type": "module",
   "sideEffects": [