From d092c647590c204cf7edf2c56b590dab8c3dc783 Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Mon, 23 Nov 2020 17:49:36 +0200
Subject: [PATCH] Fix album multiselect overflow

---
 src/lib/appManagers/appImManager.ts |  2 +-
 src/scss/partials/_chatBubble.scss  | 86 ++++++++++++++++-------------
 2 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts
index ff859828..d5df696a 100644
--- a/src/lib/appManagers/appImManager.ts
+++ b/src/lib/appManagers/appImManager.ts
@@ -2078,7 +2078,6 @@ export class AppImManager {
           
           bubble.classList.add('hide-name', 'photo');
           const tailSupported = !isAndroid;
-          if(tailSupported) bubble.classList.add('with-media-tail');
 
           const storage = appMessagesManager.groupedMessagesStorage[message.grouped_id];
           if(message.grouped_id && Object.keys(storage).length != 1) {
@@ -2094,6 +2093,7 @@ export class AppImManager {
             break;
           }
 
+          if(tailSupported) bubble.classList.add('with-media-tail');
           wrapPhoto(photo, message, attachmentDiv, undefined, undefined, tailSupported, isOut, this.lazyLoadQueue, this.getMiddleware());
 
           break;
diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss
index 1581b4a6..7aa20436 100644
--- a/src/scss/partials/_chatBubble.scss
+++ b/src/scss/partials/_chatBubble.scss
@@ -230,7 +230,7 @@ $bubble-margin: .25rem;
     }
   }
 
-  #bubbles.is-selecting & {
+  #bubbles.is-selecting &:not(.is-album) {
     .audio, .document, .attachment, poll-element {
       pointer-events: none !important;
     }
@@ -560,6 +560,8 @@ $bubble-margin: .25rem;
     border-radius: inherit;
     overflow: hidden;
     user-select: none;
+
+    //-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
     
     display: flex; // lol
     justify-content: center;
@@ -628,50 +630,58 @@ $bubble-margin: .25rem;
     .attachment {
       max-width: unquote('min(451px, 100%)');
       max-height: none;
+      //overflow: hidden;
+    }
+  }
 
-      .album-item {
-        background-color: lighten($color-blue, 35%);
-        max-width: 100%;
-        cursor: pointer;
-        position: absolute;
-        overflow: hidden;
+  .album-item {
+    background-color: lighten($color-blue, 35%);
+    max-width: 100%;
+    cursor: pointer;
+    position: absolute;
+    overflow: hidden;
 
-        img, video {
-          border-radius: inherit;
-        }
+    /* #bubbles.is-selecting & {
+      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
+    } */
 
-        .bubble-select-checkbox {
-          bottom: auto !important;
-          left: auto;
-          right: .25rem;
-          top: .25rem;
-        }
+    img, video {
+      border-radius: inherit;
+    }
 
-        &.is-selected {
-          border-radius: 0;
-          
-          .album-item-media {
-            transform: scale(1);
-            border-radius: 0;
-          }
+    &-media { // * fix overflow for handhelds
+      border-radius: inherit;
+    }
 
-          &.animating {
-            transition: border-radius var(--layer-transition);
+    .bubble-select-checkbox {
+      bottom: auto !important;
+      left: auto;
+      right: .25rem;
+      top: .25rem;
+    }
 
-            .album-item-media {
-              transition: transform var(--layer-transition), border-radius var(--layer-transition);
-            }
-          }
+    &.is-selected {
+      border-radius: 0;
+      
+      .album-item-media {
+        transform: scale(1);
+      }
 
-          &:not(.backwards) {
-            .album-item-media {
-              transform: scale(.925);
-            }
+      &.animating {
+        transition: border-radius var(--layer-transition);
 
-            &, .album-item-media {
-              border-radius: .5rem;
-            }
-          }
+        .album-item-media {
+          transition: transform var(--layer-transition), border-radius var(--layer-transition);
+        }
+      }
+
+      &:not(.backwards) {
+        .album-item-media {
+          transform: scale(.925);
+        }
+
+        &, .album-item-media {
+          border-radius: .5rem;
         }
       }
     }
@@ -1204,7 +1214,7 @@ $bubble-margin: .25rem;
     }
   }
 
-  &:not(.webpage):not(.is-album):not(.sticker):not(.round):not(.emoji-big) .attachment, .album-item {
+  &:not(.webpage):not(.is-album):not(.sticker):not(.round):not(.emoji-big) .attachment {
     background-color: #000;
   }