fix: resolve bot styling issue (#375)

apps/web/src/components/searchable-select-popover/index.vue

@@ -54,7 +54,7 @@
         <div
           v-for="group in filteredGroups"
           :key="group.key"
-          class="p-1"
+          class="p-1 *:mt-1 overflow-hidden"
         >
           <div
             v-if="showGroupHeaders && group.label"

apps/web/src/pages/bots/components/bot-access.vue

@@ -63,7 +63,7 @@
     </section>
 
     <!-- Rules -->
-    <section class="rounded-lg border border-border bg-card p-4 space-y-4">
+    <section class="rounded-lg border border-border bg-card p-4 [&>:nth-of-type(n+2)]:mt-4">
       <div class="flex items-center justify-between">
         <div>
           <h3 class="text-sm font-semibold text-foreground">
@@ -83,7 +83,6 @@
           {{ $t('bots.access.addRule') }}
         </Button>
       </div>
-
       <div
         v-if="isLoadingRules"
         class="flex justify-center py-8"
@@ -93,6 +92,7 @@
       <Empty
         v-else-if="rules.length === 0"
         :title="$t('bots.access.rulesEmpty')"
+        class="empty:hidden"
         :description="$t('bots.access.rulesEmptyDescription')"
       />
       <div

apps/web/src/pages/bots/components/bot-channels.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex gap-6 absolute inset-0  mx-auto p-4">
+  <div class="flex gap-6 absolute inset-0  mx-auto py-4 pl-4">
     <!-- Left: Channel list -->
-    <div class="h-full flex-col border rounded-lg overflow-hidden flex">
+    <div class="h-full flex-col border rounded-lg overflow-hidden flex sticky top-0">
       <ScrollArea class="w-60 flex-1 flex flex-col ">
         <!-- Loading -->
         <div
@@ -115,20 +115,22 @@
     </div>
     <!-- Right: Channel settings -->
     <div class="flex-1 min-w-0">
-      <div
-        v-if="!selectedType || !selectedItem"
-        class="flex h-full items-center justify-center text-xs text-muted-foreground"
-      >
-        {{ configuredChannels.length > 0 ? $t('bots.channels.selectType') : '' }}
-      </div>
+      <ScrollArea class="h-full">
+        <div 
+          v-if="!selectedType || !selectedItem"
+          class="flex h-full items-center justify-center text-xs text-muted-foreground"
+        >
+          {{ configuredChannels.length > 0 ? $t('bots.channels.selectType') : '' }}
+        </div>
 
-      <ChannelSettingsPanel
-        v-else
-        :key="selectedType"
-        :bot-id="botId"
-        :channel-item="selectedItem"
-        @saved="refetch()"
-      />
+        <ChannelSettingsPanel
+          v-else
+          :key="selectedType"
+          :bot-id="botId"
+          :channel-item="selectedItem"
+          @saved="refetch()"
+        />
+      </ScrollArea>
     </div>
   </div>
 </template>

apps/web/src/pages/bots/components/bot-mcp.vue

@@ -204,6 +204,7 @@
                 <Label>{{ $t('mcp.cwd') }}</Label>
                 <Input
                   v-model="formData.cwd"
+                  class="max-w-85"
                   :placeholder="$t('mcp.cwdPlaceholder')"
                 />
               </div>
@@ -227,8 +228,10 @@
               </div>
               <div class="space-y-1.5">
                 <Label>Transport</Label>
-                <Select v-model="formData.transport">
-                  <SelectTrigger class="w-full">
+                <Select
+                  v-model="formData.transport"
+                >
+                  <SelectTrigger class="min-w-60">
                     <SelectValue />
                   </SelectTrigger>
                   <SelectContent>

apps/web/src/pages/bots/components/bot-memory.vue

@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <ScrollArea class="flex-1 min-h-0">
+      <ScrollArea class="flex-1 min-h-0 ">
         <div class="p-2 space-y-1">
           <div
             v-if="loading && memories.length === 0"

apps/web/src/pages/bots/components/channel-settings-panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="space-y-6">
+  <div class="space-y-6 mr-4">
     <!-- Header -->
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-3">
@@ -208,7 +208,7 @@
 
     <Separator />
 
-    <div class="flex justify-end gap-2">
+    <div class="flex justify-end gap-2 ">
       <template v-if="isEditMode">
         <Button
           :disabled="isBusy"

apps/web/src/pages/bots/components/model-options.vue

@@ -35,12 +35,13 @@
       </div>
 
       <button
+
         v-for="option in group.items"
         :key="option.value"
         type="button"
         role="option"
         :aria-selected="modelValue === option.value"
-        class="relative flex  w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none hover:bg-accent hover:text-accent-foreground"
+        class="relative flex  w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none hover:bg-accent hover:text-accent-foreground [&_+button]:mt-1"
         :class="{ 'bg-accent': modelValue === option.value }"
         @click="$emit('update:modelValue', option.value)"
       >

apps/web/src/pages/home/components/session-sidebar.vue

@@ -87,13 +87,14 @@
             <DropdownMenuItem
               v-for="opt in filterOptions"
               :key="opt.value ?? 'all'"
+              class="relative"
               @click="filterType = opt.value"
             >
               <Check
                 v-if="filterType === opt.value"
-                class="size-3 mr-2"
+                class="size-3 mr-2 absolute"
               />
-              <span :class="filterType !== opt.value ? 'ml-5' : ''">
+              <span class="ml-5">
                 {{ opt.label }}
               </span>
             </DropdownMenuItem>

apps/web/src/pages/home/components/tool-call-write.vue

@@ -98,4 +98,5 @@ function handleOpenFile() {
     openInFileManager(filePath.value, false)
   }
 }
+
 </script>

apps/web/src/pages/web-search/components/add-search-provider.vue

@@ -14,9 +14,7 @@
           class="w-full shadow-none! text-muted-foreground mb-4"
           variant="outline"
         >
-          <Plus
-            class="mr-1"
-          /> {{ $t('webSearch.add') }}
+          <Plus class="mr-1" /> {{ $t('webSearch.add') }}
         </Button>
       </template>
       <template #body>
@@ -28,13 +26,13 @@
             <FormItem>
               <Label
                 class="mb-2"
-                :for="componentField.id || 'search-provider-create-name'"
+                :for="'search-provider-create-name'"
               >
                 {{ $t('common.name') }}
               </Label>
               <FormControl>
                 <Input
-                  :id="componentField.id || 'search-provider-create-name'"
+                  :id="'search-provider-create-name'"
                   type="text"
                   :placeholder="$t('common.namePlaceholder')"
                   v-bind="componentField"
@@ -50,14 +48,14 @@
             <FormItem>
               <Label
                 class="mb-2"
-                :for="componentField.id || 'search-provider-create-type'"
+                :for="'search-provider-create-type'"
               >
                 {{ $t('webSearch.provider') }}
               </Label>
               <FormControl>
                 <Select v-bind="componentField">
                   <SelectTrigger
-                    :id="componentField.id || 'search-provider-create-type'"
+                    :id="'search-provider-create-type'"
                     class="w-full"
                     :aria-label="$t('webSearch.provider')"
                   >