@pocketping/widget 1.12.0 → 1.12.2

package/dist/index.cjs

@@ -218,24 +218,54 @@ function styles(options) {
       left: 20px;
     }
 
+    /* Mobile: fullscreen widget to prevent scroll issues */
     @media (max-width: 480px) {
       .pp-window {
-        width: calc(100vw - 20px);
-        height: auto;
-        min-height: 300px;
-        max-height: calc(100vh - 40px);
-        max-height: calc(100svh - 40px); /* svh = small viewport, excludes keyboard */
-        bottom: 10px;
-        right: 10px;
-        left: 10px;
-        border-radius: 12px;
+        position: fixed !important;
+        /* No !important on top/bottom/height - controlled by JS for keyboard handling */
+        top: 0;
+        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: 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;
       }
 
-      /* When keyboard is likely open (input focused), reduce height */
-      .pp-window:has(.pp-input:focus) {
-        max-height: calc(50vh - 20px);
-        max-height: calc(50svh - 20px);
-        bottom: 10px;
+      /* 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;
       }
     }
 
@@ -246,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 {
@@ -318,7 +351,9 @@ 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;
       display: flex;
       flex-direction: column;
@@ -330,6 +365,7 @@ function styles(options) {
       background-image: ${chatBgImage};
       background-size: ${chatBgSize};
       background-position: center;
+      touch-action: pan-y; /* Only allow vertical scrolling */
     }
 
     .pp-welcome {
@@ -342,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 {
@@ -349,6 +386,7 @@ function styles(options) {
       align-items: center;
       justify-content: center;
       margin: 12px 0;
+      flex-shrink: 0;
     }
 
     .pp-date-separator span {
@@ -368,8 +406,10 @@ function styles(options) {
       position: relative;
       display: flex;
       align-items: stretch;
-      overflow: visible;
-      touch-action: pan-y;
+      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 {
@@ -453,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 {
@@ -504,11 +545,14 @@ function styles(options) {
     }
 
     /* Add spacing between different senders */
-    .pp-message-visitor + .pp-message-operator,
-    .pp-message-visitor + .pp-message-ai,
-    .pp-message-operator + .pp-message-visitor,
-    .pp-message-ai + .pp-message-visitor {
-      margin-top: 8px;
+    .pp-message-swipe-container + .pp-message-swipe-container {
+      margin-top: 4px;
+    }
+
+    /* More spacing when sender changes (visitor <-> operator/ai) */
+    .pp-swipe-left + .pp-swipe-right,
+    .pp-swipe-right + .pp-swipe-left {
+      margin-top: 16px;
     }
 
     .pp-message-content {
@@ -629,6 +673,7 @@ function styles(options) {
       gap: 8px;
       background: ${resolvedFooterColor};
       align-items: flex-end;
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-input {
@@ -701,6 +746,7 @@ function styles(options) {
       font-size: 10px;
       color: ${isDark ? "#8696a0" : "#667781"};
       background: ${resolvedFooterColor};
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-footer a {
@@ -2051,6 +2097,58 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setUnreadCount(0);
     }
   }, [isOpen]);
+  (0, import_hooks2.useEffect)(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (isOpen && isMobile) {
+      const scrollY = window.scrollY;
+      const originalStyles = {
+        overflow: document.body.style.overflow,
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left,
+        right: document.body.style.right,
+        width: document.body.style.width
+      };
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      document.body.style.width = "100%";
+      return () => {
+        document.body.style.overflow = originalStyles.overflow;
+        document.body.style.position = originalStyles.position;
+        document.body.style.top = originalStyles.top;
+        document.body.style.left = originalStyles.left;
+        document.body.style.right = originalStyles.right;
+        document.body.style.width = originalStyles.width;
+        window.scrollTo(0, scrollY);
+      };
+    }
+  }, [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(
@@ -2249,9 +2347,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     const touch = e.touches[0];
     const deltaX = touch.clientX - touchStartRef.current.x;
     const deltaY = touch.clientY - touchStartRef.current.y;
-    if (Math.abs(deltaY) > Math.abs(deltaX)) return;
+    if (Math.abs(deltaY) > 10 || Math.abs(deltaX) < 15) {
+      if (swipedMessageId === message.id && swipeOffset !== 0) {
+        setSwipeOffset(0);
+        setSwipedMessageId(null);
+      }
+      return;
+    }
+    e.preventDefault();
     if (deltaX < 0) {
-      const offset = Math.max(deltaX, -100);
+      const offset = Math.max(deltaX, -80);
       setSwipeOffset(offset);
       setSwipedMessageId(message.id);
     }
@@ -2393,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

@@ -177,24 +177,54 @@ function styles(options) {
       left: 20px;
     }
 
+    /* Mobile: fullscreen widget to prevent scroll issues */
     @media (max-width: 480px) {
       .pp-window {
-        width: calc(100vw - 20px);
-        height: auto;
-        min-height: 300px;
-        max-height: calc(100vh - 40px);
-        max-height: calc(100svh - 40px); /* svh = small viewport, excludes keyboard */
-        bottom: 10px;
-        right: 10px;
-        left: 10px;
-        border-radius: 12px;
+        position: fixed !important;
+        /* No !important on top/bottom/height - controlled by JS for keyboard handling */
+        top: 0;
+        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: 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;
       }
 
-      /* When keyboard is likely open (input focused), reduce height */
-      .pp-window:has(.pp-input:focus) {
-        max-height: calc(50vh - 20px);
-        max-height: calc(50svh - 20px);
-        bottom: 10px;
+      /* 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;
       }
     }
 
@@ -205,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 {
@@ -277,7 +310,9 @@ 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;
       display: flex;
       flex-direction: column;
@@ -289,6 +324,7 @@ function styles(options) {
       background-image: ${chatBgImage};
       background-size: ${chatBgSize};
       background-position: center;
+      touch-action: pan-y; /* Only allow vertical scrolling */
     }
 
     .pp-welcome {
@@ -301,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 {
@@ -308,6 +345,7 @@ function styles(options) {
       align-items: center;
       justify-content: center;
       margin: 12px 0;
+      flex-shrink: 0;
     }
 
     .pp-date-separator span {
@@ -327,8 +365,10 @@ function styles(options) {
       position: relative;
       display: flex;
       align-items: stretch;
-      overflow: visible;
-      touch-action: pan-y;
+      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 {
@@ -412,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 {
@@ -463,11 +504,14 @@ function styles(options) {
     }
 
     /* Add spacing between different senders */
-    .pp-message-visitor + .pp-message-operator,
-    .pp-message-visitor + .pp-message-ai,
-    .pp-message-operator + .pp-message-visitor,
-    .pp-message-ai + .pp-message-visitor {
-      margin-top: 8px;
+    .pp-message-swipe-container + .pp-message-swipe-container {
+      margin-top: 4px;
+    }
+
+    /* More spacing when sender changes (visitor <-> operator/ai) */
+    .pp-swipe-left + .pp-swipe-right,
+    .pp-swipe-right + .pp-swipe-left {
+      margin-top: 16px;
     }
 
     .pp-message-content {
@@ -588,6 +632,7 @@ function styles(options) {
       gap: 8px;
       background: ${resolvedFooterColor};
       align-items: flex-end;
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-input {
@@ -660,6 +705,7 @@ function styles(options) {
       font-size: 10px;
       color: ${isDark ? "#8696a0" : "#667781"};
       background: ${resolvedFooterColor};
+      flex-shrink: 0; /* Never shrink */
     }
 
     .pp-footer a {
@@ -2010,6 +2056,58 @@ function ChatWidget({ client: client2, config: initialConfig }) {
       setUnreadCount(0);
     }
   }, [isOpen]);
+  useEffect2(() => {
+    const isMobile = window.innerWidth <= 480;
+    if (isOpen && isMobile) {
+      const scrollY = window.scrollY;
+      const originalStyles = {
+        overflow: document.body.style.overflow,
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left,
+        right: document.body.style.right,
+        width: document.body.style.width
+      };
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      document.body.style.width = "100%";
+      return () => {
+        document.body.style.overflow = originalStyles.overflow;
+        document.body.style.position = originalStyles.position;
+        document.body.style.top = originalStyles.top;
+        document.body.style.left = originalStyles.left;
+        document.body.style.right = originalStyles.right;
+        document.body.style.width = originalStyles.width;
+        window.scrollTo(0, scrollY);
+      };
+    }
+  }, [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(
@@ -2208,9 +2306,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
     const touch = e.touches[0];
     const deltaX = touch.clientX - touchStartRef.current.x;
     const deltaY = touch.clientY - touchStartRef.current.y;
-    if (Math.abs(deltaY) > Math.abs(deltaX)) return;
+    if (Math.abs(deltaY) > 10 || Math.abs(deltaX) < 15) {
+      if (swipedMessageId === message.id && swipeOffset !== 0) {
+        setSwipeOffset(0);
+        setSwipedMessageId(null);
+      }
+      return;
+    }
+    e.preventDefault();
     if (deltaX < 0) {
-      const offset = Math.max(deltaX, -100);
+      const offset = Math.max(deltaX, -80);
       setSwipeOffset(offset);
       setSwipedMessageId(message.id);
     }
@@ -2352,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,