UI: Do not use deprecated overflow: overlay (#3185)

src/components/left/main/LeftMainHeader.scss

@@ -96,7 +96,6 @@
     max-height: calc(100 * var(--vh) - 3.75rem);
 
     overflow-y: auto;
-    @include overflow-y-overlay();
   }
 
   .extra-spacing {

src/components/left/main/StatusPickerMenu.module.scss

@@ -6,7 +6,7 @@
 
   left: 0.5rem;
   width: 100%;
-  max-width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
+  max-width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
   height: var(--symbol-menu-height);
   padding: 0 !important;
 
@@ -16,10 +16,6 @@
     backdrop-filter: blur(10px);
   }
 
-  @supports (overflow: overlay) {
-    width: var(--symbol-menu-width);
-  }
-
   @media (max-width: 26rem) {
     left: 0.5rem !important;
     right: 0.5rem !important;

src/components/left/settings/Settings.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/mixins";
-
 #Settings {
   height: 100%;
 
@@ -34,11 +32,9 @@
 
 .settings-content {
   border-top: 1px solid var(--color-borders);
-  background-color: var(--color-background-secondary);
   height: calc(100% - var(--header-height));
 
-  overflow-y: auto;
+  overflow-y: scroll;
-  @include overflow-y-overlay();
 
   &.no-border, &.two-fa, &.local-passcode, &.password-form {
     border-top: none;
@@ -129,7 +125,7 @@
   background-color: var(--color-background);
   padding: 1.5rem 1.5rem 1rem;
   box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
-  margin-bottom: 0.625rem;
+  border-bottom: 0.625rem solid var(--color-background-secondary);
 }
 
 .settings-item {

src/components/left/settings/SettingsDoNotTranslate.module.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/mixins";
-
 .root, .item {
   display: flex;
   flex-direction: column;
@@ -16,5 +14,4 @@
 
 .languages {
   overflow-y: auto;
-  @include overflow-y-overlay();
 }

src/components/middle/MessageLanguageModal.module.scss

@@ -1,5 +1,3 @@
-@import "../../styles/mixins";
-
 .root {
   :global(.modal-content) {
     min-height: min(75vh, 32rem);
@@ -26,5 +24,4 @@
 
 .languages {
   overflow-y: auto;
-  @include overflow-y-overlay();
 }

src/components/middle/MessageList.scss

@@ -1,16 +1,13 @@
-@import "../../styles/mixins";
-
 .MessageList {
   flex: 1;
   width: 100%;
   margin-bottom: 0.5rem;
 
-  overflow: scroll;
+  overflow-y: scroll;
   overflow-x: hidden;
-  overflow-y: auto;
-  @include overflow-y-overlay();
 
-  transition: transform var(--layer-transition);
+  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
+  transition: bottom 150ms ease-out, transform var(--layer-transition);
 
   body.no-page-transitions & {
     transition: none !important;
@@ -30,9 +27,6 @@
     }
   }
 
-  /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
-  transition: bottom 150ms ease-out, transform var(--layer-transition);
-
   body.keyboard-visible & {
     position: relative;
     bottom: calc(0px - env(safe-area-inset-bottom));
@@ -379,10 +373,6 @@
     top: 0.625rem;
   }
 
-  &.is-animating {
-    overflow: hidden;
-  }
-
   &.is-animating .message-select-control {
     display: none !important;
   }
@@ -464,14 +454,11 @@
 
   .Transition_slide-from > &,
   .Transition_slide-to > & {
+    padding-inline-end: var(--scrollbar-width) !important;
+
+    scrollbar-width: none !important;
     &::-webkit-scrollbar {
       width: 0 !important;
     }
-
-    /* Styles for Firefox */
-    @supports (scrollbar-width: none) {
-      padding-right: 0.6875rem !important;
-      scrollbar-width: none !important;
-    }
   }
 }

src/components/middle/composer/Composer.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/mixins";
-
 .Composer {
   align-items: flex-end;
 
@@ -666,7 +664,6 @@
 
   overflow-x: hidden;
   overflow-y: auto;
-  @include overflow-y-overlay();
 
   box-shadow: 0 1px 2px var(--color-default-shadow);
 

src/components/middle/composer/CustomEmojiTooltip.module.scss

@@ -3,11 +3,8 @@
   padding: 0;
   z-index: 1;
 
+  overflow-x: scroll;
   overflow-y: hidden;
-  overflow-x: auto;
-  @supports (overflow-x: overlay) {
-    overflow-x: overlay;
-  }
 
   .emojiButton {
     flex: 0 0 2rem;

src/components/middle/composer/EmojiPicker.scss

@@ -10,12 +10,12 @@
     height: calc(100% - 3rem);
     overflow-y: auto;
     padding: 0.5rem 0.75rem;
+    @include adapt-padding-to-scrollbar(0.75rem);
 
     @media (max-width: 600px) {
       padding: 0.5rem 0.25rem;
+      @include adapt-padding-to-scrollbar(0.25rem);
     }
-
-    @include overflow-y-overlay();
   }
 
   &-header {

src/components/middle/composer/EmojiTooltip.scss

@@ -2,10 +2,7 @@
   display: flex;
   padding: 0;
 
-  overflow-x: auto;
+  overflow-x: scroll;
-  @supports (overflow-x: overlay) {
-    overflow-x: overlay;
-  }
   overflow-y: hidden;
 
   .EmojiButton {

src/components/middle/composer/GifPicker.scss

@@ -1,5 +1,3 @@
-@import "../../../styles/mixins";
-
 .GifPicker {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
@@ -14,8 +12,6 @@
   position: relative;
   top: 0.1875rem;
 
-  @include overflow-y-overlay();
-
   .Loading, .picker-disabled {
     position: absolute;
     top: 0;

src/components/middle/composer/StickerPicker.module.scss

@@ -11,13 +11,16 @@
 
   position: relative;
   height: calc(100% - 3rem);
-  overflow-y: auto;
-  padding: 0.5rem 0.25rem;
 
-  @include overflow-y-overlay();
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  padding: 0.5rem 0.25rem;
+  @include adapt-padding-to-scrollbar(0.25rem);
 
   &_customEmoji {
     padding: 0.5rem 0.75rem;
+    @include adapt-padding-to-scrollbar(0.75rem);
   }
 
   :global(.bubble) {

src/components/middle/composer/SymbolMenu.scss

@@ -141,7 +141,7 @@
     --offset-y: 4rem;
 
     border-radius: 1.25rem;
-    width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
+    width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
     padding: 0;
     overflow: hidden;
 
@@ -155,10 +155,6 @@
     }
 
     transition-duration: 200ms !important;
-
-    @supports (overflow: overlay) {
-      width: var(--symbol-menu-width);
-    }
   }
 
   .StickerButton.custom-emoji, .sticker-set-cover {

src/components/middle/message/MessageContextMenu.scss

@@ -4,7 +4,6 @@
 
   &_items {
     overflow: auto;
-    overflow: overlay;
     padding: 0.5rem 0;
     overscroll-behavior: contain;
 

src/components/middle/message/ReactionPicker.module.scss

@@ -18,15 +18,11 @@
     backdrop-filter: blur(10px);
   }
 
-  width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
+  width: calc(var(--symbol-menu-width) + var(--scrollbar-width));
   height: var(--symbol-menu-height);
   padding: 0 !important;
   transform-origin: 9rem 4.625rem !important;
 
-  @supports (overflow: overlay) {
-    width: var(--symbol-menu-width);
-  }
-
   &:global(.bubble) {
     transform: scale(0.8) !important;
     transition: opacity 150ms cubic-bezier(0.2, 0, 0.2, 1), transform 150ms cubic-bezier(0.2, 0, 0.2, 1) !important;

src/components/right/Profile.scss

@@ -1,5 +1,3 @@
-@import "../../styles/mixins";
-
 .Profile {
   height: 100%;
   display: flex;
@@ -7,7 +5,6 @@
 
   overflow-x: hidden;
   overflow-y: scroll;
-  @include overflow-y-overlay();
 
   > .profile-info > .ChatInfo {
     grid-area: chat_info;

src/components/right/StickerSearch.scss

@@ -2,13 +2,9 @@
   container: stickers / inline-size;
   height: 100%;
   padding: 0 0.5rem;
-  overflow-y: auto;
+  overflow-y: scroll;
   overflow-x: hidden;
 
-  @supports (overflow-y: overlay) {
-    overflow-y: overlay;
-  }
-
   .helper-text {
     padding: 1rem;
     margin-bottom: 0.125rem;
@@ -77,7 +73,7 @@
 
   .StickerButton {
     margin: 0.125rem;
-    
+
     @media (max-width: 380px) {
       &:last-child {
         display: none;

src/components/right/management/Management.scss

@@ -1,7 +1,6 @@
 .Management {
   position: relative;
   height: 100%;
-  background-color: var(--color-background-secondary);
 
   & > .custom-scroll {
     height: 100%;
@@ -18,7 +17,7 @@
     padding: 1rem 1.5rem;
     background-color: var(--color-background);
     box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
-    margin-bottom: 0.625rem;
+    border-bottom: 0.625rem solid var(--color-background-secondary);
 
     &.wide {
       padding: 1.5rem;

src/styles/_common.scss

@@ -1,5 +1,3 @@
-@import "./mixins";
-
 // Common styles for all media-type components across the app.
 .media-inner {
   position: relative;
@@ -97,9 +95,10 @@
   background: var(--color-background);
   height: 100%;
   padding: 0.5rem 0.4375rem 0.5rem 0.4375rem;
+  @include adapt-padding-to-scrollbar(0.4375rem);
 
-  overflow-y: auto;
+  overflow-x: hidden;
-  @include overflow-y-overlay();
+  overflow-y: scroll;
 
   &.forum-panel-open {
     .info {

src/styles/_mixins.scss

@@ -5,13 +5,8 @@
   }
 }
 
-@mixin overflow-y-overlay() {
+@mixin adapt-padding-to-scrollbar($padding) {
-  @supports (overflow-y: overlay) {
+  padding-inline-end: calc($padding - var(--scrollbar-width));
-    overflow-y: overlay;
-
-    //Workaround for Android <= 9
-    overflow-x: hidden;
-  }
 }
 
 @mixin reset-range() {

src/styles/_variables.scss

@@ -202,6 +202,8 @@ $color-message-reaction-own-hover: #b5e0a4;
   --symbol-menu-height: 22.375rem;
   --symbol-menu-footer-height: 3rem;
 
+  --scrollbar-width: 0;
+
   @media (min-width: 1276px) and (max-width: 1920px) {
     --right-column-width: 25vw;
   }

src/util/windowEnvironment.ts

@@ -123,6 +123,19 @@ export const IS_TRANSLATION_SUPPORTED = Boolean(Intl.DisplayNames);
 
 export const MESSAGE_LIST_SENSITIVE_AREA = 750;
 
+export const SCROLLBAR_WIDTH = (() => {
+  const el = document.createElement('div');
+  el.style.cssText = 'overflow:scroll; visibility:hidden; position:absolute;';
+  el.classList.add('custom-scroll');
+  document.body.appendChild(el);
+  const width = el.offsetWidth - el.clientWidth;
+  el.remove();
+
+  document.documentElement.style.setProperty('--scrollbar-width', `${width}px`);
+
+  return width;
+})();
+
 export const MAX_BUFFER_SIZE = (IS_MOBILE ? 512 : 2000) * 1024 ** 2; // 512 OR 2000 MB
 
 function isLastEmojiVersionSupported() {