From dab76c86f3a12110133d23dbffd20440f69909fb Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Tue, 16 Jun 2026 10:36:39 -0400 Subject: [PATCH] =?UTF-8?q?fix:=20position=20autocomplete=20dropdown=20?= =?UTF-8?q?=E2=80=94=20fixed=20viewport=20+=20getCaretCoordinates=20overfl?= =?UTF-8?q?ow=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/editor-poc.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/frontend/editor-poc.html b/frontend/editor-poc.html index dc7aca6..55caecc 100644 --- a/frontend/editor-poc.html +++ b/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 ? '
' + context + '
' : ''; 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;