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

This commit is contained in:
Quicy
2026-04-07 09:36:45 +08:00
committed by 晨苒
parent af97ab22ee
commit 18e19cc176
3 changed files with 11 additions and 11 deletions
+5 -5
View File
@@ -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>
+2 -2
View File
@@ -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
@@ -53,7 +53,7 @@
class="size-3.5 shrink-0"
/>
<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>