Fix sidebar tab bg color (#1229)

* Fix node library sidebar style

* Fix styles

* nit

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -1,15 +1,18 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.modelLibrary')">
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.modelLibrary')"
+    class="bg-[var(--p-tree-background)]"
+  >
     <template #header>
       <SearchBox
-        class="model-lib-search-box mx-4 mt-4"
+        class="model-lib-search-box p-4"
         v-model:modelValue="searchQuery"
         :placeholder="$t('searchModels') + '...'"
       />
     </template>
     <template #body>
       <TreeExplorer
-        class="model-lib-tree-explorer mt-1"
+        class="model-lib-tree-explorer py-0"
         :roots="renderedRoot.children"
         v-model:expandedKeys="expandedKeys"
         @nodeClick="handleNodeClick"
@@ -209,15 +212,9 @@ watch(
 )
 </script>
 
-<style>
-.pi-fake-spacer {
+<style scoped>
+:deep(.pi-fake-spacer) {
   height: 1px;
   width: 16px;
 }
 </style>
-
-<style scoped>
-:deep(.comfy-vue-side-bar-body) {
-  background: var(--p-tree-background);
-}
-</style>

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -1,5 +1,8 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.nodeLibrary')">
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.nodeLibrary')"
+    class="bg-[var(--p-tree-background)]"
+  >
     <template #tool-buttons>
       <Button
         class="new-folder-button"
@@ -20,7 +23,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="node-lib-search-box mx-4 mt-4"
+        class="node-lib-search-box p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         @show-filter="($event) => searchFilter.toggle($event)"
@@ -30,7 +33,7 @@
         :filters
       />
 
-      <Popover ref="searchFilter" class="node-lib-filter-popup">
+      <Popover ref="searchFilter" class="ml-[-13px]">
         <NodeSearchFilter @addFilter="onAddFilter" />
       </Popover>
     </template>
@@ -39,9 +42,13 @@
         ref="nodeBookmarkTreeExplorerRef"
         :filtered-node-defs="filteredNodeDefs"
       />
-      <Divider v-if="nodeBookmarkStore.bookmarks.length > 0" type="dashed" />
+      <Divider
+        v-show="nodeBookmarkStore.bookmarks.length > 0"
+        type="dashed"
+        class="m-2"
+      />
       <TreeExplorer
-        class="node-lib-tree-explorer mt-1"
+        class="node-lib-tree-explorer py-0"
         :roots="renderedRoot.children"
         v-model:expandedKeys="expandedKeys"
       >
@@ -186,23 +193,3 @@ const onRemoveFilter = (filterAndValue) => {
   handleSearch(searchQuery.value)
 }
 </script>
-
-<style>
-.node-lib-filter-popup {
-  margin-left: -13px;
-}
-</style>
-
-<style scoped>
-:deep(.comfy-vue-side-bar-body) {
-  background: var(--p-tree-background);
-}
-
-:deep(.node-lib-bookmark-tree-explorer) {
-  padding-bottom: 2px;
-}
-
-:deep(.p-divider) {
-  margin: var(--comfy-tree-explorer-item-padding) 0px;
-}
-</style>

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="comfy-vue-side-bar-container flex flex-col h-full">
+  <div
+    class="comfy-vue-side-bar-container flex flex-col h-full"
+    :class="props.class"
+  >
     <div class="comfy-vue-side-bar-header">
       <Toolbar
         class="flex-shrink-0 border-x-0 border-t-0 rounded-none px-2 py-1 min-h-10"
@@ -26,10 +29,8 @@
 import Toolbar from 'primevue/toolbar'
 import ScrollPanel from 'primevue/scrollpanel'
 
-const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  }
-})
+const props = defineProps<{
+  title: string
+  class?: string
+}>()
 </script>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -1,5 +1,8 @@
 <template>
-  <SidebarTabTemplate :title="$t('sideToolbar.workflows')">
+  <SidebarTabTemplate
+    :title="$t('sideToolbar.workflows')"
+    class="bg-[var(--p-tree-background)]"
+  >
     <template #tool-buttons>
       <Button
         class="browse-templates-button"
@@ -25,7 +28,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="workflows-search-box mx-4 my-4"
+        class="workflows-search-box p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('searchWorkflows') + '...'"
@@ -216,9 +219,3 @@ const selectionKeys = computed(() => ({
   [`root/${workflowStore.activeWorkflow?.name}.json`]: true
 }))
 </script>
-
-<style scoped>
-:deep(.comfy-vue-side-bar-body) {
-  background: var(--p-tree-background);
-}
-</style>

src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue

@@ -1,6 +1,6 @@
 <template>
   <TreeExplorer
-    class="node-lib-bookmark-tree-explorer"
+    class="node-lib-bookmark-tree-explorer py-0"
     ref="treeExplorerRef"
     :roots="renderedBookmarkedRoot.children"
     :expandedKeys="expandedKeys"