From d21026b2a63c4b7ffc8f19f3e38ea61809432e6d Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Fri, 24 Jul 2026 11:04:56 +0300
Subject: [PATCH] Fix shortcut autocomplete menu opening off-screen below the
 field

position() always placed the suggestion menu below the textarea. Easy Gen's
prompt box lives in a footer bar at the bottom of the viewport, so the menu
opened mostly or entirely off-screen with no way to see or click a
suggestion. Now flips above the field when there isn't room below, and
clamps max-height to whatever space is actually available either way.
---
 movie_editor/frontend/autocomplete.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/movie_editor/frontend/autocomplete.js b/movie_editor/frontend/autocomplete.js
index abcb2b74..cd85c646 100644
--- a/movie_editor/frontend/autocomplete.js
+++ b/movie_editor/frontend/autocomplete.js
@@ -142,8 +142,24 @@
       if (!menu) return;
       if (!ta.isConnected) { close(); return; }
       const r = ta.getBoundingClientRect();
+      // Flip above the field when there isn't room below (e.g. Easy Gen's prompt box
+      // sits in a footer bar at the bottom of the viewport) — otherwise the menu opens
+      // off-screen under the field with no way to see or click any suggestion.
+      const GAP = 2;
+      const menuH = menu.offsetHeight || 240;
+      const spaceBelow = window.innerHeight - r.bottom;
+      const spaceAbove = r.top;
+      const openAbove = spaceBelow < menuH + GAP && spaceAbove > spaceBelow;
       menu.style.left = r.left + "px";
-      menu.style.top = (r.bottom + 2) + "px";
+      if (openAbove) {
+        menu.style.top = "";
+        menu.style.bottom = (window.innerHeight - r.top + GAP) + "px";
+        menu.style.maxHeight = Math.max(120, Math.min(240, spaceAbove - GAP * 2)) + "px";
+      } else {
+        menu.style.bottom = "";
+        menu.style.top = (r.bottom + GAP) + "px";
+        menu.style.maxHeight = Math.max(120, Math.min(240, spaceBelow - GAP * 2)) + "px";
+      }
       menu.style.minWidth = Math.min(r.width, 420) + "px";
       menu.style.maxWidth = Math.max(r.width, 320) + "px";
     }