From 916c1248e3948d76babb60b5ea0b4dc57d03e989 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Wed, 21 Jan 2026 06:10:31 +0900
Subject: [PATCH] [bugfix] Fix search bar height alignment in
 MediaAssetFilterBar (#8171)

---
 .../assets/components/MediaAssetFilterBar.vue | 48 +++++++------------
 1 file changed, 17 insertions(+), 31 deletions(-)

diff --git a/src/platform/assets/components/MediaAssetFilterBar.vue b/src/platform/assets/components/MediaAssetFilterBar.vue
index 6a0fcdb93..0442f5f56 100644
--- a/src/platform/assets/components/MediaAssetFilterBar.vue
+++ b/src/platform/assets/components/MediaAssetFilterBar.vue
@@ -1,40 +1,26 @@
 <template>
-  <div class="flex gap-3">
+  <div class="flex gap-3 items-center">
     <SearchBox
       :model-value="searchQuery"
       :placeholder="$t('sideToolbar.searchAssets') + '...'"
       @update:model-value="handleSearchChange"
     />
-    <MediaAssetFilterButton
-      v-if="isCloud"
-      v-tooltip.top="{ value: $t('assetBrowser.filterBy') }"
-      size="md"
-    >
-      <template #default="{ close }">
-        <MediaAssetFilterMenu
-          :media-type-filters="mediaTypeFilters"
-          :close="close"
-          @update:media-type-filters="handleMediaTypeFiltersChange"
-        />
-      </template>
-    </MediaAssetFilterButton>
-    <AssetSortButton
-      v-if="isCloud"
-      v-tooltip.top="{ value: $t('assetBrowser.sortBy') }"
-      size="md"
-    >
-      <template #default="{ close }">
-        <MediaAssetSortMenu
-          v-model:sort-by="sortBy"
-          :show-generation-time-sort
-          :close="close"
-        />
-      </template>
-    </AssetSortButton>
-    <MediaAssetViewModeToggle
-      v-if="isQueuePanelV2Enabled"
-      v-model:view-mode="viewMode"
-    />
+    <div class="flex gap-1.5 items-center">
+      <MediaAssetFilterButton v-if="isCloud" v-tooltip.top="{ value: $t('assetBrowser.filterBy') }" size="md">
+        <template #default="{ close }">
+          <MediaAssetFilterMenu
+            :media-type-filters
+            :close
+            @update:media-type-filters="handleMediaTypeFiltersChange" />
+        </template>
+      </MediaAssetFilterButton>
+      <AssetSortButton v-if="isCloud" v-tooltip.top="{ value: $t('assetBrowser.sortBy') }" size="md">
+        <template #default="{ close }">
+          <MediaAssetSortMenu v-model:sort-by="sortBy" :show-generation-time-sort :close />
+        </template>
+      </AssetSortButton>
+      <MediaAssetViewModeToggle v-if="isQueuePanelV2Enabled" v-model:view-mode="viewMode" />
+    </div>
   </div>
 </template>