diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss index cc5523867..cdb44b32e 100644 --- a/src/components/main/Main.scss +++ b/src/components/main/Main.scss @@ -95,12 +95,6 @@ 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 { diff --git a/src/components/mediaViewer/MediaViewer.scss b/src/components/mediaViewer/MediaViewer.scss index e6bfc6f45..16eba3277 100644 --- a/src/components/mediaViewer/MediaViewer.scss +++ b/src/components/mediaViewer/MediaViewer.scss @@ -77,18 +77,10 @@ @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, @@ -193,19 +185,10 @@ 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); - } } } @@ -214,19 +197,10 @@ 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); - } } } diff --git a/src/components/mediaViewer/SenderInfo.scss b/src/components/mediaViewer/SenderInfo.scss index 24996b033..42ac4448f 100644 --- a/src/components/mediaViewer/SenderInfo.scss +++ b/src/components/mediaViewer/SenderInfo.scss @@ -23,7 +23,7 @@ display: flex; flex-direction: column; justify-content: center; - max-width: calc(100% - 3.75rem); + max-width: 100%; } .title { diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 84a274d53..f02f711d4 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -11,12 +11,6 @@ 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); } @@ -31,12 +25,6 @@ } } - @supports (padding-bottom: env(safe-area-inset-bottom)) { - body.keyboard-visible & { - transform: translateY(env(safe-area-inset-bottom)); - } - } - &.no-avatars .Message > .Avatar { display: none; } @@ -79,12 +67,6 @@ @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 { diff --git a/src/components/middle/MessageSelectToolbar.scss b/src/components/middle/MessageSelectToolbar.scss index 695ddbe53..4d3d094d2 100644 --- a/src/components/middle/MessageSelectToolbar.scss +++ b/src/components/middle/MessageSelectToolbar.scss @@ -8,10 +8,6 @@ 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; diff --git a/src/components/middle/MessageSelectToolbar.tsx b/src/components/middle/MessageSelectToolbar.tsx index 89a30f749..abe9dcb5a 100644 --- a/src/components/middle/MessageSelectToolbar.tsx +++ b/src/components/middle/MessageSelectToolbar.tsx @@ -70,7 +70,7 @@ const MessageSelectToolbar: FC = ({ const lang = useLang(); - const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount, 'i'); + const formattedMessagesCount = lang('VoiceOver.Chat.MessagesSelected', renderingSelectedMessagesCount); const className = buildClassName( 'MessageSelectToolbar', diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index f2968c7b5..4219534ce 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -227,7 +227,7 @@ z-index: var(--z-middle-footer); transform: translate3d(0, 0, 0); - transition: top 200ms, transform var(--layer-transition); + transition: transform var(--layer-transition); body.animation-level-0 & { transition: none !important; @@ -249,17 +249,6 @@ } } - @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; @@ -358,10 +347,6 @@ @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 { diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 9defe46a6..e205e5331 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -184,28 +184,6 @@ const MiddleColumn: FC = ({ } }, [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) => { if (e.propertyName === 'transform' && e.target === e.currentTarget) { setIsReady(Boolean(chatId)); diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss index 7dff068d5..b9613fc17 100644 --- a/src/components/middle/MiddleHeader.scss +++ b/src/components/middle/MiddleHeader.scss @@ -32,11 +32,6 @@ 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 { @@ -85,22 +80,12 @@ 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 { diff --git a/src/components/middle/MobileSearch.scss b/src/components/middle/MobileSearch.scss index 059dddcda..205fb09e4 100644 --- a/src/components/middle/MobileSearch.scss +++ b/src/components/middle/MobileSearch.scss @@ -10,11 +10,6 @@ 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; @@ -34,16 +29,6 @@ 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); diff --git a/src/components/middle/ScrollDownButton.scss b/src/components/middle/ScrollDownButton.scss index 796bd380f..afd51cd04 100644 --- a/src/components/middle/ScrollDownButton.scss +++ b/src/components/middle/ScrollDownButton.scss @@ -10,10 +10,6 @@ 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; @@ -23,12 +19,6 @@ @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 { @@ -74,10 +64,6 @@ &.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))); - } } } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index 3690a167e..048d48dbc 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -8,10 +8,6 @@ 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; } diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss index 7dc4eb13c..4ff91541d 100644 --- a/src/components/middle/composer/SymbolMenu.scss +++ b/src/components/middle/composer/SymbolMenu.scss @@ -11,12 +11,6 @@ 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); - transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), 0); - } &.open { transform: translate3d(0, 0, 0); @@ -39,9 +33,6 @@ 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 { @@ -125,11 +116,6 @@ 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) { diff --git a/src/components/right/RightColumn.scss b/src/components/right/RightColumn.scss index 7f04a65f9..359756df5 100644 --- a/src/components/right/RightColumn.scss +++ b/src/components/right/RightColumn.scss @@ -32,10 +32,6 @@ 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; diff --git a/src/index.html b/src/index.html index b5b70fc3e..4ee5eedd9 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - +