[try] iOS safe inset area

src/index.hbs

@@ -5,7 +5,8 @@
   <meta charset="utf-8">
   <title>Telegram Web</title>
   <meta name="description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
 
   <!-- do not paste other icons here, only change these. 'icon' type must be single -->
   <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png?v=jw3mK7G9Ry">

src/index.ts

@@ -183,10 +183,14 @@ console.timeEnd('get storage1'); */
             //if(e.target === document.documentElement || e.target === document.body) e.preventDefault();
           };
 
+          // let isOpened = false;
           document.addEventListener('focusin', (e) => {
             if(!setViewportVH) return;
             //console.log('focusin');
 
+            // isOpened = true;
+            // document.body.classList.add('is-keyboard-opened');
+
             fixSafariStickyInput(e.target as HTMLElement);
 
             document.addEventListener('touchmove', onTouchMove, o);
@@ -200,6 +204,11 @@ console.timeEnd('get storage1'); */
 
           document.addEventListener('focusout', () => {
             document.removeEventListener('touchmove', onTouchMove, o);
+            
+            // if(isOpened) {
+            //   isOpened = false;
+            //   document.body.classList.remove('is-keyboard-opened');
+            // }
           });
           
           document.addEventListener('visibilitychange', () => {

src/scss/partials/_chat.scss

@@ -17,7 +17,9 @@ $chat-helper-size: 39px;
 
 .chat-input {
 	--translateY: 0;
-	--bottom: #{$chat-padding-handhelds};
+	--padding-bottom: #{$chat-padding-handhelds};
+	//--bottom: clamp(var(--padding-bottom), env(safe-area-inset-bottom), 1.3125rem);
+	--bottom: var(--padding-bottom);
 	display: flex;
 	width: 100%;
 	max-width: 100%;
@@ -28,6 +30,10 @@ $chat-helper-size: 39px;
 	transition: transform var(--transition-standard-out);
 	transform: translateY(var(--translateY));
 
+	/* body.is-keyboard-opened & {
+		--bottom: var(--padding-bottom);
+	} */
+
 	body.animation-level-0 & {
 		transition: none;
 	}
@@ -41,11 +47,11 @@ $chat-helper-size: 39px;
 	}
 
 	@include respond-to(not-handhelds) {
-		--bottom: 20px;
+		--padding-bottom: 1.25rem;
 	}
 
 	@include respond-to(esg-bottom) {
-		--bottom: #{$chat-padding-handhelds};
+		--padding-bottom: #{$chat-padding-handhelds};
 	}
 
 	@include respond-to(medium-screens) {

src/scss/style.scss

@@ -221,14 +221,6 @@ html.night {
   // * Night theme end
 }
 
-@media (prefers-color-scheme: dark) {
-
-}
-
-@media (prefers-color-scheme: light) {
-
-}
-
 @import "partials/ico";
 @import "partials/input";
 @import "partials/button";
@@ -398,6 +390,12 @@ html, body {
   } */
 }
 
+@supports(padding: unquote('max(0px)')) {
+  html {
+    padding: 0 unquote('min(16px, env(safe-area-inset-right))') 0 unquote('min(16px, env(safe-area-inset-left))');
+  }
+}
+
 html {
   font-size: 16px;
   //overflow: hidden;