Refactor badge alignment on small screens

This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 21:24:21 +00:00
parent d0fc334de0
commit cb78a2f591

View File

@@ -276,13 +276,13 @@ export function AutocompleteSearch({
<>
<div className="flex-1 min-w-0">
<div className="flex flex-col gap-1">
<span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1">{item.title}</span>
<div className="flex items-center gap-1.5 flex-wrap">
<Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap ${getTypeColor(item.type)}`}>
<span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1 text-left">{item.title}</span>
<div className="flex items-center gap-2 flex-wrap justify-start">
<Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap flex-shrink-0 ${getTypeColor(item.type)}`}>
{getTypeLabel(item.type)}
</Badge>
{item.subtitle && (
<Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap">
<Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap flex-shrink-0">
{item.subtitle}
</Badge>
)}