fix: menu AI attaché au body pour éviter le clipping par overflow:hidden
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:
+27
-6
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user