Fix 'Send as...' layout

src/components/chat/input.ts

@@ -515,6 +515,7 @@ export default class ChatInput {
 
     sendAsButtons[0].element.classList.add('btn-menu-item-header');
     this.sendAsBtnMenu = this.sendAsContainer.firstElementChild as any;
+    this.sendAsBtnMenu.classList.add('scrollable', 'scrollable-y');
     this.sendAsContainer.append(this.sendAsCloseBtn);
 
     this.btnToggleEmoticons = ButtonIcon('none toggle-emoticons', {noRipple: true});

src/scss/partials/_button.scss

@@ -101,7 +101,7 @@
   padding: .5rem 0;
   border-radius: $border-radius-medium;
   opacity: 0;
-  transform: scale(.8);
+  transform: scale(.8) !important;
   transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition);
   font-size: 1rem;
 
@@ -120,7 +120,7 @@
   &.active {
     visibility: visible;
     opacity: 1;
-    transform: scale3d(1, 1, 1); // * scale3d (NOT scale) will fix jumping text
+    transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text
   }
 
   &:not(.active) {
@@ -208,6 +208,10 @@
       position: relative;
     }
 
+    &-icon {
+      flex: 0 0 auto;
+    }
+
     @include respond-to(handhelds) {
       --padding-right: 1.875rem;
     }

src/scss/partials/_chat.scss

@@ -738,6 +738,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
 	--padding-vertical: .3125rem;
 	--padding-horizontal: var(--chat-input-inner-padding);
 	--padding: var(--padding-vertical) var(--padding-horizontal);
+  --button-size: 2.125rem;
+  --button-horizontal-margin: .125rem;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
@@ -1162,8 +1164,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
 	}
 
 	.new-message-wrapper {
-    --button-size: 2.125rem;
-    --button-horizontal-margin: .125rem;
     --send-as-size: 1.875rem;
     --send-as-margin-left: .25rem;
     --send-as-margin-right: .375rem;
@@ -1180,24 +1180,43 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
         position: absolute;
         flex: 0 0 auto;
         // margin: 0 0.375rem .4375rem var(--send-as-margin-left);
-        margin: 0 0 .4375rem var(--send-as-margin-left);
+        margin-left: var(--send-as-margin-left);
+        bottom: calc(var(--padding-vertical) + .4375rem);
         cursor: pointer;
         transform: scale(0);
         background: none !important;
+        z-index: 2;
+
+        .btn-menu {
+          max-height: 20rem;
+          max-width: 20rem;
+          top: auto;
+          right: auto;
+          left: calc(var(--padding-horizontal) * -1 - .25rem) !important;
+          width: auto;
+          height: auto;
+          transform: scale3d(1, 1, 1);
+
+          &-item {
+            &-icon {
+              margin-right: calc(var(--icon-margin) - .5rem);
+
+              &.active:before {
+                --offset: -.25rem;
+                content: " ";
+                position: absolute;
+                top: var(--offset);
+                right: var(--offset);
+                bottom: var(--offset);
+                left: var(--offset);
+                border: .125rem solid var(--primary-color);
+                border-radius: 50%;
+              }
+            }
 
-        .btn-menu-item-icon {
+            &-text {
-          margin-right: calc(var(--icon-margin) - .5rem);
+              @include text-overflow();
-
+            }
-          &.active:before {
-            --offset: -.25rem;
-            content: " ";
-            position: absolute;
-            top: var(--offset);
-            right: var(--offset);
-            bottom: var(--offset);
-            left: var(--offset);
-            border: .125rem solid var(--primary-color);
-            border-radius: 50%;
           }
         }
       }
@@ -1206,6 +1225,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
         position: absolute;
         transform: scale(0);
         opacity: 0;
+        pointer-events: none;
 
         &.is-visible {
           &:not(.backwards) {