Fix TODO dropdown positioning

Author: arkan

internal/app/static/app.js

@@ -460,14 +460,32 @@ function prioritySortRank(priority) {
   return 9;
 }
 
+function resetTodoDropdown(dropdown) {
+  dropdown.hidden = true;
+  dropdown.style.removeProperty('left');
+  dropdown.style.removeProperty('top');
+}
 function closeTodoMenus(exceptMenu) {
   document.querySelectorAll('[data-task-menu][aria-expanded="true"]').forEach((button) => {
     if (button === exceptMenu) return;
     button.setAttribute('aria-expanded', 'false');
     const dropdown = button.closest('.task-actions')?.querySelector('.task-menu-dropdown');
-    if (dropdown) dropdown.hidden = true;
+    if (dropdown) resetTodoDropdown(dropdown);
   });
 }
+function positionTodoDropdown(menu, dropdown) {
+  const buttonRect = menu.getBoundingClientRect();
+  dropdown.style.position = 'fixed';
+  dropdown.style.left = '0px';
+  dropdown.style.top = '0px';
+  dropdown.hidden = false;
+  const dropdownRect = dropdown.getBoundingClientRect();
+  const left = Math.max(8, Math.min(window.innerWidth - dropdownRect.width - 8, buttonRect.right - dropdownRect.width));
+  const opensDown = buttonRect.bottom + 6 + dropdownRect.height <= window.innerHeight - 8;
+  const top = opensDown ? Math.min(window.innerHeight - dropdownRect.height - 8, buttonRect.bottom + 6) : Math.min(window.innerHeight - dropdownRect.height - 8, Math.max(8, buttonRect.top - dropdownRect.height - 6));
+  dropdown.style.left = left + 'px';
+  dropdown.style.top = top + 'px';
+}
 function initTodoActions() {
   document.addEventListener('click', (ev) => {
     const menu = ev.target.closest('[data-task-menu]');
@@ -481,8 +499,11 @@ function initTodoActions() {
     const expanded = menu.getAttribute('aria-expanded') === 'true';
     closeTodoMenus(menu);
     menu.setAttribute('aria-expanded', String(!expanded));
-    dropdown.hidden = expanded;
+    if (expanded) resetTodoDropdown(dropdown);
+    else positionTodoDropdown(menu, dropdown);
   });
+  window.addEventListener('resize', () => closeTodoMenus());
+  window.addEventListener('scroll', () => closeTodoMenus(), true);
   document.addEventListener('keydown', (ev) => {
     if (ev.key === 'Escape') closeTodoMenus();
   });

internal/app/static/style.css

@@ -378,6 +378,35 @@ func TestTODOPageUsesCountersStructuredRowsAndCollapsedDone(t *testing.T) {
 			t.Fatalf("TODO dropdown should only expose mark-done and copy-id actions, found %q in:\n%s", forbidden, body)
 		}
 	}
+
+	w = httptest.NewRecorder()
+	r = httptest.NewRequest("GET", "/_static/app.js", nil)
+	s.ServeHTTP(w, r)
+	js := w.Body.String()
+	for _, want := range []string{
+		"function positionTodoDropdown(menu, dropdown)",
+		"dropdown.style.position = 'fixed'",
+		"window.innerHeight",
+		"Math.min(window.innerHeight - dropdownRect.height - 8, Math.max(8, buttonRect.top - dropdownRect.height - 6))",
+		"positionTodoDropdown(menu, dropdown)",
+	} {
+		if !strings.Contains(js, want) {
+			t.Fatalf("TODO dropdown must be viewport-positioned to avoid clipping, missing %q in:\n%s", want, js)
+		}
+	}
+
+	w = httptest.NewRecorder()
+	r = httptest.NewRequest("GET", "/_static/style.css", nil)
+	s.ServeHTTP(w, r)
+	css := w.Body.String()
+	for _, want := range []string{
+		".task-menu-dropdown{position:fixed;",
+		"z-index:40",
+	} {
+		if !strings.Contains(css, want) {
+			t.Fatalf("TODO dropdown must escape clipped task containers, missing CSS %q in:\n%s", want, css)
+		}
+	}
 }
 
 func TestTagsPageHasWorkingFilterMarkupWithoutMetricCards(t *testing.T) {