From 1ada6dbfc6ca7809b78b50974a3464c8e1677f12 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Fri, 6 Mar 2026 20:10:59 -0800 Subject: [PATCH] fix: align run controls with queue modal design (#9134) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - move queue batch controls to the left of the run button - align run control styling to the Figma queue modal spec using PrimeVue PT/Tailwind (secondary background on batch + dropdown, primary run button) - normalize control heights to match actionbar buttons and tighten dropdown hit area - update run typography/spacing and replace all three chevrons (dropdown + batch up/down) with the requested SVG Design: https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3845-23904&m=dev image ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9134-fix-align-run-controls-with-queue-modal-design-3106d73d36508160afcedbcfe4b98291) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions Co-authored-by: GitHub Action --- .../tabs/terminal/BaseTerminal.vue | 11 +- .../install/InstallLocationPicker.vue | 14 +- .../src/components/maintenance/TaskCard.vue | 4 +- .../src/views/DesktopDialogView.vue | 4 +- .../src/views/DesktopUpdateView.vue | 4 +- apps/desktop-ui/src/views/InstallView.vue | 6 +- apps/desktop-ui/src/views/MaintenanceView.vue | 16 +- .../desktop-ui/src/views/NotSupportedView.vue | 4 +- apps/desktop-ui/src/views/ServerStartView.vue | 14 +- browser_tests/fixtures/ComfyPage.ts | 4 +- browser_tests/fixtures/selectors.ts | 1 + browser_tests/helpers/actionbar.ts | 6 +- ...-error-unconnected-slot-chromium-linux.png | Bin 102393 -> 102394 bytes ...e-default-workflow-mobile-chrome-linux.png | Bin 30910 -> 30872 bytes ...obile-empty-canvas-mobile-chrome-linux.png | Bin 18554 -> 18535 bytes ...-image-and-webm-preview-chromium-linux.png | Bin 92921 -> 92795 bytes ...ts-when-saved-offscreen-chromium-linux.png | Bin 105600 -> 105556 bytes ...vue-groups-create-group-chromium-linux.png | Bin 115149 -> 115118 bytes ...-groups-fit-to-contents-chromium-linux.png | Bin 58506 -> 58491 bytes ...s-paned-with-touch-mobile-chrome-linux.png | Bin 26029 -> 26051 bytes .../zoomed-in-ctrl-shift-chromium-linux.png | Bin 30409 -> 30364 bytes .../vue-node-dragging-link-chromium-linux.png | Bin 63895 -> 63799 bytes ...ode-input-drag-ctrl-alt-chromium-linux.png | Bin 63577 -> 63601 bytes ...nput-drag-reuses-origin-chromium-linux.png | Bin 63190 -> 63199 bytes ...node-reroute-input-drag-chromium-linux.png | Bin 65321 -> 65334 bytes ...route-output-shift-drag-chromium-linux.png | Bin 65198 -> 65168 bytes ...shift-output-multi-link-chromium-linux.png | Bin 64624 -> 64649 bytes .../vue-node-snap-to-node-chromium-linux.png | Bin 61731 -> 61739 bytes .../vue-node-snap-to-slot-chromium-linux.png | Bin 61063 -> 61067 bytes ...tiple-promoted-previews-chromium-linux.png | Bin 90325 -> 90200 bytes .../vue-node-moved-node-chromium-linux.png | Bin 97729 -> 97702 bytes ...e-moved-node-touch-mobile-chrome-linux.png | Bin 27568 -> 27548 bytes ...vue-node-bypassed-state-chromium-linux.png | Bin 110341 -> 110320 bytes ...-node-custom-color-blue-chromium-linux.png | Bin 109247 -> 109215 bytes ...-colors-dark-all-colors-chromium-linux.png | Bin 140768 -> 140744 bytes ...colors-light-all-colors-chromium-linux.png | Bin 142143 -> 142078 bytes .../vue-node-muted-state-chromium-linux.png | Bin 109675 -> 109644 bytes .../actionbar/BatchCountEdit.test.ts | 98 ++++++++++ src/components/actionbar/BatchCountEdit.vue | 148 +++++++++----- .../ComfyRunButton/ComfyQueueButton.test.ts | 69 +++---- .../ComfyRunButton/ComfyQueueButton.vue | 181 +++++++++++------- src/components/actionbar/TinyChevronIcon.vue | 26 +++ .../ui/button-group/ButtonGroup.vue | 26 +++ src/components/ui/button/button.variants.ts | 2 +- .../manager/button/PackUpdateButton.vue | 2 +- 45 files changed, 439 insertions(+), 201 deletions(-) create mode 100644 src/components/actionbar/BatchCountEdit.test.ts create mode 100644 src/components/actionbar/TinyChevronIcon.vue create mode 100644 src/components/ui/button-group/ButtonGroup.vue diff --git a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue index 3bc8db4cf3..4589aedc70 100644 --- a/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue +++ b/apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue @@ -1,10 +1,7 @@ diff --git a/apps/desktop-ui/src/views/DesktopDialogView.vue b/apps/desktop-ui/src/views/DesktopDialogView.vue index 3fd28c35cf..0bc5e01d9a 100644 --- a/apps/desktop-ui/src/views/DesktopDialogView.vue +++ b/apps/desktop-ui/src/views/DesktopDialogView.vue @@ -1,6 +1,6 @@