Fix album multiselect overflow

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;

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;
     }
@@ -561,6 +561,8 @@ $bubble-margin: .25rem;
     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;
     position: relative;
@@ -628,50 +630,58 @@ $bubble-margin: .25rem;
     .attachment {
       max-width: unquote('min(451px, 100%)');
       max-height: none;
+      //overflow: hidden;
+    }
+  }
 
-      .album-item {
+  .album-item {
-        background-color: lighten($color-blue, 35%);
+    background-color: lighten($color-blue, 35%);
-        max-width: 100%;
+    max-width: 100%;
-        cursor: pointer;
+    cursor: pointer;
-        position: absolute;
+    position: absolute;
-        overflow: hidden;
+    overflow: hidden;
 
-        img, video {
+    /* #bubbles.is-selecting & {
-          border-radius: inherit;
+      -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
-        }
+    } */
 
-        .bubble-select-checkbox {
+    img, video {
-          bottom: auto !important;
+      border-radius: inherit;
-          left: auto;
+    }
-          right: .25rem;
-          top: .25rem;
-        }
 
-        &.is-selected {
+    &-media { // * fix overflow for handhelds
-          border-radius: 0;
+      border-radius: inherit;
+    }
 
-          .album-item-media {
+    .bubble-select-checkbox {
-            transform: scale(1);
+      bottom: auto !important;
-            border-radius: 0;
+      left: auto;
-          }
+      right: .25rem;
+      top: .25rem;
+    }
+
+    &.is-selected {
+      border-radius: 0;
+      
+      .album-item-media {
+        transform: scale(1);
+      }
 
-          &.animating {
+      &.animating {
-            transition: border-radius var(--layer-transition);
+        transition: border-radius var(--layer-transition);
 
-            .album-item-media {
+        .album-item-media {
-              transition: transform var(--layer-transition), border-radius var(--layer-transition);
+          transition: transform var(--layer-transition), border-radius var(--layer-transition);
-            }
+        }
-          }
+      }
 
-          &:not(.backwards) {
+      &:not(.backwards) {
-            .album-item-media {
+        .album-item-media {
-              transform: scale(.925);
+          transform: scale(.925);
-            }
+        }
 
-            &, .album-item-media {
+        &, .album-item-media {
-              border-radius: .5rem;
+          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;
   }