Fix context menu on Android

Fix scroll on Android
Fix propagation to documents loader on selecting
Disable zoom on handhelds

src/components/chat/bubbles.ts

@@ -3,7 +3,7 @@ import type { AppMessagesManager, Dialog, HistoryResult } from "../../lib/appMan
 import type { AppSidebarRight } from "../sidebarRight";
 import type { AppStickersManager } from "../../lib/appManagers/appStickersManager";
 import type { AppUsersManager } from "../../lib/appManagers/appUsersManager";
-import type { AppInlineBotsManager } from "../../lib/appManagers/AppInlineBotsManager";
+import type { AppInlineBotsManager } from "../../lib/appManagers/appInlineBotsManager";
 import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager";
 import type { AppDocsManager } from "../../lib/appManagers/appDocsManager";
 import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
@@ -345,7 +345,63 @@ export default class ChatBubbles {
       }
     });
 
-    this.listenerSetter.add(this.bubblesContainer, 'click', (e) => {
+    this.listenerSetter.add(this.bubblesContainer, 'click', this.onBubblesClick/* , {capture: true, passive: false} */);
+    
+    this.stickyIntersector = new StickyIntersector(this.scrollable.container, (stuck, target) => {
+      for(const timestamp in this.dateMessages) {
+        const dateMessage = this.dateMessages[timestamp];
+        if(dateMessage.container == target) {
+          dateMessage.div.classList.toggle('is-sticky', stuck);
+          break;
+        }
+      }
+    });
+
+    this.unreadedObserver = new IntersectionObserver((entries) => {
+      if(this.chat.appImManager.offline) { // ! but you can scroll the page without triggering 'focus', need something now
+        return;
+      }
+
+      const readed: number[] = [];
+    
+      entries.forEach(entry => {
+        if(entry.isIntersecting) {
+          const target = entry.target as HTMLElement;
+          const mid = +target.dataset.mid;
+          readed.push(mid);
+          this.unreadedObserver.unobserve(target);
+          this.unreaded.findAndSplice(id => id == mid);
+        }
+      });
+
+      if(readed.length) {
+        const max = Math.max(...readed);
+
+        let length = readed.length;
+        for(let i = this.unreaded.length - 1; i >= 0; --i) {
+          const mid = this.unreaded[i];
+          if(mid < max) {
+            length++;
+            this.unreaded.splice(i, 1);
+          }
+        }
+
+        this.log('will readHistory by ids:', max, length);
+        
+        /* if(this.peerId < 0) {
+          max = appMessagesIDsManager.getMessageIdInfo(max)[0];
+        } */
+
+        //appMessagesManager.readMessages(readed);
+        /* false && */ appMessagesManager.readHistory(this.peerId, max).catch((err: any) => {
+          this.log.error('readHistory err:', err);
+          appMessagesManager.readHistory(this.peerId, max);
+        });
+      }
+    });
+  }
+
+  public onBubblesClick = (e: Event) => {
     let target = e.target as HTMLElement;
     let bubble: HTMLElement = null;
     try {
@@ -407,7 +463,7 @@ export default class ChatBubbles {
 
     if(bubble.classList.contains('sticker') && target.parentElement.classList.contains('attachment')) {
       const messageId = +bubble.dataset.mid;
-        const message = appMessagesManager.getMessage(messageId);
+      const message = this.appMessagesManager.getMessage(messageId);
 
       const doc = message.media?.document;
 
@@ -423,7 +479,7 @@ export default class ChatBubbles {
       || isVideoComponentElement
       || (target.tagName == 'VIDEO' && !bubble.classList.contains('round'))) {
       let messageId = +findUpClassName(target, 'album-item')?.dataset.mid || +bubble.dataset.mid;
-        let message = appMessagesManager.getMessage(messageId);
+      let message = this.appMessagesManager.getMessage(messageId);
       if(!message) {
         this.log.warn('no message by messageId:', messageId);
         return;
@@ -433,7 +489,7 @@ export default class ChatBubbles {
       let ids = Object.keys(this.bubbles).map(k => +k).filter(id => {
         //if(!this.scrollable.visibleElements.find(e => e.element == this.bubbles[id])) return false;
 
-          let message = appMessagesManager.getMessage(id);
+        let message = this.appMessagesManager.getMessage(id);
         
         return message.media && (message.media.photo || (message.media.document && (message.media.document.type == 'video' || message.media.document.type == 'gif')) || (message.media.webpage && (message.media.webpage.document || message.media.webpage.photo)));
       }).sort((a, b) => a - b);
@@ -530,61 +586,7 @@ export default class ChatBubbles {
     }
     
     //console.log('chatInner click', e);
-    }, {capture: true, passive: false});
+  };
-    
-    this.stickyIntersector = new StickyIntersector(this.scrollable.container, (stuck, target) => {
-      for(const timestamp in this.dateMessages) {
-        const dateMessage = this.dateMessages[timestamp];
-        if(dateMessage.container == target) {
-          dateMessage.div.classList.toggle('is-sticky', stuck);
-          break;
-        }
-      }
-    });
-
-    this.unreadedObserver = new IntersectionObserver((entries) => {
-      if(this.chat.appImManager.offline) { // ! but you can scroll the page without triggering 'focus', need something now
-        return;
-      }
-
-      const readed: number[] = [];
-    
-      entries.forEach(entry => {
-        if(entry.isIntersecting) {
-          const target = entry.target as HTMLElement;
-          const mid = +target.dataset.mid;
-          readed.push(mid);
-          this.unreadedObserver.unobserve(target);
-          this.unreaded.findAndSplice(id => id == mid);
-        }
-      });
-
-      if(readed.length) {
-        const max = Math.max(...readed);
-
-        let length = readed.length;
-        for(let i = this.unreaded.length - 1; i >= 0; --i) {
-          const mid = this.unreaded[i];
-          if(mid < max) {
-            length++;
-            this.unreaded.splice(i, 1);
-          }
-        }
-
-        this.log('will readHistory by ids:', max, length);
-        
-        /* if(this.peerId < 0) {
-          max = appMessagesIDsManager.getMessageIdInfo(max)[0];
-        } */
-
-        //appMessagesManager.readMessages(readed);
-        /* false && */ appMessagesManager.readHistory(this.peerId, max).catch((err: any) => {
-          this.log.error('readHistory err:', err);
-          appMessagesManager.readHistory(this.peerId, max);
-        });
-      }
-    });
-  }
 
   public onGoDownClick() {
     if(this.replyFollowHistory.length) {

src/components/chat/chat.ts

@@ -1,7 +1,7 @@
 import type { AppChatsManager } from "../../lib/appManagers/appChatsManager";
 import type { AppDocsManager } from "../../lib/appManagers/appDocsManager";
 import type { AppImManager } from "../../lib/appManagers/appImManager";
-import type { AppInlineBotsManager } from "../../lib/appManagers/AppInlineBotsManager";
+import type { AppInlineBotsManager } from "../../lib/appManagers/appInlineBotsManager";
 import type { AppMessagesManager } from "../../lib/appManagers/appMessagesManager";
 import type { AppPeersManager } from "../../lib/appManagers/appPeersManager";
 import type { AppPhotosManager } from "../../lib/appManagers/appPhotosManager";

src/components/chat/contextMenu.ts

@@ -11,6 +11,7 @@ import PopupDeleteMessages from "../popupDeleteMessages";
 import PopupForward from "../popupForward";
 import PopupPinMessage from "../popupUnpinMessage";
 import { copyTextToClipboard } from "../../helpers/clipboard";
+import { isAppleMobile, isSafari } from "../../helpers/userAgent";
 
 export default class ChatContextMenu {
   private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true})[];
@@ -118,9 +119,12 @@ export default class ChatContextMenu {
 
         // * these two lines will fix instant text selection on iOS Safari
         document.body.classList.add('no-select'); // * need no-select on body because chat-input transforms in channels
-        attachTo.addEventListener('touchend', () => {
+        attachTo.addEventListener('touchend', (e) => {
+          cancelEvent(e); // ! this one will fix propagation to document loader button, etc
           document.body.classList.remove('no-select');
-        }, {once: true});
+
+          //this.chat.bubbles.onBubblesClick(e);
+        }, {once: true, capture: true});
 
         cancelSelection();
         //cancelEvent(e as any);

src/components/chat/markupTooltip.ts

@@ -1,7 +1,9 @@
 import type { AppImManager } from "../../lib/appManagers/appImManager";
-import { MarkdownType, cancelEvent, getSelectedNodes, markdownTags, findUpClassName } from "../../helpers/dom";
+import { MarkdownType, cancelEvent, getSelectedNodes, markdownTags, findUpClassName, attachClickEvent } from "../../helpers/dom";
 import RichTextProcessor from "../../lib/richtextprocessor";
 import ButtonIcon from "../buttonIcon";
+import { clamp } from "../../helpers/number";
+import { isTouchSupported } from "../../helpers/touchSupport";
 
 export default class MarkupTooltip {
   public container: HTMLElement;
@@ -41,9 +43,13 @@ export default class MarkupTooltip {
           this.appImManager.chat.input.applyMarkdown(c);
         });
       } else {
-        button.addEventListener('click', () => {
+        attachClickEvent(button, (e) => {
+          cancelEvent(e);
           this.container.classList.add('is-link');
 
+          const selection = document.getSelection();
+          this.savedRange = selection.getRangeAt(0);
+          
           if(button.classList.contains('active')) {
             const startContainer = this.savedRange.startContainer;
             const anchor = startContainer.parentElement as HTMLAnchorElement;
@@ -52,6 +58,7 @@ export default class MarkupTooltip {
             this.linkInput.value = '';
           }
 
+          this.linkInput.focus();
           this.linkInput.classList.toggle('is-valid', this.isLinkValid());
         });
       }
@@ -85,14 +92,16 @@ export default class MarkupTooltip {
       this.linkInput.classList.remove('error');
     });
 
-    this.linkBackButton.addEventListener('click', () => {
+    attachClickEvent(this.linkBackButton, (e) => {
+      cancelEvent(e);
       this.container.classList.remove('is-link');
       //input.value = '';
       this.resetSelection();
     });
 
     this.linkApplyButton = ButtonIcon('check markup-tooltip-link-apply', {noRipple: true});
-    this.linkApplyButton.addEventListener('click', (e) => {
+    attachClickEvent(this.linkApplyButton, (e) => {
+      cancelEvent(e);
       this.applyLink(e);
     });
 
@@ -199,9 +208,9 @@ export default class MarkupTooltip {
       clearTimeout(this.hideTimeout);
     }
 
-    const range = this.savedRange = selection.getRangeAt(0);
+    const range = /* this.savedRange =  */selection.getRangeAt(0);
 
-    const activeButton = this.setActiveMarkupButton();
+    this.setActiveMarkupButton();
     
     this.container.classList.remove('is-link');
     const isFirstShow = this.container.classList.contains('hide');
@@ -210,11 +219,15 @@ export default class MarkupTooltip {
       this.container.classList.add('no-transition');
     }
     
+    const bodyRect = document.body.getBoundingClientRect();
     const selectionRect = range.getBoundingClientRect();
+    const inputRect = this.appImManager.chat.input.rowsWrapper.getBoundingClientRect();
+
+    const selectionTop = selectionRect.top + (bodyRect.top * -1);
     //const containerRect = this.container.getBoundingClientRect();
     const sizesRect = this.container.firstElementChild.firstElementChild.getBoundingClientRect();
-    const top = selectionRect.top - sizesRect.height - 8;
+    const top = selectionTop - sizesRect.height - 8;
-    const left = selectionRect.left + (selectionRect.width - sizesRect.width) / 2;
+    const left = clamp(selectionRect.left + (selectionRect.width - sizesRect.width) / 2, inputRect.left, inputRect.right - sizesRect.width);
     //const top = selectionRect.top - 44 - 8;
     
     this.container.style.transform = `translate3d(${left}px, ${top}px, 0)`;
@@ -266,7 +279,12 @@ export default class MarkupTooltip {
         return;
       }
 
+      console.log('[MARKUP]: selectionchange');
+      if(isTouchSupported) {
+        this.show();
+      } else {
         this.setMouseUpEvent();
+      }
     });
   }
 }

src/components/misc.ts

@@ -323,12 +323,21 @@ export function attachContextMenuListener(element: HTMLElement, callback: (e: To
       add('touchcancel', onCancel, options);
 
       timeout = window.setTimeout(() => {
-        element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
         callback(e.touches[0]);
         onCancel();
+
+        if(openedMenu) {
+          element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
+        }
       }, .4e3);
     });
   } else {
-    add('contextmenu', callback);
+    add('contextmenu', isTouchSupported ? (e: any) => {
+      callback(e);
+
+      if(openedMenu) {
+        element.addEventListener('touchend', cancelEvent, {once: true}); // * fix instant closing
+      }
+    } : callback);
   }
 };

src/components/sidebarRight/tabs/gifs.ts

@@ -4,7 +4,7 @@ import Scrollable from "../../scrollable";
 import animationIntersector from "../../animationIntersector";
 import appSidebarRight, { AppSidebarRight } from "..";
 import appUsersManager from "../../../lib/appManagers/appUsersManager";
-import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/AppInlineBotsManager";
+import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/appInlineBotsManager";
 import GifsMasonry from "../../gifsMasonry";
 import { findUpClassName } from "../../../helpers/dom";
 import appImManager from "../../../lib/appManagers/appImManager";

src/components/wrappers.ts

@@ -26,6 +26,7 @@ import ProgressivePreloader from './preloader';
 import './middleEllipsis';
 import { nextRandomInt } from '../helpers/random';
 import RichTextProcessor from '../lib/richtextprocessor';
+import appImManager from '../lib/appManagers/appImManager';
 
 const MAX_VIDEO_AUTOPLAY_SIZE = 50 * 1024 * 1024; // 50 MB
 
@@ -412,8 +413,8 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
           preloader = new ProgressivePreloader(null, true);
         }
 
-        preloader.attach(downloadDiv, true);
+        //preloader.attach(downloadDiv, true);
-        /* download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId);
+        download = appDocsManager.saveDocFile(doc, appImManager.chat.bubbles.lazyLoadQueue.queueId);
         preloader.attach(downloadDiv, true, download);
         
         download.then(() => {
@@ -426,7 +427,7 @@ export function wrapDocument(doc: MyDocument, withTime = false, uploading = fals
           downloadDiv.classList.remove('downloading');
         });
         
-        downloadDiv.classList.add('downloading'); */
+        downloadDiv.classList.add('downloading');
       } else {
         download.cancel();
       }

src/index.hbs

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <title>Telegram Web</title>
   <meta name="description" content="">
-  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
   <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">

src/lib/appManagers/AppInlineBotsManager.ts

@@ -1,6 +1,6 @@
 import { toast } from "../../components/toast";
 import { BotInlineResult } from "../../layer";
-import appPeersManager from "../appManagers/appPeersManager";
+import appPeersManager from "./appPeersManager";
 import apiManagerProxy from "../mtproto/mtprotoworker";
 import { RichTextProcessor } from "../richtextprocessor";
 import appDocsManager from "./appDocsManager";

src/lib/appManagers/appImManager.ts

@@ -13,7 +13,7 @@ import appUsersManager from "./appUsersManager";
 import Chat, { ChatType } from '../../components/chat/chat';
 import appChatsManager from './appChatsManager';
 import appDocsManager from './appDocsManager';
-import appInlineBotsManager from './AppInlineBotsManager';
+import appInlineBotsManager from './appInlineBotsManager';
 import appMessagesManager from './appMessagesManager';
 import appPeersManager from './appPeersManager';
 import appPhotosManager from './appPhotosManager';
@@ -206,10 +206,10 @@ export class AppImManager {
       this.attachDragAndDropListeners();
     }
 
-    if(!isTouchSupported) {
+    //if(!isTouchSupported) {
       this.markupTooltip = new MarkupTooltip(this);
       this.markupTooltip.handleSelection();
-    }
+    //}
   }
 
   private attachDragAndDropListeners() {

src/lib/cacheStorage.ts

@@ -53,9 +53,9 @@ export default class CacheStorageController {
   } */
 
   public getFile(fileName: string, method: 'blob' | 'json' | 'text' = 'blob'): Promise<any> {
-    if(method == 'blob') {
+    /* if(method == 'blob') {
       return Promise.reject();
-    }
+    } */
 
     // const str = `get fileName: ${fileName}`;
     // console.time(str);

src/lib/storage.ts

@@ -89,11 +89,13 @@ class AppStorage {
 
         if(this.useCS) {
           try {
-            //console.log('setItem', key, value);
+            //console.log('setItem: will set', key/* , value */);
+            await this.cacheStorage.delete(key); // * try to prevent memory leak in Chrome leading to 'Unexpected internal error.'
             await this.cacheStorage.save(key, new Response(value, {headers: {'Content-Type': 'application/json'}}));
+            //console.log('setItem: have set', key/* , value */);
           } catch(e) {
             //this.useCS = false;
-            console.error('[AS]: set error:', e, value);
+            console.error('[AS]: set error:', e, key/* , value */);
           }
         } else {
           keyValues[key] = value;

src/scss/partials/_audio.scss

@@ -383,9 +383,9 @@
 
   @include respond-to(handhelds) {
     &-download {
-      /* background: transparent; */
+      //background: transparent;
-      margin-left: 2px;
+      margin-left: 6px;
-      margin-top: 1px;
+      margin-top: 6px;
     }
 
     &.is-voice {

src/scss/partials/_chat.scss

@@ -99,7 +99,7 @@ $chat-helper-size: 39px;
 		background: none;
 		border: none;
 		width: 100%;
-		padding: 9px;
+		padding: 9px 8px 9px 8px;
 		/* height: 100%; */
 		max-height: calc(30rem - var(--padding-vertical) * 2);
 		overflow-y: none;
@@ -333,6 +333,25 @@ $chat-helper-size: 39px;
 			}
 		}
 	}
+
+	.pinned-container {
+		box-shadow: none;
+		@include respond-to(handhelds) {
+			font-size: 15px;
+		}
+
+		.btn-transparent {
+			justify-content: center;
+	
+			&::before {
+				margin-right: 10px;
+			}
+		}
+	
+		&::before {
+			box-shadow: none;
+		}
+	}
 }
 
 @keyframes recordBlink {
@@ -437,7 +456,8 @@ $chat-helper-size: 39px;
 	background-color: #fff;
 	border-radius: 12px;
 	border-bottom-right-radius: 0;
-	box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
+	//box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
+	box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.18);
 	min-height: var(--chat-input-size);
 	max-height: 30rem;
 	flex: 0 0 auto;
@@ -722,6 +742,16 @@ $chat-helper-size: 39px;
 		padding: 0.25rem;
 		width: 34px;
 		height: 34px;
+		//По макету ниже....
+		// display: block;
+		// flex: 0 0 auto;
+		// font-size: 24px;
+		// line-height: 24px;
+		// color: #8d969c;
+		// padding: 0.25rem;
+		// margin-left: -1px;
+		// width: 40px;
+		// height: 40px;
 		
 		&.active {
 			color: $color-blue;

src/scss/partials/_chatBubble.scss

@@ -152,6 +152,18 @@ $bubble-margin: .25rem;
     }
   }
 
+  &.channel-post {
+    .message.poll-message {
+        .time {
+          position: unset;
+        }
+    }
+
+		poll-element .poll-footer {
+				height: auto;
+		}
+  }
+
   &.is-date {
     position: sticky;
     top: $bubble-margin;
@@ -222,6 +234,13 @@ $bubble-margin: .25rem;
     }
   }
 
+  // ! hide context menu for media on android
+  .bubbles.is-selecting & {
+    img, video {
+      pointer-events: none;
+    }
+  }
+  
   &__container {
     //min-width: 60px;
     min-width: 56px;
@@ -1027,7 +1046,7 @@ $bubble-margin: .25rem;
       height: 58px;
 
       @include respond-to(handhelds) {
-        padding-left: 44px;
+        padding-left: 44px; //было 44
       }
 
       &-name {
@@ -1120,6 +1139,11 @@ $bubble-margin: .25rem;
         background: #fff;
         border-radius: 50%;
 
+        @include respond-to(handhelds) {
+          left: 20px;
+          top: 25px;
+        }
+
         &:before {
           content: " ";
           position: absolute;
@@ -1303,6 +1327,10 @@ $bubble-margin: .25rem;
       padding: inherit;
       white-space: nowrap;
     }
+
+    .tgico-pinnedchat:before {
+      font-weight: bold;
+    }
   }
 
   .video-time {
@@ -1981,6 +2009,7 @@ poll-element {
   
       @include respond-to(handhelds) {
         max-width: 88%;
+        white-space: normal;
       }
     }
 

src/scss/partials/_chatDrop.scss

@@ -59,10 +59,10 @@
   &-outline {
     &-wrapper {
       position: absolute;
-      top: 19px;
+      top: 15px;
-      right: 19px;
+      right: 15px;
-      bottom: 19px;
+      bottom: 15px;
-      left: 19px;
+      left: 15px;
       pointer-events: none;
     }
 
@@ -95,6 +95,16 @@
   &-header {
     font-weight: 500;
     font-size: 1.25rem;
+    margin-top: -10px;
+  }
+
+  @media only screen and (max-height: 670px) {
+    &-icon {
+      font-size: 0;
+    }
+    &-header {
+      margin-top: 0px;
+    }
   }
 
   &.is-dragover {

src/scss/partials/_chatStickersHelper.scss

@@ -5,11 +5,13 @@
 	transition: opacity .2s ease-in-out;
 	overflow: hidden;
 	padding: 0 !important;
+    border-radius: 10px !important;
 
 	> .scrollable {
 		position: relative;
 		max-height: 220px;
   		min-height: var(--esg-sticker-size);
+	  	padding: 7px;
 	}
 
 	&-stickers {

src/scss/partials/_chatlist.scss

@@ -71,6 +71,7 @@
     .tgico-close {
       left: auto;
       right: 0px;
+      top: 48%;
     }
 
     //input.is-empty ~ .tgico-close {

src/scss/partials/_document.scss

@@ -10,6 +10,11 @@
 
     .document:not(.document-with-thumb) & {
       padding: 1.5rem .25rem 0 .25rem;
+
+      @include respond-to(handhelds) {
+        padding: 14px 0px 0px 0px;
+        font-size: 14px;
+      }
     }
 
     &:after {
@@ -132,6 +137,12 @@
     .tgico-download {
       transform: scale(1);
       transition: .2s scale;
+
+      @include respond-to(handhelds) {
+        margin-top: -1px;
+        margin-right: -1px;
+        font-size: 20px;
+      }
     }
 
     &.downloading {
@@ -146,8 +157,8 @@
     height: 42px;
 
     @include respond-to(handhelds) {
-      width: 30px;
+      width: 26px;
-      height: 30px;
+      height: 26px;
     }
   }
 }

src/scss/partials/_fonts.scss

@@ -88,6 +88,7 @@
 }
 .tgico-arrow-down:before {
   content: "\e911";
+  margin-top: 2px;
 }
 .tgico-pinlist:before {
   content: "\e912";

src/scss/partials/_preloader.scss

@@ -30,6 +30,7 @@
     margin: auto;
     width: 50px;
     height: 50px;
+    display: flex;
     /* cursor: pointer; */
   }
 }

src/scss/partials/_rightSidebar.scss

@@ -445,10 +445,8 @@
           }
 
           @include respond-to(handhelds) {
-            width: 40px;
+            width: 36px;
-            height: 40px;
+            height: 36px;
-            top: 2px;
-            left: -12px;
           }
 
           @include respond-to(not-handhelds) {

src/scss/style.scss

@@ -280,6 +280,10 @@ html {
   text-rendering: optimizeSpeed;
 }
 
+body {
+  touch-action: pan-x pan-y;
+}
+
 /* body {
   position: absolute;
   top: 0;
@@ -746,7 +750,7 @@ img.emoji {
 
 .super-sticker {
   html.no-touch &:hover {
-    border-radius: 12px;
+    border-radius: 10px;
     background-color: var(--color-gray-hover);
   }