diff --git a/ui/packages/layout/AiSearchBar.vue b/ui/packages/layout/AiSearchBar.vue
index 47f865b1..bf65d8cf 100644
--- a/ui/packages/layout/AiSearchBar.vue
+++ b/ui/packages/layout/AiSearchBar.vue
@@ -20,15 +20,14 @@ export default {
     size: {default: "small"}
   },
   computed: {
-    isSingleRow() {
-      return this.height <= 45
-    },
+    isSingleRow: v => v.height <= 45
   },
   data() {
     return {
       height: 0,
       rightHeight: 0,
-      searchBarStyle: {}
+      searchBarStyle: {},
+      observer: null
     }
   },
   methods: {
@@ -39,13 +38,21 @@ export default {
       } else {
         this.searchBarStyle.marginBottom = '0'
       }
+    },
+    initSize() {
+      this.height = this.$refs?.AiSearchBarZone?.offsetHeight
+      this.rightHeight = this.$refs?.searchRightZone?.offsetHeight
     }
   },
   mounted() {
     this.$nextTick(() => {
-      this.height = this.$refs?.AiSearchBarZone?.offsetHeight
-      this.rightHeight = this.$refs?.searchRightZone?.offsetHeight
+      this.initSize()
+      this.observer = new ResizeObserver(this.initSize)
+      this.observer.observe(this.$refs?.AiSearchBarZone)
     })
+  },
+  beforeDestroy() {
+    this.observer?.disconnect()
   }
 }
 </script>
@@ -62,7 +69,7 @@ export default {
     border-bottom: 1px solid #eee;
   }
 
-  :deep(.searchLeftZone ){
+  :deep(.searchLeftZone ) {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -71,7 +78,7 @@ export default {
     gap: 8px;
   }
 
-  :deep(.searchRightZone ){
+  :deep(.searchRightZone ) {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -95,7 +102,7 @@ export default {
   margin-top: 8px;
 }
 
-:deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ){
+:deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ) {
   margin-left: 0;
 }
 </style>