Fix button menu position in album orientation

src/components/misc.ts

@@ -205,8 +205,8 @@ export function openBtnMenu(menuElement: HTMLElement, onClose?: () => void) {
   window.addEventListener('contextmenu', onClick, {once: true});
 }
 
-const PADDING_TOP = 16;
-const PADDING_LEFT = 16;
+const PADDING_TOP = 8;
+const PADDING_LEFT = 8;
 export function positionMenu({clientX, clientY}: {clientX: number, clientY: number}/* e: MouseEvent */, elem: HTMLElement, side?: 'left' | 'right') {
   //let {clientX, clientY} = e;
 
@@ -231,12 +231,28 @@ export function positionMenu({clientX, clientY}: {clientX: number, clientY: numb
   let verticalSide: 'top' | 'bottom';
 
   if(side !== undefined) {
-    const left = clamp(side == 'right' ? clientX - scrollWidth : clientX, PADDING_LEFT, innerWidth - scrollWidth - PADDING_LEFT);
+    let left: number;
+    if(side === 'right') {
+      left = clientX - scrollWidth;
+      if(left < PADDING_LEFT) {
+        side = 'left';
+        left = Math.max(PADDING_LEFT, clientX);
+      }
+    } else {
+      left = Math.max(PADDING_LEFT, clientX);
+      if((clientX + scrollWidth) > (innerWidth - PADDING_LEFT)) {
+        side = 'right';
+        left = Math.max(clientX - scrollWidth, scrollWidth - PADDING_LEFT);
+      }
+    }
+
+    //const left = clamp(side == 'right' ? clientX - scrollWidth : clientX, PADDING_LEFT, innerWidth - scrollWidth - PADDING_LEFT);
     elem.style.left = left + 'px';
   }
   
   if((clientY + scrollHeight + PADDING_TOP) > innerHeight) {
-    elem.style.top = (clientY - scrollHeight) + 'px';
+    elem.style.top = Math.max(PADDING_TOP, clientY - scrollHeight) + 'px';
+    // elem.style.top = (innerHeight - scrollHeight - PADDING_TOP) + 'px';
     verticalSide = 'top';
   } else {
     elem.style.top = Math.max(PADDING_TOP, clientY) + 'px';

src/index.hbs

@@ -161,7 +161,6 @@
                     </ul>
                   </nav>
                 </div>
-                {{!-- <div class="tabs-container" id="folders-container" data-slider="none"> --}}
                 <div class="tabs-container" id="folders-container">
                   <div>
                     <ul id="dialogs"></ul>
@@ -394,13 +393,6 @@
             </div>
           </div>
         </div>
-        <div class="btn-menu" id="dialogs-contextmenu">
-          <div class="btn-menu-item menu-unread tgico rp"><div></div></div>
-          <div class="btn-menu-item menu-pin tgico rp"><div></div></div>
-          <div class="btn-menu-item menu-mute tgico rp"><div></div></div>
-          <div class="btn-menu-item menu-archive tgico rp"><div></div></div>
-          <div class="btn-menu-item menu-delete tgico-delete danger rp"><div></div></div>
-        </div>
       </div>
       <div class="chat-container main-column" id="column-center">
         {{!-- <canvas id="chat-background-canvas"></canvas> --}}
@@ -605,6 +597,13 @@
         </div>
       </div>
     </div>
+    <div class="btn-menu" id="dialogs-contextmenu">
+      <div class="btn-menu-item menu-unread tgico rp"><div></div></div>
+      <div class="btn-menu-item menu-pin tgico rp"><div></div></div>
+      <div class="btn-menu-item menu-mute tgico rp"><div></div></div>
+      <div class="btn-menu-item menu-archive tgico rp"><div></div></div>
+      <div class="btn-menu-item menu-delete tgico-delete danger rp"><div></div></div>
+    </div>
   </div>
   {{# each htmlWebpackPlugin.files.js }}
     <script src="{{ this }}"></script>

src/lib/appManagers/appImManager.ts

@@ -2320,6 +2320,8 @@ export class AppImManager {
             nameDiv.style.color = appPeersManager.getPeerColorByID(message.fwdFromID, false);
             nameDiv.innerHTML = title;
           } else {
+            /* const fromTitle = message.fromID == this.myID || appPeersManager.isBroadcast(message.fwdFromID || message.fromID) ? '' : `<div class="name" data-peer-i-d="${message.fromID}" style="color: ${appPeersManager.getPeerColorByID(message.fromID, false)};">${appPeersManager.getPeerTitle(message.fromID)}</div>`;
+            nameDiv.innerHTML = fromTitle + 'Forwarded from ' + title; */
             nameDiv.innerHTML = 'Forwarded from ' + title;
           }
           

src/scss/partials/_button.scss

@@ -59,7 +59,6 @@
   box-shadow: 0 5px 8px 1px rgba(0, 0, 0, .24);
   z-index: 3;
   top: 100%;
-  margin-top: 8px;
   padding: 9px 0;
   border-radius: $border-radius-medium;
   opacity: 0;
@@ -242,6 +241,10 @@
   &:not(.btn-primary).menu-open {
     background-color: var(--color-gray-hover);
   }
+
+  .btn-menu {
+    margin-top: .5rem;
+  }
 }
 
 .btn-circle {

src/scss/partials/_chat.scss

@@ -5,13 +5,13 @@ $chat-padding: 1rem;
 $chat-padding-handhelds: .5rem;
 $chat-helper-size: 39px;
 
-#bubble-contextmenu > div {
+/* #bubble-contextmenu > div {
 	padding: 0 5.25 0 1rem;
 
 	@include respond-to(handhelds) {
 		padding: 0 3.75rem 0 1rem;
 	}
-}
+} */
 
 #topbar {
 	width: 100%;

src/scss/partials/_chatBubble.scss

@@ -1168,9 +1168,13 @@ $bubble-margin: .25rem;
     //white-space: nowrap;
   }
 
+  &:not(.is-group-first) .bubble__container > .name .name {
+    display: none;
+  }
+  
   &:not(.webpage) {
     &.photo, &.video {
-      .name {
+      .bubble__container > .name {
         //padding-bottom: .2675rem;
         padding-bottom: 6px;
       }

src/scss/partials/pages/_chats.scss

@@ -9,7 +9,9 @@
     }
   }
 
-  > div {
+  #main-columns {
+    width: 100%;
+    overflow: hidden;
     position: relative;
     min-height: 100%;
 
@@ -19,11 +21,6 @@
     //}
   }
 
-  #main-columns {
-    width: 100%;
-    overflow: hidden;
-  }
-
   @include respond-to(handhelds) {
     .main-column {
       width: 100%;