Fix in-app-menu squishing sub-menu items

This commit is contained in:
jkrei0
2023-10-07 22:50:32 -04:00
parent f87607d25d
commit d9b8d8c48d
2 changed files with 14 additions and 0 deletions

View File

@ -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', () => {

View File

@ -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;