fix: position autocomplete dropdown — fixed viewport + getCaretCoordinates overflow visible

frontend/editor-poc.html

@@ -218,7 +218,7 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
 
 /* Autocomplete dropdown */
 .ac-dropdown {
-  position: absolute; z-index: 200;
+  position: fixed; z-index: 200;
   background: var(--bg2); border: 1px solid var(--border-md);
   border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
   min-width: 220px; max-width: 380px; max-height: 260px;
@@ -1653,11 +1653,11 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
     acItems = items;
     acIdx = -1;
     if (!items.length) { hideAutocomplete(); return; }
-    // Position near cursor
+    // Position near cursor (fixed positioning relative to viewport)
     var pos = getCaretCoordinates(ta);
     var rect = ta.getBoundingClientRect();
-    acDropdown.style.left = (rect.left + pos.left - ta.scrollLeft + 20) + 'px';
-    acDropdown.style.top = (rect.top + pos.top - ta.scrollTop + 24) + 'px';
+    acDropdown.style.left = (rect.left + pos.left + 24) + 'px';
+    acDropdown.style.top = (rect.top + pos.top + 20) + 'px';
 
     var html = context ? '<div class="ac-item-context">' + context + '</div>' : '';
     items.forEach(function(item, i) {
@@ -1765,7 +1765,8 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
     style.position = 'absolute';
     style.visibility = 'hidden';
     style.whiteSpace = 'pre-wrap';
-    style.overflow = 'hidden';
+    style.overflow = 'visible';
+    style.wordWrap = 'break-word';
     style.width = textarea.clientWidth + 'px';
     style.height = 'auto';
     var pos = textarea.selectionStart;