fix: overflow-menu and context-menu positioning for small viewports (#5827)

web/assets/css/transmission-app.scss

@@ -342,7 +342,6 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded
   left: 0;
   margin: 0;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
   padding: 0;
   right: 0;
 }
@@ -1273,13 +1272,12 @@ $video-image: '../img/film.svg';
   box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
     0 9px 28px 8px #0000000d;
   color: var(--color-fg-on-popup);
-  min-width: 220px;
+  margin: 6px;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
   padding: 10px;
   position: absolute;
 
-  right: 20px;
+  right: 0;
   top: 50px;
   z-index: $z-index-popup;
 

web/src/transmission.js

@@ -23,13 +23,7 @@ import {
   TorrentRendererCompact,
   TorrentRendererFull,
 } from './torrent-row.js';
-import {
+import { debounce, deepEqual, setEnabled, setTextContent } from './utils.js';
-  debounce,
-  deepEqual,
-  setEnabled,
-  setTextContent,
-  movePopup,
-} from './utils.js';
 
 export class Transmission extends EventTarget {
   constructor(action_manager, notifications, prefs) {
@@ -148,15 +142,6 @@ export class Transmission extends EventTarget {
                 this.action_manager
               )
             );
-            const btnbox = document
-              .querySelector('#toolbar-overflow')
-              .getBoundingClientRect();
-            movePopup(
-              this.popup.root,
-              btnbox.left + btnbox.width,
-              btnbox.top + btnbox.height,
-              document.body
-            );
           }
           break;
         case 'show-preferences-dialog':
@@ -236,12 +221,19 @@ export class Transmission extends EventTarget {
 
       const popup = new ContextMenu(this.action_manager);
       this.setCurrentPopup(popup);
-      movePopup(
+
-        popup.root,
+      const boundingElement = document.querySelector('#torrent-container');
+      const bounds = boundingElement.getBoundingClientRect();
+      const x = Math.min(
         event_.x,
-        event_.y,
+        bounds.x + bounds.width - popup.root.clientWidth
-        document.querySelector('#torrent-container')
       );
+      const y = Math.min(
+        event_.y,
+        bounds.y + bounds.height - popup.root.clientHeight
+      );
+      popup.root.style.left = `${x > 0 ? x : 0}px`;
+      popup.root.style.top = `${y > 0 ? y : 0}px`;
       event_.preventDefault();
     });
 

web/src/utils.js

@@ -268,35 +268,6 @@ export function addCheckedClass(element, b) {
   element.classList.toggle('checked', b);
 }
 
-function getBestMenuPos(r, bounds) {
-  let { x, y } = r;
-  const { width, height } = r;
-
-  if (x > bounds.x + bounds.width - width && x - width >= bounds.x) {
-    x -= width;
-  } else {
-    x = Math.min(x, bounds.x + bounds.width - width);
-  }
-
-  if (y > bounds.y + bounds.height - height && y - height >= bounds.y) {
-    y -= height;
-  } else {
-    y = Math.min(y, bounds.y + bounds.height - height);
-  }
-
-  return new DOMRect(x, y, width, height);
-}
-
-export function movePopup(popup, x, y, boundingElement) {
-  const initial_pos = new DOMRect(x, y, popup.clientWidth, popup.clientHeight);
-  const clamped_pos = getBestMenuPos(
-    initial_pos,
-    boundingElement.getBoundingClientRect()
-  );
-  popup.style.left = `${clamped_pos.left}px`;
-  popup.style.top = `${clamped_pos.top}px`;
-}
-
 export class OutsideClickListener extends EventTarget {
   constructor(element) {
     super();