Skip to content

Fix context submenus overflowing past the bottom edge - #1666

Open
LuisMend12 wants to merge 4 commits into
Valour-Software:version/0.8.0from
LuisMend12:fix/submenu-bottom-overflow
Open

Fix context submenus overflowing past the bottom edge#1666
LuisMend12 wants to merge 4 commits into
Valour-Software:version/0.8.0from
LuisMend12:fix/submenu-bottom-overflow

Conversation

@LuisMend12

Copy link
Copy Markdown
Contributor

Summary

  • #1622 was fixed for the top/right edges in Fix context menu boundary handling #1662, but submenus anchor via bottom: -50% off their parent button (ContextSubMenu.razor.css), so a button near the bottom of the viewport can still open a submenu whose content extends past the bottom edge. This adds the missing bottom-edge check, mirroring the existing right-edge and top-edge corrections.
  • Extracts the boundary-correction math out of reposition() into an exported, pure computeSubmenuTranslate(boundingBox, windowWidth, windowHeight, margin) so it can be unit tested without a DOM/browser.

Test plan

  • Added Valour/Tests/Js/context-menu-reposition.test.mjs (node --test) covering: no correction when in bounds, right-edge overflow, top-edge overflow, the new bottom-edge overflow case, simultaneous right+bottom overflow, top-takes-precedence-over-bottom, and a custom margin.
  • node --test Valour/Tests/Js/*.test.mjs — all 61 tests pass (54 pre-existing + 7 new).

…o test

Submenus near the bottom of the viewport could render past the bottom
edge because they anchor via `bottom: -50%` off their parent button
(ContextSubMenu.razor.css) and only the top-overflow case was corrected.
Adds the missing bottom-edge check and pulls the shared correction math
into an exported computeSubmenuTranslate() so it's unit-testable without
a DOM, plus a demo/regression test covering all four edges (Valour-Software#1622).
@LuisMend12
LuisMend12 requested a review from a team as a code owner August 22, 2026 15:59
@SigmaTel71
SigmaTel71 changed the base branch from main to version/0.8.0 August 22, 2026 16:08
Comment thread Valour/Tests/Js/context-menu-reposition.test.mjs Outdated
Comment thread Valour/Client/ContextMenu/ContextMenuRoot.razor.js Outdated
Comment thread Valour/Client/ContextMenu/ContextMenuRoot.razor.js
Drop issue-number references and the redundant "why this is tested"
comment above computeSubmenuTranslate.
Comment on lines +24 to +25
// Margin kept between a repositioned submenu and the viewport edge.
const SUBMENU_EDGE_MARGIN = 10;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's too much to have a dedicated constant for someting used only once.

Comment thread Valour/Client/ContextMenu/ContextMenuRoot.razor.js Outdated
Comment thread Valour/Tests/Js/context-menu-reposition.test.mjs Outdated
LuisMend12 and others added 2 commits August 22, 2026 15:29
Co-authored-by: Vitaly Orekhov <vkvo2000@vivaldi.net>
Co-authored-by: Vitaly Orekhov <vkvo2000@vivaldi.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants