Merge pull request #49 from UNICEFECAR/bug/issue_50

Issue #50 - Keyboard covers the chat with a client on mobile devices
UNICEFECAR · Nov 15, 2023 · d26ac50 · d26ac50
2 parents b9a6006 + 63a9a9c
commit d26ac50
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/blocks/VideoRoom/video-room.scss b/src/blocks/VideoRoom/video-room.scss
@@ -80,7 +80,7 @@
     &--shrink-video {
       & .remote-video,
       & .remote-video-off.video-off {
-        height: 50vh;
+        height: 40vh;
         width: 50vh;
         margin: 0 auto;
 

diff --git a/src/pages/Consultation/consultation.scss b/src/pages/Consultation/consultation.scss
@@ -3,6 +3,7 @@
 
 .page__consultation {
   padding-top: 0;
+  max-height: 100vh;
 
   @media screen and (min-width: $screen-md) {
     margin-top: 9.6rem;
@@ -35,8 +36,10 @@
         margin-left: $spacing_1_8;
         flex-direction: column;
         overflow: auto;
+        padding-bottom: 15rem;
 
         @media screen and (min-width: 1024px) {
+          padding-bottom: 0;
           height: 70vh;
           overflow-y: auto;
         }
@@ -77,28 +80,28 @@
   }
 
   &__chat-backdrop {
-    height: 50vh;
+    height: 60vh;
     padding-bottom: $spacing_1_6;
 
     & .base-modal__body {
       position: relative;
     }
 
     &.backdrop__shown {
-      top: 50vh;
+      top: 40vh;
     }
 
     & .send-message {
       margin-bottom: $spacing_0_4;
-      // position: fixed;
+      position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       margin-bottom: 10px;
       padding-top: $spacing_1_6;
 
       @media screen and (min-width: $screen-md) {
-        // position: absolute;
+        position: unset;
       }
     }
 
@@ -131,6 +134,10 @@
   }
 
   & .send-message {
-    margin-bottom: $spacing_2_8;
+    padding-inline: $spacing_1_0;
+    @media screen and (min-width: $screen-md) {
+      padding-inline: unset;
+      margin-bottom: $spacing_2_8;
+    }
   }
 }