Fix showing pinned message on handhelds

src/components/chat/pinnedContainer.ts

@@ -6,7 +6,8 @@ import DivAndCaption from "../divAndCaption";
 import { ripple } from "../ripple";
 import ListenerSetter from "../../helpers/listenerSetter";
 
-const classNames: string[] = [];
+//const classNames: string[] = [];
+const classNames: string[] = ['is-pinned-message-shown', 'is-pinned-audio-shown'];
 const CLASSNAME_BASE = 'pinned-container';
 const HEIGHT = 52;
 
@@ -21,7 +22,7 @@ export default class PinnedContainer {
       prev(mid, title, subtitle);
     }; */
 
-    classNames.push(`is-pinned-${className}-shown`);
+    //classNames.push(`is-pinned-${className}-shown`);
 
     divAndCaption.container.classList.add(CLASSNAME_BASE, 'hide');
     divAndCaption.title.classList.add(CLASSNAME_BASE + '-title');
@@ -61,7 +62,9 @@ export default class PinnedContainer {
 
     this.divAndCaption.container.classList.toggle('is-floating', mediaSizes.isMobile);
 
-    const scrollTop = mediaSizes.isMobile /* && !appImManager.scrollable.isScrolledDown */ ? this.chat.bubbles.scrollable.scrollTop : undefined;
+    const scrollable = this.chat.bubbles.scrollable;
+
+    const scrollTop = mediaSizes.isMobile /* && !appImManager.scrollable.isScrolledDown */ ? scrollable.scrollTop : undefined;
     this.divAndCaption.container.classList.toggle('hide', hide);
     const className = `is-pinned-${this.className}-shown`;
     this.topbar.container.classList.toggle(className, !hide);
@@ -69,8 +72,8 @@ export default class PinnedContainer {
     const active = classNames.filter(className => this.topbar.container.classList.contains(className));
     const maxActive = hide ? 0 : 1;
     
-    if(scrollTop !== undefined && active.length <= maxActive) {
-      this.chat.bubbles.scrollable.scrollTop = scrollTop + ((hide ? -1 : 1) * HEIGHT);
+    if(scrollTop !== undefined && active.length <= maxActive/*  && !scrollable.isScrolledDown */) {
+      scrollable.scrollTop = scrollTop + ((hide ? -1 : 1) * HEIGHT);
     }
 
     this.topbar.setUtilsWidth();

src/components/chat/pinnedMessage.ts

@@ -11,6 +11,7 @@ import { cancelEvent, findUpClassName, getElementByPoint, handleScrollSideEvent
 import Chat from "./chat";
 import ListenerSetter from "../../helpers/listenerSetter";
 import ButtonIcon from "../buttonIcon";
+import { RIGHT_COLUMN_ACTIVE_CLASSNAME } from "../sidebarRight";
 
 class AnimatedSuper {
   static DURATION = 200;
@@ -293,6 +294,7 @@ export default class ChatPinnedMessage {
 
   public destroy() {
     this.pinnedMessageContainer.divAndCaption.container.remove();
+    this.pinnedMessageContainer.toggle(true);
     this.listenerSetter.removeAll();
     this.unsetScrollDownListener(false);
   }

src/components/chat/topbar.ts

@@ -127,7 +127,7 @@ export default class ChatTopbar {
         } else {
           const message = this.appMessagesManager.getMessage(mid);
   
-          this.chat.appImManager.setPeer(message.peerId, mid);
+          this.chat.appImManager.setInnerPeer(message.peerId, mid);
         }
       } else {
         this.appSidebarRight.toggleSidebar(true);
@@ -324,8 +324,6 @@ export default class ChatTopbar {
       this.avatarElement.update();
     }
 
-    this.container.classList.remove('is-pinned-shown');
-
     const isBroadcast = this.appPeersManager.isBroadcast(peerId);
 
     this.btnMute && this.btnMute.classList.toggle('hide', !isBroadcast);
@@ -338,6 +336,7 @@ export default class ChatTopbar {
         const newPinnedMessage = new ChatPinnedMessage(this, this.chat, this.appMessagesManager, this.appPeersManager);
         this.pinnedMessage.pinnedMessageContainer.divAndCaption.container.replaceWith(newPinnedMessage.pinnedMessageContainer.divAndCaption.container);
         this.pinnedMessage.destroy();
+        //this.pinnedMessage.pinnedMessageContainer.toggle(true);
         this.pinnedMessage = newPinnedMessage;
       }
       

src/scss/partials/_chatTopbar.scss

@@ -10,9 +10,10 @@
 
 	@include respond-to(handhelds) {
 		&.is-pinned-audio-shown, &.is-pinned-message-shown:not(.hide-pinned) {
-			& + .bubbles {
+			margin-bottom: 52px;
+			/* & + .bubbles {
 				margin-top: 52px;
-			}
+			} */
 		}
 
 		&.is-pinned-message-shown:not(.hide-pinned):not(.is-pinned-audio-shown) {