diff --git a/popup/popup.css b/popup/popup.css index 77b5bbc7..b7d20260 100644 --- a/popup/popup.css +++ b/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; diff --git a/popup/popup.js b/popup/popup.js index ad612644..68151214 100644 --- a/popup/popup.js +++ b/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(); },