From da332ed75d6241ffcfac87eb72fafc5e70e0c097 Mon Sep 17 00:00:00 2001 From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com> Date: Sat, 27 Sep 2025 03:13:50 +0100 Subject: [PATCH] Add compact menu style for smaller window heights (#5323) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/components/topbar/CommandMenubar.vue | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/topbar/CommandMenubar.vue b/src/components/topbar/CommandMenubar.vue index e9f33f812..5d03d9c67 100644 --- a/src/components/topbar/CommandMenubar.vue +++ b/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; + } +}