[deploy] 🐞Bug Fix: Chat doesn't extend to its frame on Firefox iOS [ Fixes #4024 ] (#9801)

* 🐞Bug Fix: Bug_chat_height_issues_in_IOS

* Removing extra margin in sidecar

* 🐞 Fixing the viewport issue

* 🚀 fixing the parent box size problem

app/assets/stylesheets/chat.scss

@@ -12,13 +12,7 @@
 }
 
 .live-chat {
-  height: calc(100vh - 56px);
-
-  &.live-chat--iossafari {
-    height: calc(100vh - 190px);
-  }
-
-  overflow-y: hidden;
+  height: calc(100 * var(--vh) - var(--header-height));
 }
 
 .live-chat {
@@ -28,14 +22,10 @@
 
 .chat {
   display: flex;
-  height: calc(100vh - var(--header-height));
+  height: calc(100 * var(--vh) - var(--header-height));
   position: relative;
   overflow-x: hidden;
   overflow-y: hidden;
-
-  &.chat--iossafari {
-    height: calc(100vh - 201px);
-  }
 }
 
 .chat__channels {
@@ -297,7 +287,7 @@
   @media screen and (max-width: 426px) {
     padding: 10px;
     min-width: 50%;
-    width: calc(100% - 16px);
+    width: calc(100%);
     position: fixed;
     height: 100%;
     margin-left: 0;

app/javascript/chat/chat.jsx

@@ -1842,11 +1842,6 @@ export default class Chat extends Component {
 
   render() {
     const { state } = this;
-    const detectIOSSafariClass =
-      navigator.userAgent.match(/iPhone/i) &&
-      !navigator.userAgent.match('CriOS')
-        ? ' chat--iossafari'
-        : '';
     let channelHeader = <div className="active-channel__header">&nbsp;</div>;
     if (state.activeChannel) {
       channelHeader = (
@@ -1867,9 +1862,9 @@ export default class Chat extends Component {
       <div
         data-testid="chat"
         className={`chat chat--expanded
-        ${detectIOSSafariClass} chat--${
-          state.videoPath ? 'video-visible' : 'video-not-visible'
-        } chat--${
+         chat--${
+           state.videoPath ? 'video-visible' : 'video-not-visible'
+         } chat--${
           state.activeContent[state.activeChannelId]
             ? 'content-visible'
             : 'content-not-visible'

app/views/chat_channels/index.html.erb

@@ -37,7 +37,9 @@
   }
 </style>
 <script>
-  if (navigator.userAgent.match(/iPhone/i) && !navigator.userAgent.match('CriOS')) {
-    document.getElementById("chat").classList.add("live-chat--iossafari")
-  }
+    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+  let vh = window.innerHeight * 0.01;
+  // Then we set the value in the --vh custom property to the root of the document
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+  document.body.style.setProperty('min-height','-webkit-fill-available')
 </script>