Fix: calculate menu height dynamically

popup/popup.css

@@ -327,8 +327,7 @@ a.configure[target="_blank"] .svg-icon.config {
   opacity: 0;
 }
 .entry.menu-active .menu {
-  /* FIXME: avoid hard coded height */
-  height: 72px;
+  height: var(--menu-height, 0px);
   opacity: 1;
 }
 /* accessibility */
@@ -336,12 +335,11 @@ a.configure[target="_blank"] .svg-icon.config {
   display: none;
   border: none;
   align-items: center;
-  padding: 0 0 0 20px;
-  height: 24px;
+  padding: 3px 0 3px 20px;
   background: none;
   text-decoration: none;
 }
-.entry.menu-active.accessible-items .menu-item {
+.entry.menu-active .menu-item {
   display: flex;
 }
 .entry .menu-item.delete {
@@ -360,6 +358,7 @@ a.configure[target="_blank"] .svg-icon.config {
 }
 .entry .menu-icon {
   width: 26px;
+  flex-shrink: 0;
 }
 .entry .menu-icon > * {
   display: block;

popup/popup.js

@@ -404,9 +404,8 @@ Object.assign(handleEvent, {
   toggleMenu(event) {
     const entry = handleEvent.getClickedStyleElement(event);
     entry.classList.toggle('menu-active');
-    setTimeout(() => {
-      entry.classList.toggle('accessible-items');
-    }, 250);
+    const menu = entry.querySelector('.menu');
+    menu.style.setProperty('--menu-height', menu.scrollHeight + 'px');
     event.preventDefault();
   },