Safe area for iPhone (#1403)

src/components/main/Main.scss

@@ -95,6 +95,12 @@
     width: 100vw;
     transform: translate3d(-20vw, 0, 0);
   }
+
+
+  @supports (left: env(safe-area-inset-left)) {
+    left: env(safe-area-inset-left) !important;
+    max-width: calc(26.5rem - env(safe-area-inset-left)) !important;
+  }
 }
 
 #RightColumn {

src/components/mediaViewer/MediaViewer.scss

@@ -77,10 +77,18 @@
     @media (max-width: 600px) {
       padding: 0 0.5rem;
 
+      @supports (padding: 0 env(safe-area-inset-left)) {
+        padding: 0 #{"max(0.5rem, env(safe-area-inset-left))"};
+      }
+
       .media-viewer-close {
         margin-right: 1.5rem;
       }
     }
+
+    @supports (padding: 0 env(safe-area-inset-left)) {
+      padding: 0 #{"max(1.25rem, env(safe-area-inset-left))"};
+    }
   }
 
   & > .Transition,
@@ -185,10 +193,19 @@
       background-image: url("../../assets/media_navigation_previous.svg");
       background-position: 1.25rem calc(50% - 2rem);
 
+      @supports (left: env(safe-area-inset-left)) {
+        left: env(safe-area-inset-left);
+      }
+
       &[dir=rtl] {
         left: auto;
         right: 0;
         transform: scaleX(-1);
+
+        @supports (left: env(safe-area-inset-left)) {
+          left: auto;
+          right: env(safe-area-inset-right);
+        }
       }
     }
 
@@ -197,10 +214,19 @@
       background-image: url("../../assets/media_navigation_next.svg");
       background-position: calc(100% - 1.25rem) calc(50% - 2rem);
 
+      @supports (left: env(safe-area-inset-left)) {
+        right: env(safe-area-inset-right);
+      }
+
       &[dir=rtl]{
         left: 0;
         right: auto;
         transform: scaleX(-1);
+
+        @supports (left: env(safe-area-inset-left)) {
+          right: auto;
+          left: env(safe-area-inset-left);
+        }
       }
     }
 

src/components/mediaViewer/SenderInfo.scss

@@ -23,7 +23,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    max-width: 100%;
+    max-width: calc(100% - 3.75rem);
   }
 
   .title {

src/components/middle/MessageList.scss

@@ -11,6 +11,12 @@
   overflow-y: auto;
   @include overflow-y-overlay();
 
+  transition: transform var(--layer-transition);
+
+  body.animation-level-0 & {
+    transition: none !important;
+  }
+
   .mask-image-enabled & {
     mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);
   }
@@ -25,6 +31,12 @@
     }
   }
 
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    body.keyboard-visible & {
+      transform: translateY(env(safe-area-inset-bottom));
+    }
+  }
+
   &.no-avatars .Message > .Avatar {
     display: none;
   }
@@ -67,6 +79,12 @@
 
       @media (max-width: 600px) {
         margin-bottom: 4.25rem;
+
+        @supports (padding-bottom: env(safe-area-inset-bottom)) {
+          body:not(.keyboard-visible) & {
+            margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
+          }
+        }
       }
 
       &.ActionMessage {

src/components/middle/MessageSelectToolbar.scss

@@ -8,6 +8,10 @@
   justify-content: center;
   margin: 0;
 
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    bottom: calc(.5rem + env(safe-area-inset-bottom));
+  }
+
   .mask-image-disabled &::before {
     left: auto !important;
     right: auto !important;

src/components/middle/MessageSelectToolbar.tsx

@@ -70,7 +70,7 @@ const MessageSelectToolbar: FC<OwnProps & StateProps & DispatchProps> = ({
 
   const lang = useLang();
 
-  const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount);
+  const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount, 'i');
 
   const className = buildClassName(
     'MessageSelectToolbar',

src/components/middle/MiddleColumn.scss

@@ -227,7 +227,7 @@
     z-index: var(--z-middle-footer);
 
     transform: translate3d(0, 0, 0);
-    transition: transform var(--layer-transition);
+    transition: top 200ms, transform var(--layer-transition);
 
     body.animation-level-0 & {
       transition: none !important;
@@ -249,6 +249,17 @@
       }
     }
 
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      &:not(.no-composer) {
+        padding-bottom: env(safe-area-inset-bottom);
+        top: 0;
+
+        body.keyboard-visible & {
+          top: env(safe-area-inset-bottom);
+        }
+      }
+    }
+
     &::before {
       content: "";
       position: absolute;
@@ -347,6 +358,10 @@
 
   @media (max-width: 600px) {
     padding-bottom: 0.75rem;
+
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
+    }
   }
 
   .mask-image-disabled &::before {

src/components/middle/MiddleColumn.tsx

@@ -175,6 +175,28 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
     }
   }, [animationLevel]);
 
+  // Fix for mobile virtual keyboard
+  useEffect(() => {
+    const { visualViewport } = window as any;
+    if (!visualViewport) {
+      return undefined;
+    }
+
+    const handleResize = () => {
+      if (window.visualViewport.height !== document.documentElement.clientHeight) {
+        document.body.classList.add('keyboard-visible');
+      } else {
+        document.body.classList.remove('keyboard-visible');
+      }
+    };
+
+    visualViewport.addEventListener('resize', handleResize);
+
+    return () => {
+      visualViewport.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
     if (e.propertyName === 'transform' && e.target === e.currentTarget) {
       setIsReady(Boolean(chatId));

src/components/middle/MiddleHeader.scss

@@ -32,6 +32,11 @@
       max-width: unset;
       margin-top: -0.1875rem;
     }
+
+    @supports (padding-left: env(safe-area-inset-left)) {
+      padding-left: #{"max(0.75rem, env(safe-area-inset-left))"};
+      padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
+    }
   }
 
   .AudioPlayer {
@@ -80,12 +85,22 @@
   position: relative;
   z-index: var(--z-middle-header);
 
+  @supports (padding-left: env(safe-area-inset-left)) {
+    padding-left: #{"max(1.5rem, env(safe-area-inset-left))"};
+    padding-right: #{"max(.8125rem, env(safe-area-inset-right))"};
+  }
+
   @media (max-width: 600px) {
     padding: 0.5rem;
     position: relative;
     // Force rendering in the composite layer to fix the z-index rendering issue
     transform: translate3d(0, 0, 10px);
     transform-style: preserve-3d;
+
+    @supports (padding-left: env(safe-area-inset-left)) {
+      padding-left: #{"max(.5rem, env(safe-area-inset-left))"};
+      padding-right: #{"max(.5rem, env(safe-area-inset-right))"};
+    }
   }
 
   .Transition {

src/components/middle/MobileSearch.scss

@@ -10,6 +10,11 @@
   align-items: center;
   padding: 0 0.5rem 0 0.25rem;
 
+  @supports (padding-left: env(safe-area-inset-left)) {
+    padding-left: #{"max(0.25rem, env(safe-area-inset-left))"};
+    padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
+  }
+
   > .SearchInput {
     margin-left: 0.25rem;
     flex: 1;
@@ -29,6 +34,16 @@
   padding-left: 1rem;
   padding-right: 0.5rem;
 
+  @supports (padding-bottom: env(safe-area-inset-bottom)) {
+    padding-left: #{"max(1rem, env(safe-area-inset-left))"};
+    padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
+
+    body:not(.keyboard-visible) & {
+      padding-bottom: env(safe-area-inset-bottom);
+      height: calc(3.5rem + env(safe-area-inset-bottom));
+    }
+  }
+
   > .counter {
     flex: 1;
     color: var(--color-text-secondary);

src/components/middle/ScrollDownButton.scss

@@ -10,6 +10,10 @@
   z-index: var(--z-scroll-down-button);
   pointer-events: none;
 
+  @supports (right: env(safe-area-inset-right)) {
+    right: #{"max(1rem, env(safe-area-inset-right))"};
+  }
+
   body.animation-level-0 & {
     transform: none !important;
 
@@ -19,6 +23,12 @@
   @media (max-width: 600px) {
     right: 0.5rem;
     bottom: 4.5rem;
+
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      body:not(.keyboard-visible) & {
+        bottom: calc(4.5rem + env(safe-area-inset-bottom));
+      }
+    }
   }
 
   &-inner {
@@ -63,6 +73,10 @@
 
     &.no-composer:not(.with-extra-shift) {
       transform: translateY(4rem);
+
+      @supports (padding-bottom: env(safe-area-inset-bottom)) {
+        transform: translateY(calc(4rem - env(safe-area-inset-bottom)));
+      }
     }
   }
 

src/components/middle/composer/Composer.scss

@@ -8,6 +8,10 @@
     padding-right: 2rem;
     bottom: 0;
 
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      bottom: env(safe-area-inset-bottom);
+    }
+
     @media (max-width: 600px) {
       padding-right: 1rem;
     }

src/components/middle/composer/SymbolMenu.scss

@@ -11,6 +11,11 @@
     z-index: 1;
 
     transition: transform var(--layer-transition);
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      padding-right: env(safe-area-inset-right);
+      padding-bottom: env(safe-area-inset-bottom);
+      padding-left: env(safe-area-inset-left);
+    }
 
     &.open {
       transform: translate3d(0, 0, 0);
@@ -33,6 +38,9 @@
     width: var(--symbol-menu-width);
     height: var(--symbol-menu-height);
     max-height: calc(100vh - var(--symbol-menu-footer-height));
+    @supports (padding-bottom: env(safe-area-inset-bottom)) {
+      max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
+    }
   }
 
   &-footer {
@@ -116,6 +124,11 @@
     position: absolute;
     right: .25rem;
     top: .25rem;
+
+    @supports (right: env(safe-area-inset-right)) {
+      right: #{"max(.25rem, env(safe-area-inset-right))"};
+      top: #{"max(.25rem, env(safe-area-inset-top))"};
+    }
   }
 
   @media (orientation: landscape) {

src/components/right/RightColumn.scss

@@ -32,6 +32,10 @@
     transform: translate3d(110vw, 0, 0);
   }
 
+  @supports (padding-right: env(safe-area-inset-right)) {
+    padding-right: env(safe-area-inset-right);
+  }
+
   > .Transition {
     height: calc(100% - var(--header-height));
     overflow: hidden;

src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-title" content="Telegram WebZ">
   <meta name="application-name" content="Telegram WebZ">