fix(web): Fix ask sb visual nits (#747)

Author: brendan-kellam

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fixed "Invalid line number XXX in 21-line document" error when a invalid highlight range is passed to the file viewer. [#745](https://github.com/sourcebot-dev/sourcebot/pull/745)
+- Fixed visual nit where ask sb search scope selector would render long repository names poorly. [#747](https://github.com/sourcebot-dev/sourcebot/pull/747)
+- Fixed visual nit where long search previews in ask sb would take up a lot of space. [#747](https://github.com/sourcebot-dev/sourcebot/pull/747)
 
 ## [4.10.11] - 2026-01-16
 

packages/web/src/features/chat/components/chatBox/searchScopeSelector.tsx

@@ -320,23 +320,17 @@ export const SearchScopeSelector = forwardRef<
                                                         >
                                                             <CheckIcon className="h-4 w-4" />
                                                         </div>
-                                                        <div className="flex items-center gap-2 flex-1">
+                                                        <div className="flex flex-row items-center gap-2 w-full overflow-hidden">
                                                             <SearchScopeIcon searchScope={item} />
-                                                            <div className="flex flex-col flex-1">
-                                                                <div className="flex items-center gap-2">
-                                                                    <span className="font-medium">
-                                                                        {item.name}
-                                                                    </span>
-                                                                    {item.type === 'reposet' && (
-                                                                        <Badge
-                                                                            variant="default"
-                                                                            className="text-[10px] px-1.5 py-0 h-4 bg-primary text-primary-foreground"
-                                                                        >
-                                                                            {item.repoCount} repo{item.repoCount === 1 ? '' : 's'}
-                                                                        </Badge>
-                                                                    )}
-                                                                </div>
-                                                            </div>
+                                                            <p className="font-medium truncate-start">{item.name}</p>
+                                                            {item.type === 'reposet' && (
+                                                                <Badge
+                                                                    variant="default"
+                                                                    className="text-[10px] px-1.5 py-0 h-4 bg-primary text-primary-foreground"
+                                                                >
+                                                                    {item.repoCount} repo{item.repoCount === 1 ? '' : 's'}
+                                                                </Badge>
+                                                            )}
                                                         </div>
                                                     </div>
                                                 );

packages/web/src/features/chat/components/chatThread/tools/shared.tsx

@@ -90,7 +90,7 @@ export const ToolHeader = ({ isLoading, isError, isExpanded, label, Icon, onExpa
         <div
             tabIndex={0}
             className={cn(
-                "flex flex-row items-center gap-2 group w-fit select-none",
+                "flex flex-row items-center gap-2 group select-none",
                 {
                     'hover:text-foreground cursor-pointer': !isLoading,
                 },
@@ -107,16 +107,20 @@ export const ToolHeader = ({ isLoading, isError, isExpanded, label, Icon, onExpa
             }}
         >
             {isLoading ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
+                <Loader2 className="w-4 h-4 animate-spin flex-shrink-0" />
             ) : (
-                <Icon className="h-4 w-4" />
+                <Icon className="h-4 w-4 flex-shrink-0" />
             )}
-            <span className={cn("text-sm font-medium",
+            <span
+                className={cn("text-sm font-medium line-clamp-2",
                 {
                     'animate-pulse': isLoading,
                     'text-destructive': isError,
                 }
-            )}>{label}</span>
+            )}
+            >
+                {label}
+            </span>
             {!isLoading && (
                 <div className="opacity-0 group-hover:opacity-100 transition-opacity">
                     {isExpanded ? (