From d9b8d8c48d00e9b9cf781f1fdfdb588845bb0e04 Mon Sep 17 00:00:00 2001
From: jkrei0 <jkrei021@gmail.com>
Date: Sat, 7 Oct 2023 22:50:32 -0400
Subject: [PATCH] Fix in-app-menu squishing sub-menu items

---
 plugins/in-app-menu/menu/panel.ts | 9 +++++++++
 plugins/in-app-menu/titlebar.css  | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/plugins/in-app-menu/menu/panel.ts b/plugins/in-app-menu/menu/panel.ts
index 1dd2ea16..c15057b3 100644
--- a/plugins/in-app-menu/menu/panel.ts
+++ b/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', () => {
diff --git a/plugins/in-app-menu/titlebar.css b/plugins/in-app-menu/titlebar.css
index 8075b09c..cd68d3a4 100644
--- a/plugins/in-app-menu/titlebar.css
+++ b/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;