Skip to content

Assessment Editor: Fix dropdown positioning #294

Open

Description

@vprashrex

Is your feature request related to a problem?
The @ mention autocomplete dropdown in the Assessment editor has two issues: it gets clipped at the bottom of the viewport, making it hard to access, and it drifts away from the caret when the editor is scrolled, disrupting user experience.

Describe the solution you'd like
Fix the dropdown positioning by implementing the following:

  1. Adjust viewportPosition() to limit the dropdown's top as well, so it flips above the caret when there's insufficient room below.
  2. Update the dropdown to follow the caret's movement during scrolls or window resizes.
Original issue

Describe the bug
The @ mention autocomplete dropdown in the Assessment editor (step 3 → SUBMISSION prompt zone) has two positioning problems. The dropdown lives in app/components/assessment/editor/MentionDropdown.tsx.

  1. Clipped at the bottom of the viewport. viewportPosition() limits left to the window width but never limits top. The list is max-h-52 (208px) with overflow-y-auto, so when the caret is near the bottom of the window the dropdown runs past the screen edge. Only the first ~3 rows can be reached and the rest cannot be scrolled to.
  2. Drifts away from the caret on scroll. The position is computed once, when the dropdown opens. The dropdown is position: fixed, so scrolling the editor pane (overflow-y-auto in EditorStepLayout.tsx) moves the caret while the dropdown stays where it was.

To Reproduce

  1. Open an assessor in the wizard and go to step 3 (Assessment).
  2. In the SUBMISSION zone, type @ on a line near the bottom of the window → the dropdown is cut off and its lower rows can't be reached.
  3. Type @ anywhere, then scroll the editor pane while the dropdown is open → the dropdown stays put and detaches from the text.

Expected behavior

  • If there isn't enough room below the caret, the dropdown flips above the caret line (as app/components/ui/MultiSelect.tsx already does). In both positions the list fits on screen and scrolls.
  • While open, the dropdown follows the caret when the editor scrolls or the window is resized.

Additional context
Should be a small change inside MentionDropdown.tsx: no new dependencies, and no changes to the caret math in useAtMention.ts.

Activity

  1. changed the title [-]Assessment: @ mention dropdown is clipped at viewport bottom and drifts on scroll[/-] [+]Assessment Editor: Fix dropdown positioning[/+] on Oct 25, 2026
  2. self-assigned this
    on Oct 25, 2026
  3. moved this from To Do to In Progress in Kaapi-devon Oct 25, 2026
  4. moved this from In Progress to In Review in Kaapi-devon Oct 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

  • Status
    In Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions