fix(ui): fix text alignment in chat and sidebar hover style issue

apps/web/src/components/sidebar/bot-item.vue

@@ -5,18 +5,18 @@
   >
     <button
       :class="[
-        'group/bot flex items-center gap-2.5 w-full h-[38px] px-2.5 rounded-lg transition-colors',
+        'group/bot flex items-center gap-2.5 w-full h-9.5 px-2.5 rounded-lg transition-colors',
         'group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0',
         isActive
-          ? 'bg-background'
+          ? 'bg-sidebar-accent'
           : bot.status === 'error'
             ? 'opacity-50 cursor-not-allowed'
-            : 'hover:bg-background/60',
+            : 'hover:bg-sidebar-accent/60',
       ]"
       :disabled="bot.status === 'error'"
       @click="handleSelect"
     >
-      <div class="size-[26px] shrink-0 rounded-full border border-border bg-accent overflow-hidden p-px group-data-[collapsible=icon]:mx-auto">
+      <div class="size-6.5 shrink-0 rounded-full border border-border bg-accent overflow-hidden p-px group-data-[collapsible=icon]:mx-auto">
         <img
           v-if="bot.avatar_url"
           :src="bot.avatar_url"
@@ -30,7 +30,7 @@
           {{ avatarFallback }}
         </span>
       </div>
-      <span class="truncate text-xs font-medium text-foreground leading-[18px] flex-1 text-left group-data-[collapsible=icon]:hidden">
+      <span class="truncate text-xs font-medium text-foreground leading-4.5 flex-1 text-left group-data-[collapsible=icon]:hidden">
         {{ bot.display_name || bot.id }}
       </span>
 

apps/web/src/components/sidebar/index.vue

@@ -3,7 +3,7 @@
     <Sidebar collapsible="icon">
       <SidebarHeader class="p-0 border-0">
         <div class="h-1.5 group-data-[collapsible=icon]:hidden" />
-        <div class="h-[38px] flex items-center group-data-[collapsible=icon]:justify-center">
+        <div class="h-9.5 flex items-center group-data-[collapsible=icon]:justify-center">
           <div class="flex items-center gap-1 ml-3 group-data-[collapsible=icon]:hidden">
             <span class="text-[10px] font-medium text-muted-foreground uppercase tracking-[0.7px]">
               {{ t('sidebar.bots') }}
@@ -56,7 +56,7 @@
       <SidebarRail />
 
       <SidebarFooter class="relative border-0 px-2 pb-3.5 pt-2.5">
-        <div class="pointer-events-none absolute -top-[120px] left-0 h-[153px] w-full bg-linear-to-t from-(--sidebar-background) from-18% to-transparent z-10 group-data-[collapsible=icon]:hidden" />
+        <div class="pointer-events-none absolute -top-30 left-0 h-38.25 w-full bg-linear-to-t from-(--sidebar-background) from-18% to-transparent z-10 group-data-[collapsible=icon]:hidden" />
         <SidebarMenu class="gap-2.5">
           <!-- <SidebarMenuItem>
             <SidebarMenuButton

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

@@ -40,7 +40,7 @@
         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"
         :class="{ 'bg-accent': modelValue === option.value }"
         @click="$emit('update:modelValue', option.value)"
       >
@@ -52,8 +52,8 @@
           v-else
           class="size-3.5 shrink-0"
         />
-        <span class="truncate">{{ option.label }}</span>
+        <span class="truncate  ">{{ option.label }}</span>
-        <span class="ml-auto flex items-center gap-1.5">
+        <span class="ml-auto min-w-[50%] flex items-center gap-1.5  text-right">
           <ModelCapabilities
             v-if="option.compatibilities?.length"
             :compatibilities="option.compatibilities"
@@ -61,7 +61,7 @@
           <ContextWindowBadge :context-window="option.contextWindow" />
           <span
             v-if="option.description"
-            class="text-xs text-muted-foreground"
+            class="text-xs text-muted-foreground truncate "
           >
             {{ option.description }}
           </span>