Fix floating name and reply layout

Ignore reply mid when forwarding messages

src/components/chat/bubbles.ts

@@ -4521,8 +4521,9 @@ export default class ChatBubbles {
         title = new PeerTitle({peerId: fwdFromId || message.fromId, withPremiumIcon: !isForward, middleware}).element;
       }
 
+      let replyContainer: HTMLElement;
       if(message.reply_to_mid && message.reply_to_mid !== this.chat.threadId && isMessage) {
-        await MessageRender.setReply({
+        replyContainer = await MessageRender.setReply({
           chat: this.chat,
           bubble,
           bubbleContainer,
@@ -4555,7 +4556,9 @@ export default class ChatBubbles {
           nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
           const args: FormatterArguments = [title];
           if(isStandaloneMedia) {
-            args.unshift(document.createElement('br'));
+            const br = document.createElement('br');
+            br.classList.add('hide-ol');
+            args.unshift(br);
           }
           nameDiv.append(i18n('ForwardedFrom', [args]));
         }
@@ -4597,7 +4600,21 @@ export default class ChatBubbles {
 
       if(nameDiv) {
         nameDiv.classList.add('name');
+
+        if(isStandaloneMedia) {
+          nameContainer.append(nameContainer = document.createElement('div'));
+          nameContainer.classList.add('name-with-reply', 'floating-part');
+        } else {
+          nameDiv.classList.add('floating-part');
+        }
+
         nameContainer.append(nameDiv);
+
+        if(isStandaloneMedia && replyContainer) {
+          nameContainer.append(replyContainer);
+        }
+      } else if(isStandaloneMedia && replyContainer) {
+        replyContainer.classList.add('floating-part');
       }
     } else {
       bubble.classList.add('hide-name');

src/components/chat/messageRender.ts

@@ -170,9 +170,7 @@ export namespace MessageRender {
 
     const currentReplyDiv = isReplacing ? bubbleContainer.querySelector('.reply') : null;
     if(!message.reply_to_mid) {
-      if(currentReplyDiv) {
-        currentReplyDiv.remove();
-      }
+      currentReplyDiv?.remove();
 
       bubble.classList.remove('is-reply');
       return;
@@ -208,11 +206,16 @@ export namespace MessageRender {
     const {container, fillPromise} = wrapReply(originalPeerTitle, undefined, chat.animationGroup, originalMessage, chat.isAnyGroup ? titlePeerId : undefined);
     await fillPromise;
     if(currentReplyDiv) {
+      if(currentReplyDiv.classList.contains('floating-part')) {
+        container.classList.add('floating-part');
+      }
       currentReplyDiv.replaceWith(container);
     } else {
       bubbleContainer.append(container);
     }
     // bubbleContainer.insertBefore(, nameContainer);
     bubble.classList.add('is-reply');
+
+    return container;
   };
 }

src/lib/appManagers/appMessagesManager.ts

@@ -1991,7 +1991,12 @@ export class AppMessagesManager extends AppManager {
     dropAuthor: boolean,
     dropCaptions: boolean,
     sendAsPeerId: PeerId,
+    replyToMsgId?: number,  // will be ignored
+    threadId?: number       // will be ignored
   }> = {}) {
+    delete options.replyToMsgId;
+    delete options.threadId;
+
     peerId = this.appPeersManager.getPeerMigratedTo(peerId) || peerId;
     mids = mids.slice().sort((a, b) => a - b);
 

src/scss/partials/_chatBubble.scss

@@ -1259,9 +1259,8 @@ $bubble-border-radius-big: 12px;
   }
 
   &.just-media {
-    .reply, 
-    .name {
-      padding: 10px;
+    .floating-part {
+      padding: .3125rem .625rem;
       border-radius: 12px;
       position: absolute;
       top: 0;
@@ -2289,6 +2288,25 @@ $bubble-border-radius-big: 12px;
       border-bottom-right-radius: $bubble-border-radius-medium !important;
     }
   }
+
+  .name-with-reply {
+    .name {
+      padding: 0 !important;
+
+      &:not(:last-child) {
+        .hide-ol {
+          display: none;
+        }
+      }
+    }
+
+    .reply {
+      margin: .25rem 0 0;
+      padding: 0;
+      height: auto;
+      max-height: none;
+    }
+  }
 }
 
 // @keyframes arrow-shake {
@@ -2464,8 +2482,7 @@ $bubble-border-radius-big: 12px;
   }
 
   &.just-media {
-    .reply, 
-    .name {
+    .floating-part {
       left: calc(100% + 10px);
 
       @include respond-to(handhelds) {
@@ -2646,8 +2663,7 @@ $bubble-border-radius-big: 12px;
   }
 
   &.just-media {
-    .reply, 
-    .name {
+    .floating-part {
       right: calc(100% + 10px);
     }
 

src/scss/partials/_chatlist.scss

@@ -203,6 +203,10 @@ ul.chatlist {
       color: var(--primary-text-color);
     }
 
+    .premium-icon {
+      margin-top: -.125rem;
+    }
+
     &.menu-open {
       --background: var(--light-secondary-text-color);
     }
@@ -391,7 +395,7 @@ ul.chatlist {
 
     img.emoji {
       vertical-align: top;
-      margin-top: 4px;
+      margin-top: 1px;
       width: 18px;
       height: 18px;
     }