diff --git a/frontend/editor-poc.html b/frontend/editor-poc.html
index 02013a9..54c4c35 100644
--- a/frontend/editor-poc.html
+++ b/frontend/editor-poc.html
@@ -1654,11 +1654,13 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
acItems = items;
acIdx = -1;
if (!items.length) { hideAutocomplete(); return; }
- // Position near cursor (fixed positioning relative to viewport)
- var pos = getCaretCoordinates(ta);
+ // Position: centered below the textarea (simple, reliable)
var rect = ta.getBoundingClientRect();
- acDropdown.style.left = (rect.left + pos.left + 24) + 'px';
- acDropdown.style.top = (rect.top + pos.top + 20) + 'px';
+ acDropdown.style.left = (rect.left + rect.width / 2) + 'px';
+ acDropdown.style.top = (rect.bottom + 6) + 'px';
+ acDropdown.style.transform = 'translateX(-50%)';
+ // Keep dropdown within viewport
+ acDropdown.style.maxWidth = Math.min(380, rect.width - 32) + 'px';
var html = context ? '
' + context + '
' : '';
items.forEach(function(item, i) {
@@ -1761,27 +1763,7 @@ body { font-family: var(--sans); background: var(--bg); color: var(--text); heig
loadAndTrigger();
}
- function getCaretCoordinates(textarea) {
- var div = document.createElement('div');
- var style = div.style;
- var computed = window.getComputedStyle(textarea);
- for (var key of computed) {
- try { style[key] = computed[key]; } catch(e) {}
- }
- style.position = 'absolute';
- style.visibility = 'hidden';
- style.whiteSpace = 'pre-wrap';
- style.overflow = 'visible';
- style.wordWrap = 'break-word';
- style.width = textarea.clientWidth + 'px';
- style.height = 'auto';
- var pos = textarea.selectionStart;
- div.textContent = textarea.value.slice(0, pos) + '.';
- document.body.appendChild(div);
- var rect = div.getBoundingClientRect();
- document.body.removeChild(div);
- return { left: rect.width, top: rect.height };
- }
+ function escHtml(s) { return String(s).replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"'); }
ta.addEventListener('keydown', function(e) {
if (acDropdown.classList.contains('active')) {