fix sidebar top toolbar ui issue

src/views/Layout/MainLayout.vue

@@ -21,7 +21,7 @@
                     :class="['group/main-layout flex-1 h-full min-w-0', { 'aside-collapsed': isAsideCollapsedStatic }]"
                     @layout="handleLayout">
                     <template #default="{ layout }">
-                        <ResizablePanel :default-size="mainDefaultSize" :order="1">
+                        <ResizablePanel :default-size="mainDefaultSize" :order="1" :size-unit="'px'">
                             <RouterView v-slot="{ Component }">
                                 <KeepAlive exclude="ChartsInstance, ChartsMutual">
                                     <component :is="Component" />
@@ -42,6 +42,7 @@
                             :collapsed-size="0"
                             collapsible
                             :order="2"
+                            :size-unit="'px'"
                             :style="{ maxWidth: `${asideMaxPx}px` }">
                             <Sidebar></Sidebar>
                         </ResizablePanel>

src/views/Sidebar/Sidebar.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="x-aside-container">
         <div style="display: flex; align-items: baseline">
-            <div style="flex: 1; padding: 10px; padding-left: 0">
+            <div class="search-container" style="flex: 1; padding: 10px; padding-left: 0">
                 <button
                     type="button"
-                    class="border-input dark:bg-input/30 flex h-9 w-full items-center gap-2 rounded-md border bg-transparent px-3 shadow-xs transition-[color,box-shadow] hover:border-ring cursor-pointer"
+                    class="border-input dark:bg-input/30 flex h-9 w-full items-center gap-2 rounded-md border bg-transparent px-3 shadow-xs transition-[color,box-shadow] hover:border-ring cursor-pointer overflow-hidden"
                     @click="openGlobalSearch">
                     <Search class="size-4 shrink-0 opacity-50" />
-                    <span class="flex-1 text-left text-sm text-muted-foreground truncate">{{
+                    <span class="search-text flex-1 min-w-0 text-left text-sm text-muted-foreground truncate">{{
                         t('side_panel.search_placeholder')
                     }}</span>
-                    <Kbd>{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
-                    <Kbd>K</Kbd>
+                    <Kbd class="search-kbd shrink-0">{{ isMac ? '⌘' : 'Ctrl' }}</Kbd>
+                    <Kbd class="search-kbd shrink-0">K</Kbd>
                 </button>
             </div>
             <div class="flex items-center mx-1 gap-1">
@@ -373,4 +373,20 @@
         font-size: 12px;
         margin-left: 10px;
     }
+
+    .search-container {
+        container-type: inline-size;
+    }
+
+    @container (max-width: 150px) {
+        .search-text {
+            display: none;
+        }
+    }
+
+    @container (max-width: 80px) {
+        .search-kbd {
+            display: none;
+        }
+    }
 </style>

src/vite.config.js

@@ -124,6 +124,7 @@ export default defineConfig(({ mode }) => {
                 'reka-ui',
                 'pinia',
                 'vue-i18n',
+                'tailwindcss',
                 'lucide-vue-next',
                 '@vueuse/core',
                 'vue-sonner',