[vprashrex]

Issue

Closes #294

Summary

• Fixes two positioning bugs in the @ mention dropdown in the Assessment editor.
  • Dropdown cut off at the bottom of the viewport
    • Checks vertical space and flips dropdown position accordingly.
    • Uses bottom positioning when flipped for easier rendering.
    • Sets maxHeight to available space, capped at 208px, ensuring scrollability.
  • Dropdown drifts away from the caret when scrolling
    • Recomputes dropdown position on scroll and resize events.
    • Keeps dropdown attached to the caret as the page scrolls.

Checklist

Before submitting a pull request, please ensure that you mark these task.

• Ran npm run dev and npm run build in the repository root and test.
• If you've fixed a bug or added code that is tested

Original PR description

Issue

Closes #294

Summary

Fixes two positioning bugs in the @ mention dropdown in the Assessment editor (app/components/assessment/editor/MentionDropdown.tsx). The change is limited to this one file: no new dependencies, and the caret math in useAtMention.ts is untouched.

1. Dropdown cut off at the bottom of the viewport

• viewportPosition() now checks vertical space, using the same flip approach as app/components/ui/MultiSelect.tsx. If there are at least 208px below the caret, or more room below than above, the dropdown opens below. Otherwise it flips above the caret line.
• When flipped, it is positioned with bottom instead of top, so its rendered height doesn't need to be measured.
• maxHeight is set to the space available on the chosen side (capped at 208px) and replaces the max-h-52 class. The list stays fully scrollable in both positions.

2. Dropdown drifts away from the caret when scrolling

• While the dropdown is open, scroll (with capture: true, so the inner overflow-y-auto editor pane is included) and resize listeners re-run viewportPosition(). The listeners are removed when the dropdown closes.
• The caret offset is relative to the editor host element, and that element's rect changes as the page scrolls. Recomputing therefore keeps the dropdown attached to the caret.

Checklist

• Ran npm run dev and npm run build in the repository root and test.
• If you've fixed a bug or added code that is tested

Notes

• tsc --noEmit, ESLint and Prettier pass. Not yet verified in the browser: /assessment requires a logged-in session and the ASSESSMENT feature flag. Reviewer, please check:
  1. In the step 3 SUBMISSION zone, type @ near the bottom of the window. The dropdown should stay fully visible (flipping up if needed) and every row should be reachable by scrolling.
  2. With the dropdown open, scroll the editor pane. The dropdown should move with the caret.
• CARET_LINE_OFFSET_PX = 26 is the editor's leading-5 line height (20px) plus the 6px offset added in computeCaretPos. It is used to place the flipped dropdown above the caret line. If the editor's line height changes, this constant must change too.

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one): 1

• ready-for-review

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: ProjectTech4DevAI/kaapi-frontend
• Branch: fix/mention-dropdown-positioning
• File: .coderabbit.yaml
• Commit: ba5096d
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 47035282-0dcc-48a9-aa42-e9830e74815b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}