Repository navigation
Assessment Editor: Fix dropdown positioning #294
Description
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:
- Adjust
viewportPosition()to limit the dropdown'stopas well, so it flips above the caret when there's insufficient room below. - 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.
- Clipped at the bottom of the viewport.
viewportPosition()limitsleftto the window width but never limitstop. The list ismax-h-52(208px) withoverflow-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. - 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-autoinEditorStepLayout.tsx) moves the caret while the dropdown stays where it was.
To Reproduce
- Open an assessor in the wizard and go to step 3 (Assessment).
- 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. - 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.tsxalready 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.
Metadata
Metadata
Assignees
Labels
Type
Projects
- StatusShow more project fieldsIn Review
Activity
[-]Assessment: @ mention dropdown is clipped at viewport bottom and drifts on scroll[/-][+]Assessment Editor: Fix dropdown positioning[/+]