fix: menu AI attaché au body pour éviter le clipping par overflow:hidden
CI / lint (push) Failing after 4s
CI / test (push) Has been skipped
CI / build (push) Has been skipped
CI / security (push) Successful in 8s

Le menu déroulant AI dans le mode édition était coupé par le
overflow:hidden du .editor-container. Le menu est maintenant:
- Attaché à document.body avec position:fixed
- Positionné aux coordonnées du bouton via getBoundingClientRect()
- Retourné au-dessus si le menu dépasse le bas de l'écran
- maxHeight: 60vh avec overflow-y: auto pour les menus très longs
This commit is contained in:
2026-06-04 07:42:11 -04:00
parent 6700b78004
commit 7c9092993b
+27 -6
View File
@@ -66,24 +66,45 @@ function showToast(msg, type = 'info') {
// ── Dropdown menu builder ──
function createMenu(items, parentEl) {
// Remove any existing menu
const existing = parentEl.querySelector('.ai-dropdown-menu');
const existing = document.querySelector('.ai-dropdown-menu');
if (existing) existing.remove();
const menu = document.createElement('div');
menu.className = 'ai-dropdown-menu';
// Position relative to parent, but attached to body to avoid
// being clipped by overflow:hidden on the editor container.
const rect = parentEl.getBoundingClientRect();
const menuTop = rect.bottom + 4;
const menuLeft = rect.left;
Object.assign(menu.style, {
position: 'absolute',
top: '100%',
left: '0',
position: 'fixed',
top: menuTop + 'px',
left: menuLeft + 'px',
background: 'var(--bg-primary)',
border: '1px solid var(--border-color)',
borderRadius: '6px',
padding: '4px 0',
minWidth: '200px',
zIndex: '100',
maxHeight: '60vh',
overflowY: 'auto',
zIndex: '10000',
boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
});
// If menu overflows bottom of viewport, flip above the button
requestAnimationFrame(() => {
const menuRect = menu.getBoundingClientRect();
if (menuRect.bottom > window.innerHeight - 8) {
menu.style.top = Math.max(8, rect.top - menuRect.height - 4) + 'px';
}
// If menu overflows right edge, align right
if (menuRect.right > window.innerWidth - 8) {
menu.style.left = Math.max(8, window.innerWidth - menuRect.width - 8) + 'px';
}
});
items.forEach(item => {
const el = document.createElement('div');
el.className = 'ai-menu-item';
@@ -134,7 +155,7 @@ function createMenu(items, parentEl) {
menu.appendChild(el);
});
parentEl.appendChild(menu);
document.body.appendChild(menu);
// Close on outside click
const closeHandler = (e) => {