From 237fca0bf1e4f14218bd313c13162f47d0c41007 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Wed, 15 Jan 2025 20:16:39 -0500
Subject: [PATCH] [CodeHealth] Use scoped CSS for SideToolbar (#2264)

---
 src/components/sidebar/SideToolbar.vue | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 3972518fb..3e7888642 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <teleport :to="teleportTarget">
-    <nav :class="'side-tool-bar-container' + (isSmall ? ' small-sidebar' : '')">
+    <nav class="side-tool-bar-container" :class="{ 'small-sidebar': isSmall }">
       <SidebarIcon
         v-for="tab in tabs"
         :key="tab.id"
@@ -69,17 +69,6 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 }
 </script>
 
-<style>
-:root {
-  --sidebar-width: 4rem;
-  --sidebar-icon-size: 1.5rem;
-}
-:root .small-sidebar {
-  --sidebar-width: 2.5rem;
-  --sidebar-icon-size: 1rem;
-}
-</style>
-
 <style scoped>
 .side-tool-bar-container {
   display: flex;
@@ -94,6 +83,14 @@ 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: 1.5rem;
+}
+
+.side-tool-bar-container.small-sidebar {
+  --sidebar-width: 2.5rem;
+  --sidebar-icon-size: 1rem;
 }
 
 .side-tool-bar-end {