Less padding on sidebar tabs for small screens (#1511)

* Reduce searchbox and tree padding for small screen

* Smaller buttons

src/components/common/TreeExplorer.vue

@@ -1,6 +1,6 @@
 <template>
   <Tree
-    class="tree-explorer"
+    class="tree-explorer p-2 2xl:p-4"
     :class="props.class"
     v-model:expandedKeys="expandedKeys"
     v-model:selectionKeys="selectionKeys"

src/components/sidebar/tabs/ModelLibrarySidebarTab.vue

@@ -21,7 +21,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="model-lib-search-box p-4"
+        class="model-lib-search-box p-2 2xl:p-4"
         v-model:modelValue="searchQuery"
         :placeholder="$t('searchModels') + '...'"
         @search="handleSearch"

src/components/sidebar/tabs/NodeLibrarySidebarTab.vue

@@ -23,7 +23,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="node-lib-search-box p-4"
+        class="node-lib-search-box p-2 2xl:p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         @show-filter="($event) => searchFilter.toggle($event)"

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -5,7 +5,7 @@
   >
     <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"
+        class="flex-shrink-0 border-x-0 border-t-0 rounded-none px-2 py-1 min-h-8"
       >
         <template #start>
           <span class="text-sm">{{ props.title.toUpperCase() }}</span>
@@ -32,3 +32,9 @@ const props = defineProps<{
   class?: string
 }>()
 </script>
+
+<style scoped>
+:deep(.p-toolbar-end) .p-button {
+  @apply py-1 2xl:py-2;
+}
+</style>

src/components/sidebar/tabs/WorkflowsSidebarTab.vue

@@ -28,7 +28,7 @@
     </template>
     <template #header>
       <SearchBox
-        class="workflows-search-box p-4"
+        class="workflows-search-box p-2 2xl:p-4"
         v-model:modelValue="searchQuery"
         @search="handleSearch"
         :placeholder="$t('searchWorkflows') + '...'"