Fix topbar overflow

Topbar pinned & audio ripple

src/components/chat/audio.ts

@@ -23,14 +23,14 @@ export class ChatAudio extends PinnedContainer {
 
     this.divAndCaption.border.remove();
 
-    this.toggleEl = document.createElement('div');
+    this.toggleEl = document.createElement('button');
-    this.toggleEl.classList.add('pinned-audio-ico', 'tgico');
+    this.toggleEl.classList.add('pinned-audio-ico', 'tgico', 'btn-icon');
     this.toggleEl.addEventListener('click', (e) => {
       cancelEvent(e);
       appMediaPlaybackController.toggle();
     });
 
-    this.divAndCaption.container.prepend(this.toggleEl);
+    this.wrapper.prepend(this.toggleEl);
 
     $rootScope.$on('audio_play', (e) => {
       const {doc, mid} = e.detail;

src/components/chat/pinnedContainer.ts

@@ -2,6 +2,7 @@ import mediaSizes from "../../helpers/mediaSizes";
 import appImManager from "../../lib/appManagers/appImManager";
 import { cancelEvent } from "../../lib/utils";
 import DivAndCaption from "../divAndCaption";
+import { ripple } from "../ripple";
 
 const classNames: string[] = [];
 const CLASSNAME_BASE = 'pinned-container';
@@ -9,6 +10,7 @@ const HEIGHT = 52;
 
 export default class PinnedContainer {
   private close: HTMLElement;
+  protected wrapper: HTMLElement;
 
   constructor(protected className: string, public divAndCaption: DivAndCaption<(title: string, subtitle: string, message?: any) => void>, onClose?: () => void | Promise<boolean>) {
     /* const prev = this.divAndCaption.fill;
@@ -22,11 +24,19 @@ export default class PinnedContainer {
     divAndCaption.container.classList.add(CLASSNAME_BASE, 'hide');
     divAndCaption.title.classList.add(CLASSNAME_BASE + '-title');
     divAndCaption.subtitle.classList.add(CLASSNAME_BASE + '-subtitle');
+    divAndCaption.content.classList.add(CLASSNAME_BASE + '-content');
 
     this.close = document.createElement('button');
     this.close.classList.add(CLASSNAME_BASE + '-close', `pinned-${className}-close`, 'btn-icon', 'tgico-close');
 
-    divAndCaption.container.append(this.close);
+    //divAndCaption.container.prepend(this.close);
+
+    this.wrapper = document.createElement('div');
+    this.wrapper.classList.add(CLASSNAME_BASE + '-wrapper');
+    this.wrapper.append(...Array.from(divAndCaption.container.children));
+    ripple(this.wrapper);
+    
+    divAndCaption.container.append(this.close, this.wrapper);
 
     this.close.addEventListener('click', (e) => {
       cancelEvent(e);
@@ -47,6 +57,8 @@ export default class PinnedContainer {
       return;
     }
 
+    this.divAndCaption.container.classList.toggle('is-floating', mediaSizes.isMobile);
+
     const scrollTop = mediaSizes.isMobile /* && !appImManager.scrollable.isScrolledDown */ ? appImManager.scrollable.scrollTop : undefined;
     this.divAndCaption.container.classList.toggle('hide', hide);
     const className = `is-pinned-${this.className}-shown`;

src/components/sidebarRight/index.ts

@@ -55,7 +55,7 @@ export class AppSidebarRight extends SidebarSlider {
     this.gifsTab = gifsTab;
 
     mediaSizes.addListener('changeScreen', (from, to) => {
-      if(from !== undefined && to == ScreenSize.medium && from !== ScreenSize.mobile) {
+      if(to == ScreenSize.medium && from !== ScreenSize.mobile) {
         this.toggleSidebar(false);
       }
     });

src/components/sidebarRight/tabs/sharedMedia.ts

@@ -315,7 +315,7 @@ export default class AppSharedMediaTab implements SliderTab {
 
       case 'inputMessagesFilterDocument': {
         for(let message of messages) {
-          if(!message.media.document || ['voice', 'audio', 'gif', 'sticker'].includes(message.media.document.type)) {
+          if(!message.media.document || ['voice', 'audio', 'gif', 'sticker', 'round'].includes(message.media.document.type)) {
             continue;
           }
           

src/lib/appManagers/appImManager.ts

@@ -28,7 +28,7 @@ import appSidebarLeft from "../../components/sidebarLeft";
 import appSidebarRight, { AppSidebarRight, RIGHT_COLUMN_ACTIVE_CLASSNAME } from '../../components/sidebarRight';
 import StickyIntersector from '../../components/stickyIntersector';
 import { wrapAlbum, wrapDocument, wrapPhoto, wrapPoll, wrapReply, wrapSticker, wrapVideo } from '../../components/wrappers';
-import mediaSizes from '../../helpers/mediaSizes';
+import mediaSizes, { ScreenSize } from '../../helpers/mediaSizes';
 import { isTouchSupported } from '../../helpers/touchSupport';
 import { isAndroid, isApple, isSafari } from '../../helpers/userAgent';
 import { InputNotifyPeer, InputPeerNotifySettings, NotifyPeer, Update } from '../../layer';
@@ -178,8 +178,44 @@ export class AppImManager {
 
     this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */);
     
+    const chatUtils = this.chatInfo.nextElementSibling;
     this.chatAudio = new ChatAudio();
-    this.chatInfo.nextElementSibling.prepend(this.chatAudio.divAndCaption.container);
+    chatUtils.prepend(this.chatAudio.divAndCaption.container);
+
+    // * fix topbar overflow section
+
+    const setUtilsWidth = () => {
+      this.log('utils width:', chatUtils.scrollWidth);
+      this.chatInfo.style.setProperty('--utils-width', chatUtils.scrollWidth + 'px');
+    };
+
+    let mutationRAF: number;
+    const mutationObserver = new MutationObserver((mutationList) => {
+      if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
+      //mutationRAF = window.setTimeout(() => {
+      mutationRAF = window.requestAnimationFrame(() => {
+        //mutationRAF = window.requestAnimationFrame(() => {
+          setUtilsWidth();
+        //});
+      });
+      //}, 64);
+    });
+    
+    mutationObserver.observe(chatUtils, {
+      attributes: true,
+      childList: true,
+      subtree: true
+    });
+
+    mediaSizes.addListener('changeScreen', (from, to) => {
+      setUtilsWidth();
+
+      this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile);
+      this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile 
+        /* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
+    });
+
+    // * fix topbar overflow section end
 
     this.pinnedMessageContainer = new PinnedContainer('message', new ReplyContainer('pinned-message'), () => {
       if(appPeersManager.canPinMessage(this.peerID)) {
@@ -2505,7 +2541,7 @@ export class AppImManager {
           if(message.grouped_id) additionMsgIDs.splice(i, 1);
         }
 
-        maxID = additionMsgIDs[additionMsgIDs.length - 1];
+        maxID = additionMsgIDs[additionMsgIDs.length - 1] || maxID;
       }
     }
 

src/scss/partials/_chat.scss

@@ -101,27 +101,11 @@ $chat-helper-size: 39px;
 		flex: 1 1 auto;
 		overflow: hidden;
 
+		max-width: calc(100% - var(--utils-width));
+
 		@include respond-to(medium-screens) {
 			body.is-right-column-shown & {
-				max-width: calc(100% - var(--right-column-width) * 1.6);
+				max-width: calc(100% - var(--right-column-width) - var(--utils-width));
-			}
-		}
-	}
-
-	@include respond-to(medium-screens) {
-		&.is-pinned-message-shown {
-			body.is-right-column-shown & {
-				.chat-info {
-					max-width: calc(100% - var(--right-column-width) * 1.75);
-				}
-			}
-
-			&.is-pinned-audio-shown {
-				body.is-right-column-shown & {
-					.chat-info {
-						max-width: calc(100% - var(--right-column-width) * 2.25);
-					}
-				}
 			}
 		}
 	}
@@ -162,10 +146,6 @@ $chat-helper-size: 39px;
 		padding-left: 10px;
 		max-width: 100%;
 		overflow: hidden;
-
-    @include respond-to(handhelds) {
-			max-width: 208px;
-    }
 	}
 	
 	.person {
@@ -609,10 +589,7 @@ $chat-helper-size: 39px;
 	cursor: pointer;
 	font-size: 18px;
 	line-height: 24px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
 	max-width: calc(100% - 1.5rem);
-	overflow: hidden;
 
 	/* @include respond-to(handhelds) {
 		text-overflow: ellipsis;
@@ -625,7 +602,13 @@ $chat-helper-size: 39px;
 	}
 }
 
-.info#im-subtitle {
+#im-title, #im-subtitle {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
+#im-subtitle {
 	margin-top: -2px;
 }
 
@@ -696,31 +679,6 @@ $chat-helper-size: 39px;
 		}
 	}
 
-	@include respond-to(handhelds) {
-		.pinned-message {
-			position: absolute !important;
-			top: 100%;
-			width: 100% !important;
-			background: #fff !important;
-			left: 0;
-			// border-top: 1px solid #ccc;
-			max-height: 100% !important;
-			// height: 100%;
-			height: 52px;
-			padding: 1rem;
-
-			&-subtitle {
-				max-width: 280px;
-			}
-		}
-
-		/* .pinned-message, .reply {
-			&-subtitle {
-				line-height: 16px !important;
-			}
-		} */
-	}
-
 	.pinned-message, .reply {
 		cursor: pointer;
 		display: flex;
@@ -728,10 +686,10 @@ $chat-helper-size: 39px;
 		align-items: center;
 		overflow: hidden;
 		box-sizing: border-box;
-		width: 187px;
 		margin-right: 1rem;
 		max-height: 35px;
 		position: relative;
+		user-select: none;
 		/* padding: .25rem; */
 
 		&.is-media {
@@ -744,10 +702,6 @@ $chat-helper-size: 39px;
 			}
 		}
 		
-		html.no-touch &:hover {
-			background-color: var(--color-gray-hover);
-		}
-		
 		&-border {
 			height: 2rem;
 			border-radius: 1px;
@@ -837,12 +791,9 @@ $chat-helper-size: 39px;
 		} */
 	}
 
-	.pinned-message {
+	.reply {
-		display: none;
+		html.no-touch &:hover {
-
+			background-color: var(--color-gray-hover);
-		&-close {
-			visibility: visible !important;
-			left: -3rem;
 		}
 	}
 
@@ -850,6 +801,28 @@ $chat-helper-size: 39px;
 		flex: 0 0 auto;
 		overflow: visible;
 
+		&.is-floating {
+			position: absolute !important;
+			top: 100%;
+			width: 100% !important;
+			background: #fff !important;
+			left: 0;
+			max-height: 100% !important;
+			height: 52px;
+
+			.pinned-container-close {
+				position: absolute;
+				font-size: 1.4rem;
+				right: 9px;
+				display: flex;
+			}
+
+			.pinned-container-wrapper {
+				padding: 0 1rem;
+				height: 100%;
+			}
+		}
+
 		@include respond-to(handhelds) {
 			box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
 
@@ -865,27 +838,53 @@ $chat-helper-size: 39px;
 			}
 		}
 
+		&-content {
+			width: 100%;
+			overflow: hidden;
+		}
+
 		&-close, .pinned-audio-ico {
 			font-size: 1.5rem;
-			position: absolute;
 			display: flex;
 			justify-content: center;
-			right: 0;
+			z-index: 1;
+			flex: 0 0 auto;
 		}
 
 		&-close {
-			visibility: hidden;
+			display: none;
-			//left: -3rem;
+		}
 
-			@include respond-to(handhelds) {
+		&-wrapper {
-				font-size: 1.4rem;
+			display: flex;
-				right: 9px;
+			flex: 1 1 auto;
-				left: auto;
+			overflow: hidden;
-				visibility: visible;
+			align-items: center;
+			padding: .25rem;
+			border-radius: 4px;
+
+			html.no-touch &:hover {
+				background-color: var(--color-gray-hover);
 			}
 		}
 	}
 
+	.pinned-message {
+		display: none;
+		width: auto;
+
+		&:not(.is-floating) {
+			.pinned-message-close {
+				display: flex;
+				margin-right: .75rem;
+			}
+		}
+
+		&.is-floating .pinned-message-subtitle {
+			max-width: 280px;
+		}
+	}
+
 	.pinned-audio {
 		display: flex;
     flex-direction: column;
@@ -893,32 +892,19 @@ $chat-helper-size: 39px;
     cursor: pointer;
 		//width: 210px;
 
-		@include respond-to(handhelds) {
+		&:not(.is-floating) {
-			height: 52px;
+			padding-right: 1.75rem;
-			
-			padding-left: 58px;
-			background: #fff;
-			width: 100%;
-			position: absolute;
-			left: 0;
-			top: 100%;
-		}
-
-		@include respond-to(not-handhelds) {
-			padding-left: 2.5rem;
-			padding-right: 2.5rem;
 			max-width: 210px;
 			position: relative;
 		}
-		
-		&-ico {
-			left: 0;
-			right: auto !important;
-			color: #50a2e9;
 
-			@include respond-to(handhelds) {
+		&.is-floating .pinned-audio-ico {
-				margin-left: 20px;
+			margin-left: -.25rem;
-			}
+		}
+
+		&-ico {
+			color: #50a2e9;
+			margin-right: .375rem;
 
 			&:before {
 				content: $tgico-largeplay;