From 1b184837ace0b6532af1ccca23319c9df0eca0dd Mon Sep 17 00:00:00 2001
From: Igor Krupenja <igor.krupenja@gmail.com>
Date: Thu, 2 Jan 2025 13:07:25 +0200
Subject: [PATCH] Fix chat cut off on iOS with on-screen keyboard open (#362)

* Prep setup

* Attempt with fixed header

* Revert "Attempt with fixed header"

This reverts commit 1b249a232dc02619f2caf3a3136fe1daa9b1ca81.

* PoC with fixed height

* PoC fix

* Fix the issue

* Revert "Prep setup"

This reverts commit 761b7852a507a3c912f8ae30dd7bd98d714a55fc.
---
 src/components/chat/chat.module.scss |  2 +-
 src/components/chat/chat.tsx         | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/chat.module.scss b/src/components/chat/chat.module.scss
index 0ba148db..6f9a4911 100644
--- a/src/components/chat/chat.module.scss
+++ b/src/components/chat/chat.module.scss
@@ -40,7 +40,7 @@
 @media screen and (max-width: 480px) {
   .chat {
     position: fixed;
-    top: 0;
+    bottom: 0;
     right: 0;
     height: 100dvh;
     width: 100%;
diff --git a/src/components/chat/chat.tsx b/src/components/chat/chat.tsx
index d7c3e72d..72b0cf01 100644
--- a/src/components/chat/chat.tsx
+++ b/src/components/chat/chat.tsx
@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { memo, useEffect, useLayoutEffect, useState } from "react";
+import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Resizable, ResizeCallback } from "re-resizable";
 import useChatSelector from "../../hooks/use-chat-selector";
@@ -85,6 +85,25 @@ const Chat = (): JSX.Element => {
 
   const { burokrattOnlineStatus, showConfirmationModal } = useAppSelector((state) => state.widget);
 
+  const chatRef = useRef<HTMLDivElement>(null);
+
+  // Prevent chat from being cut off on iOS devices when on-screen keyboard is open
+  useEffect(() => {
+    const vv = window.visualViewport;
+    const currentRef = chatRef.current;
+
+    function setChatHeight() {
+      if (currentRef && vv && /iPhone|iPad|iPod/.test(window.navigator.userAgent)) {
+        currentRef.style.height = `${vv.height}px`;
+      }
+    }
+
+    vv?.addEventListener('resize', setChatHeight);
+    setChatHeight();
+
+    return () => vv?.removeEventListener('resize', setChatHeight);
+  }, []);
+
   useEffect(() => {
     if (feedback.isFeedbackRatingGiven && feedback.isFeedbackMessageGiven && !feedback.isFeedbackConfirmationShown) {
       setShowFeedbackResult(true);
@@ -211,6 +230,7 @@ const Chat = (): JSX.Element => {
           className={`${styles.chat} ${isAuthenticated ? styles.authenticated : ""}`}
           animate={{ y: 0 }}
           style={{ y: 400 }}
+          ref={chatRef}
         >
           <ChatHeader
             isDetailSelected={showWidgetDetails}