From 2f6156496bdba9a3e8368f2f0c323f82940352fd Mon Sep 17 00:00:00 2001 From: bymyself Date: Wed, 20 Aug 2025 15:50:25 -0700 Subject: [PATCH 1/4] [fix] Correct WhatsNew popup arrow alignment with help center icon The arrow positioning was not accounting for additional sidebar icons (terminal and shortcuts) that were added below the help center icon, causing misalignment. Updated the calculation to properly position the arrow relative to the help center icon's current location. Fixes #5126 --- src/components/helpcenter/WhatsNewPopup.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/helpcenter/WhatsNewPopup.vue b/src/components/helpcenter/WhatsNewPopup.vue index 26d1dc8a05..2008bdda54 100644 --- a/src/components/helpcenter/WhatsNewPopup.vue +++ b/src/components/helpcenter/WhatsNewPopup.vue @@ -136,8 +136,6 @@ const closePopup = async () => { hide() } -// Learn more handled by anchor href - // const handleCTA = async () => { // window.open('https://docs.comfy.org/installation/update_comfyui', '_blank') // await closePopup() @@ -171,8 +169,8 @@ defineExpose({ .help-center-arrow { position: absolute; bottom: calc( - var(--sidebar-width, 4rem) + 0.25rem - ); /* Position toward center of help center icon */ + var(--sidebar-width, 4rem) * 2 + 0.25rem + ); /* Position toward center of help center icon (accounting for 2 icons below) */ transform: none; z-index: 999; pointer-events: none; From 6cdb403e59f581f841e4a8a89f32e19d9cbf234b Mon Sep 17 00:00:00 2001 From: bymyself Date: Sun, 24 Aug 2025 09:50:54 -0700 Subject: [PATCH 2/4] [fix] Update small sidebar arrow positioning and improve center alignment - Fixed small sidebar rule to use consistent calculation with normal sidebar - Updated positioning to use half icon height for better center alignment - Both normal and small sidebar now use dynamic CSS variable calculations Addresses feedback from review by viva-jinyi on CSS specificity and positioning accuracy. --- src/components/helpcenter/WhatsNewPopup.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/helpcenter/WhatsNewPopup.vue b/src/components/helpcenter/WhatsNewPopup.vue index 2008bdda54..eead89744d 100644 --- a/src/components/helpcenter/WhatsNewPopup.vue +++ b/src/components/helpcenter/WhatsNewPopup.vue @@ -169,8 +169,8 @@ defineExpose({ .help-center-arrow { position: absolute; bottom: calc( - var(--sidebar-width, 4rem) * 2 + 0.25rem - ); /* Position toward center of help center icon (accounting for 2 icons below) */ + var(--sidebar-width, 4rem) * 2 + var(--sidebar-width, 4rem) / 2 + ); /* Position to center of help center icon (2 icons below + half icon height for center) */ transform: none; z-index: 999; pointer-events: none; @@ -183,7 +183,9 @@ defineExpose({ .whats-new-popup-container.sidebar-left.small-sidebar .help-center-arrow { left: -14px; /* Overlap with popup outline */ - bottom: calc(2.5rem + 0.25rem); /* Adjust for small sidebar */ + bottom: calc( + var(--sidebar-width) * 2 + var(--sidebar-width) / 2 + ); /* Position to center of help center icon (2 icons below + half icon height for center) */ } /* Sidebar positioning classes applied by parent */ From ed8abd7f2841389fb3565bf90003d05d12e66620 Mon Sep 17 00:00:00 2001 From: Jin Yi Date: Tue, 26 Aug 2025 13:31:38 +0900 Subject: [PATCH 3/4] [fix] Make sidebar CSS variables global for teleported components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move --sidebar-width CSS variable to :root to make it accessible globally - This allows teleported components like WhatsNewPopup to reference sidebar dimensions - Adjust arrow positioning calculations for better alignment with help center icon - Add explanatory comments about why these variables need to be global 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/helpcenter/WhatsNewPopup.vue | 10 ++++++---- src/components/sidebar/SideToolbar.vue | 19 ++++++++++++++++--- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/helpcenter/WhatsNewPopup.vue b/src/components/helpcenter/WhatsNewPopup.vue index eead89744d..9f53ceb16d 100644 --- a/src/components/helpcenter/WhatsNewPopup.vue +++ b/src/components/helpcenter/WhatsNewPopup.vue @@ -159,8 +159,10 @@ defineExpose({ +