@pocketping/widget 1.12.1 → 1.12.2

package/dist/index.cjs

@@ -221,25 +221,51 @@ function styles(options) {
     /* Mobile: fullscreen widget to prevent scroll issues */
     @media (max-width: 480px) {
       .pp-window {
-        position: fixed;
+        position: fixed !important;
+        /* No !important on top/bottom/height - controlled by JS for keyboard handling */
         top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: auto;
+        width: 100vw !important;
+        height: 100vh;
+        height: 100dvh;
+        max-width: 100vw !important;
+        max-height: 100vh;
         max-height: 100dvh;
-        min-height: 100%;
-        min-height: 100dvh;
-        border-radius: 0;
-        overflow: hidden;
-        touch-action: none; /* Prevent page scroll behind widget */
+        min-height: 0; /* Allow shrinking for keyboard */
+        border-radius: 0 !important;
+        overflow: hidden !important;
+        touch-action: manipulation; /* Allow scroll and touch, prevent double-tap zoom */
+        margin: 0 !important;
+        padding: 0 !important;
+        box-sizing: border-box !important;
       }
 
-      /* Prevent any horizontal scroll */
-      .pp-window * {
-        max-width: 100%;
+      /* Prevent any overflow */
+      .pp-window *,
+      .pp-window *::before,
+      .pp-window *::after {
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+      }
+
+      /* Ensure messages area scrolls properly */
+      .pp-messages {
+        max-width: 100vw !important;
+        min-height: 0 !important; /* Allow shrinking for scroll */
+        overflow-x: hidden !important;
+        overflow-y: auto !important;
+        touch-action: pan-y !important; /* Enable vertical scrolling */
+        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+      }
+
+      /* Allow touch on input area for typing */
+      .pp-input-form,
+      .pp-input,
+      .pp-send-btn,
+      .pp-attach-btn {
+        touch-action: manipulation !important;
       }
     }
 
@@ -250,6 +276,9 @@ function styles(options) {
       padding: 10px 16px;
       background: ${resolvedHeaderColor};
       color: white;
+      flex-shrink: 0; /* Never shrink - always visible */
+      position: relative;
+      z-index: 10; /* Stay above messages during any scroll issues */
     }
 
     .pp-header-info {
@@ -322,6 +351,7 @@ function styles(options) {
 
     .pp-messages {
       flex: 1;
+      min-height: 0; /* Critical: allows flex child to shrink and enable scrolling */
       overflow-y: auto;
       overflow-x: hidden;
       padding: 16px 12px;
@@ -348,6 +378,7 @@ function styles(options) {
       margin: 12px;
       border-radius: 8px;
       box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+      flex-shrink: 0;
     }
 
     .pp-date-separator {
@@ -355,6 +386,7 @@ function styles(options) {
       align-items: center;
       justify-content: center;
       margin: 12px 0;
+      flex-shrink: 0;
     }
 
     .pp-date-separator span {
@@ -377,6 +409,7 @@ function styles(options) {
       overflow: hidden; /* Prevent horizontal overflow */
       touch-action: pan-y; /* Only vertical scroll */
       max-width: 100%;
+      flex-shrink: 0; /* Never shrink - maintain natural size for scrolling */
     }
 
     .pp-swipe-left {
@@ -460,6 +493,7 @@ function styles(options) {
       display: block; /* Block for proper float behavior */
       will-change: transform;
       box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+      flex-shrink: 0; /* Never shrink - for typing indicator which is direct child */
     }
 
     .pp-message-visitor {
@@ -639,6 +673,7 @@ function styles(options) {
       gap: 8px;
       background: ${resolvedFooterColor};
       align-items: flex-end;
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-input {
@@ -711,6 +746,7 @@ function styles(options) {
       font-size: 10px;
       color: ${isDark ? "#8696a0" : "#667781"};
       background: ${resolvedFooterColor};
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-footer a {
@@ -2090,6 +2126,29 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       };
     }
   }, [isOpen]);
+  const [viewportStyle, setViewportStyle] = (0, import_hooks2.useState)(null);
+  (0, import_hooks2.useEffect)(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (!isOpen || !isMobile) {
+      setViewportStyle(null);
+      return;
+    }
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const handleViewportChange = () => {
+      setViewportStyle({
+        height: vv.height,
+        top: vv.offsetTop
+      });
+    };
+    handleViewportChange();
+    vv.addEventListener("resize", handleViewportChange);
+    vv.addEventListener("scroll", handleViewportChange);
+    return () => {
+      vv.removeEventListener("resize", handleViewportChange);
+      vv.removeEventListener("scroll", handleViewportChange);
+    };
+  }, [isOpen]);
   (0, import_hooks2.useEffect)(() => {
     if (!isOpen && messages.length > 0) {
       const unread = messages.filter(
@@ -2439,6 +2498,12 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       "div",
       {
         class: `pp-window pp-${position} pp-theme-${theme} ${isDragging ? "pp-dragging" : ""}`,
+        style: viewportStyle ? {
+          height: `${viewportStyle.height}px`,
+          maxHeight: `${viewportStyle.height}px`,
+          top: `${viewportStyle.top}px`,
+          bottom: "auto"
+        } : void 0,
         onDragEnter: handleDragEnter,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,

package/dist/index.js

@@ -180,25 +180,51 @@ function styles(options) {
     /* Mobile: fullscreen widget to prevent scroll issues */
     @media (max-width: 480px) {
       .pp-window {
-        position: fixed;
+        position: fixed !important;
+        /* No !important on top/bottom/height - controlled by JS for keyboard handling */
         top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: auto;
+        width: 100vw !important;
+        height: 100vh;
+        height: 100dvh;
+        max-width: 100vw !important;
+        max-height: 100vh;
         max-height: 100dvh;
-        min-height: 100%;
-        min-height: 100dvh;
-        border-radius: 0;
-        overflow: hidden;
-        touch-action: none; /* Prevent page scroll behind widget */
+        min-height: 0; /* Allow shrinking for keyboard */
+        border-radius: 0 !important;
+        overflow: hidden !important;
+        touch-action: manipulation; /* Allow scroll and touch, prevent double-tap zoom */
+        margin: 0 !important;
+        padding: 0 !important;
+        box-sizing: border-box !important;
       }
 
-      /* Prevent any horizontal scroll */
-      .pp-window * {
-        max-width: 100%;
+      /* Prevent any overflow */
+      .pp-window *,
+      .pp-window *::before,
+      .pp-window *::after {
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+      }
+
+      /* Ensure messages area scrolls properly */
+      .pp-messages {
+        max-width: 100vw !important;
+        min-height: 0 !important; /* Allow shrinking for scroll */
+        overflow-x: hidden !important;
+        overflow-y: auto !important;
+        touch-action: pan-y !important; /* Enable vertical scrolling */
+        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+      }
+
+      /* Allow touch on input area for typing */
+      .pp-input-form,
+      .pp-input,
+      .pp-send-btn,
+      .pp-attach-btn {
+        touch-action: manipulation !important;
       }
     }
 
@@ -209,6 +235,9 @@ function styles(options) {
       padding: 10px 16px;
       background: ${resolvedHeaderColor};
       color: white;
+      flex-shrink: 0; /* Never shrink - always visible */
+      position: relative;
+      z-index: 10; /* Stay above messages during any scroll issues */
     }
 
     .pp-header-info {
@@ -281,6 +310,7 @@ function styles(options) {
 
     .pp-messages {
       flex: 1;
+      min-height: 0; /* Critical: allows flex child to shrink and enable scrolling */
       overflow-y: auto;
       overflow-x: hidden;
       padding: 16px 12px;
@@ -307,6 +337,7 @@ function styles(options) {
       margin: 12px;
       border-radius: 8px;
       box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+      flex-shrink: 0;
     }
 
     .pp-date-separator {
@@ -314,6 +345,7 @@ function styles(options) {
       align-items: center;
       justify-content: center;
       margin: 12px 0;
+      flex-shrink: 0;
     }
 
     .pp-date-separator span {
@@ -336,6 +368,7 @@ function styles(options) {
       overflow: hidden; /* Prevent horizontal overflow */
       touch-action: pan-y; /* Only vertical scroll */
       max-width: 100%;
+      flex-shrink: 0; /* Never shrink - maintain natural size for scrolling */
     }
 
     .pp-swipe-left {
@@ -419,6 +452,7 @@ function styles(options) {
       display: block; /* Block for proper float behavior */
       will-change: transform;
       box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
+      flex-shrink: 0; /* Never shrink - for typing indicator which is direct child */
     }
 
     .pp-message-visitor {
@@ -598,6 +632,7 @@ function styles(options) {
       gap: 8px;
       background: ${resolvedFooterColor};
       align-items: flex-end;
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-input {
@@ -670,6 +705,7 @@ function styles(options) {
       font-size: 10px;
       color: ${isDark ? "#8696a0" : "#667781"};
       background: ${resolvedFooterColor};
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-footer a {
@@ -2049,6 +2085,29 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       };
     }
   }, [isOpen]);
+  const [viewportStyle, setViewportStyle] = useState2(null);
+  useEffect2(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (!isOpen || !isMobile) {
+      setViewportStyle(null);
+      return;
+    }
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const handleViewportChange = () => {
+      setViewportStyle({
+        height: vv.height,
+        top: vv.offsetTop
+      });
+    };
+    handleViewportChange();
+    vv.addEventListener("resize", handleViewportChange);
+    vv.addEventListener("scroll", handleViewportChange);
+    return () => {
+      vv.removeEventListener("resize", handleViewportChange);
+      vv.removeEventListener("scroll", handleViewportChange);
+    };
+  }, [isOpen]);
   useEffect2(() => {
     if (!isOpen && messages.length > 0) {
       const unread = messages.filter(
@@ -2398,6 +2457,12 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       "div",
       {
         class: `pp-window pp-${position} pp-theme-${theme} ${isDragging ? "pp-dragging" : ""}`,
+        style: viewportStyle ? {
+          height: `${viewportStyle.height}px`,
+          maxHeight: `${viewportStyle.height}px`,
+          top: `${viewportStyle.top}px`,
+          bottom: "auto"
+        } : void 0,
         onDragEnter: handleDragEnter,
         onDragOver: handleDragOver,
         onDragLeave: handleDragLeave,