Add compact menu style for smaller window heights (#5323)

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]](diffhunk://#diff-10ee0e60e600a168bdd45e0b9f05a148f5b9ee48f54e6c7dee737ebe7b6192e6R314-R326)
[[2]](diffhunk://#diff-10ee0e60e600a168bdd45e0b9f05a148f5b9ee48f54e6c7dee737ebe7b6192e6L103-R104)

**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




https://github.com/user-attachments/assets/e7908b57-3f07-4fc4-a119-66f2b7e398c5





┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5323-Add-compact-menu-style-for-smaller-window-heights-2636d73d3650816cb5aaf4ac76c39739)
by [Unito](https://www.unito.io)

Author: Myestery

src/components/topbar/CommandMenubar.vue

@@ -314,9 +314,19 @@ const hasActiveStateSiblings = (item: MenuItem): boolean => {
 .comfy-command-menu ul {
   background-color: var(--comfy-menu-secondary-bg) !important;
 }
-
 .comfy-command-menu-top .p-tieredmenu-submenu {
   left: calc(100% + 15px) !important;
   top: -4px !important;
 }
+@media (max-height: 700px) {
+  .comfy-command-menu .p-tieredmenu-submenu {
+    @apply absolute max-h-[90vh] overflow-y-auto;
+  }
+  /* Help (last) submenu upward offset in compact mode */
+  .p-tieredmenu-root-list
+    > .p-tieredmenu-item:last-of-type
+    .p-tieredmenu-submenu {
+    top: -188px !important;
+  }
+}
 </style>