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

Author: viva-jinyi

src/components/helpcenter/WhatsNewPopup.vue

@@ -159,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;
 }
@@ -169,7 +171,7 @@ defineExpose({
 .help-center-arrow {
   position: absolute;
   bottom: calc(
-    var(--sidebar-width, 4rem) * 2 + var(--sidebar-width, 4rem) / 2
+    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;
@@ -184,8 +186,8 @@ defineExpose({
 .whats-new-popup-container.sidebar-left.small-sidebar .help-center-arrow {
   left: -14px; /* Overlap with popup outline */
   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) */
+    var(--sidebar-width) * 2 + 10px - 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 {