@livelayer/react 0.15.3 → 0.17.0

package/dist/styles.css

@@ -141,15 +141,28 @@
   pointer-events: auto;
 }
 
-/* Mobile: minimized + expanded ignore position, always full-width bottom. */
-.ll-widget--mobile.ll-widget--minimized,
-.ll-widget--mobile.ll-widget--expanded {
+/* Mobile minimized is the explicit "shrink to a bottom bar" state the
+   user picks via the minimize button. Honor that intent — full-width
+   72px dock anchored to the bottom. */
+.ll-widget--mobile.ll-widget--minimized {
   left: 0;
   right: 0;
   bottom: 0;
   top: auto;
 }
 
+/* Mobile expanded was previously also pinned edge-to-edge (100vw ×
+   80dvh). That made the idle widget cover ~60% of the phone screen
+   before the visitor had tapped anything — repeatedly reported as
+   "this is blocking the entire interface." Mobile expanded now uses
+   the same card shape as desktop, sized down to fit comfortably in a
+   phone viewport. The position prop (bottom-right by default) anchors
+   it via the rules in .ll-widget[data-position="..."] above. */
+.ll-widget--mobile.ll-widget--expanded {
+  /* Inherits left/right/top/bottom from the position-prop rules.
+     Nothing to override here. */
+}
+
 /* ── Embedded experience mode ──────────────────────────────────────
    When `experienceMode="EMBEDDED"`, the widget renders inline within
    the host container instead of as a fixed-position floating overlay.
@@ -576,12 +589,25 @@
 }
 
 .ll-expanded--mobile {
-  width: 100vw;
-  height: 80dvh;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+  /* Mobile expanded is a thumbnail PiP — 9:16 portrait, ~150px wide.
+     The visitor's website is the primary surface; the widget is a
+     persistent reachable affordance, not the focus. Sized so it fits
+     comfortably alongside content without blocking it.
+
+     Evolution:
+       v0:    100vw × 80dvh edge-to-edge sheet → blocked 60% of screen
+       v0.16: 380 × 540 card → marginally smaller, still ~90% of phone width
+       v0.17: 150 × 267 (9:16) thumbnail → properly out-of-the-way
+
+     The clamp lets the card scale slightly with viewport — tiny phones
+     (320px wide) get 140px, normal phones (393-430px) stay at the
+     150px sweet spot, larger phones / foldables (500px+) can grow to
+     180px. aspect-ratio derives height from width so the 9:16 portrait
+     framing stays exact regardless of where in the clamp range the
+     viewport lands. */
+  width: clamp(140px, 38vw, 180px);
+  aspect-ratio: 9 / 16;
+  border-radius: 16px;
 }
 
 /* ── Background layers ───────────────────────────────────────── */
@@ -1525,9 +1551,13 @@
 }
 
 .ll-expanded--mobile .ll-expanded__pip {
-  right: 10px;
-  width: 96px;
-  height: 72px;
+  /* Scaled down to fit the 0.17.0 mobile thumbnail card (~150px
+     wide). A 96px PiP in a 150px card would cover nearly the entire
+     surface during a call — defeats the point of the PiP. 48×36 is
+     readable as "your camera preview" at the card scale. */
+  right: 8px;
+  width: 48px;
+  height: 36px;
 }
 
 /* ── Error boundary fallback ─────────────────────────────────── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livelayer/react",
-  "version": "0.15.3",
+  "version": "0.17.0",
   "description": "LiveLayer agent widget for React — avatar video, team switching, responsive layouts, full-fidelity embed",
   "keywords": [
     "livelayer",