style: Spacing

Author: DrJKL

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -2,23 +2,13 @@
   <SidebarTabTemplate
     :title="isInFolderView ? '' : $t('sideToolbar.mediaAssets.title')"
   >
-    <template #tool-buttons>
-      <!-- Fake Button for sizing consistency -->
-      <Button
-        icon="pi pi-folder-plus"
-        text
-        severity="secondary"
-        class="invisible w-0"
-        disabled
-      />
-    </template>
     <template #alt-title>
       <div
         v-if="isInFolderView"
         class="flex w-full items-center justify-between gap-2"
       >
         <div class="flex items-center gap-2">
-          <span>{{ $t('Job ID') }}:</span>
+          <span class="font-bold">{{ $t('Job ID') }}:</span>
           <span class="text-sm">{{ folderPromptId?.substring(0, 8) }}</span>
           <button
             class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
@@ -35,7 +25,7 @@
     </template>
     <template #header>
       <!-- Job Detail View Header -->
-      <div v-if="isInFolderView" class="p-2 2xl:p-4">
+      <div v-if="isInFolderView" class="px-2 2xl:px-4">
         <IconTextButton
           :label="$t('sideToolbar.backToAssets')"
           type="secondary"
@@ -47,7 +37,7 @@
         </IconTextButton>
       </div>
       <!-- Normal Tab View -->
-      <TabList v-else v-model="activeTab" class="pt-2 px-2 2xl:px-4">
+      <TabList v-else v-model="activeTab" class="px-2 2xl:px-4">
         <Tab value="output">{{ $t('sideToolbar.labels.generated') }}</Tab>
         <Tab value="input">{{ $t('sideToolbar.labels.imported') }}</Tab>
       </TabList>
@@ -56,7 +46,7 @@
         v-model:search-query="searchQuery"
         v-model:sort-by="sortBy"
         v-model:media-type-filters="mediaTypeFilters"
-        class="pt-2 pb-1 px-2 2xl:px-4"
+        class="pb-1 px-2 2xl:px-4"
         :show-generation-time-sort="activeTab === 'output'"
       />
     </template>
@@ -180,7 +170,6 @@
 
 <script setup lang="ts">
 import { useDebounceFn, useElementHover, useResizeObserver } from '@vueuse/core'
-import { Button } from 'primevue'
 import ProgressSpinner from 'primevue/progressspinner'
 import { useToast } from 'primevue/usetoast'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'

src/components/sidebar/tabs/SidebarTabTemplate.vue

@@ -3,9 +3,9 @@
     class="comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col"
     :class="props.class"
   >
-    <div class="comfy-vue-side-bar-header">
+    <div class="comfy-vue-side-bar-header flex flex-col gap-2">
       <Toolbar
-        class="min-h-9 rounded-none border-x-0 border-t-0 px-2 2xl:px-4 py-1"
+        class="min-h-15.5 rounded-none border-x-0 border-t-0 px-2 2xl:px-4"
       >
         <template #start>
           <span class="truncate font-bold" :title="props.title">
@@ -14,11 +14,11 @@
           <slot name="alt-title" />
         </template>
         <template #end>
-          <div
+          <!-- <div
             class="touch:w-auto touch:opacity-100 flex flex-row transition-all duration-200 motion-safe:w-0 motion-safe:opacity-0 motion-safe:group-focus-within/sidebar-tab:w-auto motion-safe:group-focus-within/sidebar-tab:opacity-100 motion-safe:group-hover/sidebar-tab:w-auto motion-safe:group-hover/sidebar-tab:opacity-100"
-          >
-            <slot name="tool-buttons" />
-          </div>
+          > -->
+          <slot name="tool-buttons" />
+          <!-- </div> -->
         </template>
       </Toolbar>
       <slot name="header" />