Merge pull request #1276 from jkrei0/master

plugins/in-app-menu/menu/panel.ts

@@ -101,6 +101,15 @@ export const createPanel = (
     }
 
     panel.setAttribute('open', 'true');
+
+    // Children are placed below their parent item, which can cause
+    // long lists to squeeze their children at the bottom of the screen
+    // (This needs to be done *after* setAttribute)
+    panel.classList.remove('position-by-bottom');
+    if (options.placement === 'right' && panel.scrollHeight > panel.clientHeight ) {
+      panel.style.setProperty('--y', `${rect.y + rect.height}px`);
+      panel.classList.add('position-by-bottom');
+    }
   };
 
   anchor.addEventListener('click', () => {

plugins/in-app-menu/titlebar.css

@@ -80,6 +80,11 @@ menu-panel[open="true"] {
   opacity: 1;
   transform: scale(1);
 }
+menu-panel.position-by-bottom {
+  top: unset;
+  bottom: calc(100vh - var(--y, 100%));
+  max-height: calc(var(--y, 0) - var(--menu-bar-height, 36px) - 16px);
+}
 
 menu-item {
   -webkit-app-region: none;