[fix] Correct WhatsNew popup arrow alignment with help center icon (#5137)

* [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 <[email protected]>

* fix: icon-size should be variable

---------

Co-authored-by: Jin Yi <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

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

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 {