From e8f0ec5bb3ed28951cfa0a6710f5323e8be5efc3 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Wed, 27 Aug 2025 06:17:13 -0700
Subject: [PATCH] [fix] Correct WhatsNew popup arrow alignment with help center
 icon (#5137)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

* [fix] Make sidebar CSS variables global for teleported components

- 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 <noreply@anthropic.com>

* fix: icon-size should be variable

---------

Co-authored-by: Jin Yi <jin12cc@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/helpcenter/WhatsNewPopup.vue | 15 +++++++++------
 src/components/sidebar/SideToolbar.vue      | 19 ++++++++++++++++---
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/helpcenter/WhatsNewPopup.vue b/src/components/helpcenter/WhatsNewPopup.vue
index 26d1dc8a0..a1b12bc5b 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()
@@ -161,8 +159,10 @@ defineExpose({
 <style scoped>
 /* Popup container - positioning handled by parent */
 .whats-new-popup-container {
+  --whats-new-popup-bottom: 1rem;
+
   position: absolute;
-  bottom: 1rem;
+  bottom: var(--whats-new-popup-bottom);
   z-index: 1000;
   pointer-events: auto;
 }
@@ -171,8 +171,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) * 2 + var(--sidebar-width) / 2
+  ); /* Position to center of help center icon (2 icons below + half icon height for center) */
   transform: none;
   z-index: 999;
   pointer-events: none;
@@ -185,7 +185,10 @@ 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-icon-size) / 2 -
+      var(--whats-new-popup-bottom)
+  ); /* Position to center of help center icon (2 icons below + half icon height for center - whats new popup bottom position ) */
 }
 
 /* Sidebar positioning classes applied by parent */
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 72a451d81..d283217e1 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -76,6 +76,22 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 }
 </script>
 
+<style>
+/* Global CSS variables for sidebar
+ * These variables need to be global (not scoped) because they are used by
+ * teleported components like WhatsNewPopup that render outside the sidebar
+ * but need to reference sidebar dimensions for proper positioning.
+ */
+:root {
+  --sidebar-width: 4rem;
+  --sidebar-icon-size: 1rem;
+}
+
+:root:has(.side-tool-bar-container.small-sidebar) {
+  --sidebar-width: 2.5rem;
+}
+</style>
+
 <style scoped>
 .side-tool-bar-container {
   display: flex;
@@ -88,9 +104,6 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
   background-color: var(--comfy-menu-secondary-bg);
   color: var(--fg-color);
   box-shadow: var(--bar-shadow);
-
-  --sidebar-width: 4rem;
-  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-container.small-sidebar {