Various improvements for scrollable lists on Android

src/components/left/main/LeftMain.scss

@@ -62,7 +62,7 @@
     }
   }
 
-  .chat-list, .RecentContacts, .LeftSearch, .search-content {
+  .RecentContacts, .LeftSearch, .search-content {
     height: 100%;
     overflow-y: auto;
   }

src/components/left/main/LeftMainHeader.scss

@@ -73,8 +73,9 @@
   .Menu .bubble {
     min-width: 17rem;
     max-height: calc(100 * var(--vh) - 3.75rem);
+
     overflow-y: auto;
-    overflow-y: overlay;
+    @include overflow-y-overlay();
   }
 
   // @optimization

src/components/left/settings/Settings.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins';
+
 #Settings {
   height: 100%;
 
@@ -33,8 +35,9 @@
 .settings-content {
   background: var(--color-background);
   height: calc(100% - var(--header-height));
+
   overflow-y: auto;
-  overflow-y: overlay;
+  @include overflow-y-overlay();
 
   &.infinite-scroll {
     display: flex;

src/components/middle/MessageList.scss

@@ -1,11 +1,15 @@
+@import '../../styles/mixins';
+
 .MessageList {
   flex: 1;
   width: 100%;
+  margin-bottom: .5rem;
+
   overflow-anchor: none;
   overflow: scroll;
   overflow-x: hidden;
-  overflow-y: overlay;
+  overflow-y: auto;
-  margin-bottom: .5rem;
+  @include overflow-y-overlay();
 
   .mask-image-enabled & {
     mask-image: linear-gradient(to top, transparent 0, #000 0.5rem);

src/components/middle/composer/Composer.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins';
+
 .Composer {
   align-items: flex-end;
 
@@ -442,9 +444,10 @@
   border-radius: var(--border-radius-messages);
   padding: 0.5rem 0;
   max-height: 15rem;
+
   overflow-x: hidden;
   overflow-y: auto;
-  overflow-y: overlay;
+  @include overflow-y-overlay();
 
   box-shadow: 0 1px 2px var(--color-default-shadow);
 

src/components/middle/composer/EmojiTooltip.scss

@@ -1,8 +1,11 @@
 .EmojiTooltip {
   display: flex;
   padding-left: .25rem;
+
   overflow-x: auto;
-  overflow-x: overlay;
+  @supports (overflow-x: overlay) {
+    overflow-x: overlay;
+  }
   overflow-y: hidden;
 
   .EmojiButton {

src/components/right/Profile.scss

@@ -1,9 +1,13 @@
+@import '../../styles/mixins';
+
 .Profile {
   height: 100%;
   display: flex;
   flex-direction: column;
-  overflow-y: scroll;
+
   overflow-x: hidden;
+  overflow-y: scroll;
+  @include overflow-y-overlay();
 
   > .profile-info > .ChatInfo {
     grid-area: chat_info;

src/components/ui/ListItem.scss

@@ -21,6 +21,12 @@
     }
   }
 
+  body.is-ios &, body.is-android & {
+    &:not(:last-of-type)::after {
+      transform: scaleY(0.5);
+    }
+  }
+
   .ListItem-button {
     width: 100%;
     background-color: var(--background-color);

src/styles/_common.scss

@@ -1,3 +1,5 @@
+@import './mixins';
+
 // Common styles for all media-type components across the app.
 .media-inner {
   position: relative;
@@ -67,9 +69,11 @@
 .chat-list {
   background: var(--color-background);
   height: 100%;
-  overflow-y: auto;
   padding: .5rem .125rem .5rem .4375rem;
 
+  overflow-y: auto;
+  @include overflow-y-overlay();
+
   .scroll-container {
     position: relative;
   }

src/styles/_mixins.scss

@@ -4,3 +4,14 @@
     @content;
   }
 }
+
+@mixin overflow-y-overlay() {
+  @supports (overflow-y: overlay) {
+    body.is-android & {
+      overflow-y: overlay;
+
+      //Workaround for Android <= 9
+      overflow-x: hidden;
+    }
+  }
+}

src/util/captureEvents.ts

@@ -1,4 +1,4 @@
-import { IS_IOS, IS_TOUCH_ENV } from './environment';
+import { IS_IOS } from './environment';
 
 export enum SwipeDirection {
   Up,
@@ -104,7 +104,7 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
 
       captureEvent = undefined;
 
-      if (options.selectorToPreventScroll) {
+      if (IS_IOS && options.selectorToPreventScroll) {
         Array.from(document.querySelectorAll<HTMLElement>(options.selectorToPreventScroll)).forEach((scrollable) => {
           scrollable.style.overflow = '';
         });
@@ -155,12 +155,10 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
         shouldPreventScroll = hasSwiped;
       }
 
-      if (IS_TOUCH_ENV && shouldPreventScroll && options.selectorToPreventScroll) {
+      if (IS_IOS && shouldPreventScroll && options.selectorToPreventScroll) {
-        if (options.selectorToPreventScroll) {
+        Array.from(document.querySelectorAll<HTMLElement>(options.selectorToPreventScroll)).forEach((scrollable) => {
-          Array.from(document.querySelectorAll<HTMLElement>(options.selectorToPreventScroll)).forEach((scrollable) => {
+          scrollable.style.overflow = 'hidden';
-            scrollable.style.overflow = 'hidden';
+        });
-          });
-        }
       }
     }
   }