Add compact menu style for smaller window heights

[Myestery]

This pull request enhances the responsiveness of the CommandMenubar component by introducing a "compact" mode for screens with limited vertical space. When the window height is less than 700px, the menubar adapts its submenu positioning and styling to improve usability on smaller displays. The most important changes are grouped below:

Responsive Behavior and State Management:

• Added a reactive windowHeight reference and a computed isCompactHeight property to detect when the window height is below 700px, enabling "compact" mode for the menubar. Event listeners for window resize are now managed using onMounted and onUnmounted lifecycle hooks to keep the state updated. [1] [2]

Dynamic Styling and Class Application:

• Updated the root element's class bindings to apply the comfy-command-menu-compact class when isCompactHeight is true, enabling conditional styling for compact mode.

Compact Mode Styling:

• Introduced new CSS rules for .comfy-command-menu-compact to force submenus to open to the right and align with the top of the menu container, ensuring better usability on short screens. Adjustments include submenu positioning, alignment for nested menus, and ensuring the submenu container uses the full available height.

/fix #5289

Screen.Recording.2025-09-04.at.04.51.59.mov

┆Issue is synchronized with this Notion page by Unito

[github-actions]

🎭 Playwright Test Results

✅ All tests passed across all browsers!

⏰ Completed at: 09/04/2025, 07:01:15 PM UTC

📊 Test Reports by Browser

---

🎉 Your tests are passing across all browsers!

[DrJKL]

I don't like that the submenu doesn't align at all with the menu trigger here

The demo menus here adapt if they're too close to the edge. Are we doing something special that's overriding that behavior?

[christian-byrne]

LGTM.

I think the approach more aligned with the codebase would be to useBreakpoints -- and we can expect that the breakpoints will generally give us a correct idea about the height. Alternatively, we can just handle the edge case by making the menu scrollable and fill-available css properties. However, I think this solution is also fine.

[christian-byrne]

I don't like that the submenu doesn't align at all with the menu trigger here

I agree but I think this issue was existing before this PR right?

[DrJKL]

I don't like that the submenu doesn't align at all with the menu trigger here

I agree but I think this issue was existing before this PR right?

An earlier version of this PR had a video that had the help menu floating at the very top.

[DrJKL]

In my own testing of this, the issue is mitigated by removing the !important left and top values in the unscoped style block.
I'd rather find our local overrides that are causing PrimeVue's component to behave differently than in their spec/demo and remove those.
Or we could use a @media query to apply the changes via CSS only, if we absolutely have to.

[christian-byrne]

Tested and it solves the problem.