fix dropdown position if not enough space

[Kurami32]

The dropdown was always opening downward, but if there's not much space the list can go off-screen making difficult to select something. Was more noticeable on the language selector since that one is at the bottom. So now if there's not enough space in the viewport will open upwards instead.

Before:

Now:

Summary by CodeRabbit

Summary of changes

• New Features

  • Dropdown menus now automatically expand upward when there isn’t enough space below.
  • The dropdown options list can be constrained to a configurable maximum height for improved responsiveness.

• Bug Fixes

  • Improved overlay positioning and visual styling so upward-expanding dropdowns remain properly aligned and connected to the trigger.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c3fe5af7-550f-425e-8fcd-5c4507915b5d

📥 Commits

Reviewing files that changed from the base of the PR and between d9b8041 and 6949b8e.

📒 Files selected for processing (1)

• frontend/src/components/MenuOptionList.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/MenuOptionList.vue

---

📝 Walkthrough

Walkthrough

This PR updates ExpandDropdown.vue to support upward-opening panels with direction-aware positioning and styling, and updates MenuOptionList.vue to accept a configurable scroll max height.

Changes

UI sizing and dropdown direction changes

Layer / File(s)	Summary
Expand-upward state and direction detection frontend/src/components/settings/ExpandDropdown.vue	Adds expandUpward and dropdownMaxHeight, computes both in openPanel() from anchor space above and below, and resets them in finishClose().
Overlay positioning and template bindings frontend/src/components/settings/ExpandDropdown.vue	Template applies expand-upward classes to the anchor, overlay, and body; updateOverlayPosition() switches between top and bottom positioning and updates the max height while open.
Upward variant CSS styling frontend/src/components/settings/ExpandDropdown.vue	Adds CSS for expand-upward variants of the anchor, overlay, and dropdown body, including border radii, padding, margin, and layout changes.
Menu option list scroll height frontend/src/components/MenuOptionList.vue	Adds the maxHeight prop, binds scrollStyle on the scroll container, and uses it to set a pixel max-height when provided.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ExpandDropdown
  participant DOM

  User->>ExpandDropdown: openPanel()
  ExpandDropdown->>DOM: measure anchor bounding rect
  DOM-->>ExpandDropdown: available space above/below
  ExpandDropdown->>ExpandDropdown: set expandUpward and dropdownMaxHeight
  ExpandDropdown->>ExpandDropdown: updateOverlayPosition()
  ExpandDropdown->>DOM: apply top or bottom style

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit peeks, then lifts its ears,
If space is high, it hops up near.
The panel bends to fit the sky,
And menus scroll at heights nearby. 🐰

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: the dropdown opens correctly when there isn't enough space below.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-dropdown-position

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/MenuOptionList.vue`:
- Around line 98-103: The scrollStyle computed/method in MenuOptionList.vue only
guards against undefined, so when ExpandDropdown.vue passes null for maxHeight
it can emit an invalid maxHeight like "nullpx". Update scrollStyle to treat null
the same as missing input and return the empty style object in that case, while
keeping the existing px conversion path for valid numeric values.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 36df18c8-8a32-48ca-ac3a-15544ff4b73b

📥 Commits

Reviewing files that changed from the base of the PR and between f49053f and d9b8041.

📒 Files selected for processing (2)

• frontend/src/components/MenuOptionList.vue
• frontend/src/components/settings/ExpandDropdown.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/settings/ExpandDropdown.vue