diff --git a/src/renderer/src/components/sidebar/AddRepoHostSelector.tsx b/src/renderer/src/components/sidebar/AddRepoHostSelector.tsx
index 592dfd00cf7..9fa10d5d058 100644
--- a/src/renderer/src/components/sidebar/AddRepoHostSelector.tsx
+++ b/src/renderer/src/components/sidebar/AddRepoHostSelector.tsx
@@ -51,93 +51,82 @@ export function AddRepoHostSelector({
   if (!selectedHost) {
     return null
   }
-  const selectedHealthLabel = getSidebarHostHealthLabel(selectedHost.health)
-
   return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between gap-3">
-        <span className="text-[11px] font-medium text-muted-foreground">
-          {translate('auto.components.sidebar.AddRepoHostSelector.host', 'Host')}
-        </span>
-        <Popover open={open} onOpenChange={onOpenChange}>
-          <PopoverTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              role="combobox"
-              aria-expanded={open}
-              className="h-10 min-w-56 justify-between px-3 text-xs font-normal"
-            >
-              <span className="min-w-0 flex flex-col items-start leading-tight">
-                <span className="max-w-40 truncate">{selectedHost.label}</span>
-                {selectedHost.health !== 'local' && (
-                  <span
-                    title={getHostStatusDetail(selectedHost)}
+    <div className="flex items-center gap-2 text-xs">
+      <span className="font-medium text-muted-foreground">
+        {translate('auto.components.sidebar.AddRepoHostSelector.host', 'Host')}
+      </span>
+      <Popover open={open} onOpenChange={onOpenChange}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            role="combobox"
+            aria-expanded={open}
+            className="h-7 min-w-0 max-w-[18rem] gap-1.5 rounded-md border border-border bg-muted/30 px-2 text-xs font-medium text-foreground hover:bg-accent hover:text-accent-foreground"
+          >
+            <span className="min-w-0 truncate">{selectedHost.label}</span>
+            {selectedHost.health !== 'local' ? (
+              <span
+                title={getHostStatusDetail(selectedHost)}
+                className="shrink-0 text-[11px] font-normal text-muted-foreground"
+              >
+                {getSidebarHostHealthLabel(selectedHost.health)}
+              </span>
+            ) : null}
+            <ChevronsUpDown className="size-3.5 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="w-[min(340px,calc(100vw-1rem))] min-w-[var(--radix-popover-trigger-width)] p-0"
+        >
+          <Command>
+            <CommandList>
+              {hosts.map((host) => {
+                const selected = host.id === selectedHostId
+                const disabled = !canSelectAddRepoHost(host)
+                return (
+                  <CommandItem
+                    key={host.id}
+                    value={`${host.label} ${host.detail}`}
+                    disabled={disabled}
+                    onSelect={() => {
+                      if (disabled) {
+                        return
+                      }
+                      onSelectHost(host.id)
+                      onOpenChange(false)
+                    }}
                     className={cn(
-                      'max-w-40 truncate text-[10px]',
-                      selectedHost.health === 'available'
-                        ? 'text-muted-foreground'
-                        : 'text-destructive'
+                      'items-start gap-2 px-3 py-2 text-xs',
+                      disabled && 'cursor-not-allowed opacity-55'
                     )}
                   >
-                    {selectedHealthLabel}
-                  </span>
-                )}
-              </span>
-              <ChevronsUpDown className="size-3.5 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            align="end"
-            className="w-[min(340px,calc(100vw-1rem))] min-w-[var(--radix-popover-trigger-width)] p-0"
-          >
-            <Command>
-              <CommandList>
-                {hosts.map((host) => {
-                  const selected = host.id === selectedHostId
-                  const disabled = !canSelectAddRepoHost(host)
-                  return (
-                    <CommandItem
-                      key={host.id}
-                      value={`${host.label} ${host.detail}`}
-                      disabled={disabled}
-                      onSelect={() => {
-                        if (disabled) {
-                          return
-                        }
-                        onSelectHost(host.id)
-                        onOpenChange(false)
-                      }}
+                    <Check
                       className={cn(
-                        'items-start gap-2 px-3 py-2 text-xs',
-                        disabled && 'cursor-not-allowed opacity-55'
+                        'mt-0.5 size-3 text-muted-foreground',
+                        selected ? 'opacity-70' : 'opacity-0'
                       )}
-                    >
-                      <Check
-                        className={cn(
-                          'mt-0.5 size-3 text-muted-foreground',
-                          selected ? 'opacity-70' : 'opacity-0'
-                        )}
-                      />
-                      <span className="min-w-0 flex-1">
-                        <span className="flex min-w-0 items-center gap-2">
-                          <span className="truncate font-medium">{host.label}</span>
-                          <span className="shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
-                            {getHostKindLabel(host)}
-                          </span>
-                        </span>
-                        <span className="mt-0.5 block truncate text-[11px] text-muted-foreground">
-                          {getHostStatusDetail(host)}
+                    />
+                    <span className="min-w-0 flex-1">
+                      <span className="flex min-w-0 items-center gap-2">
+                        <span className="truncate font-medium">{host.label}</span>
+                        <span className="shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted-foreground">
+                          {getHostKindLabel(host)}
                         </span>
                       </span>
-                    </CommandItem>
-                  )
-                })}
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      </div>
+                      <span className="mt-0.5 block truncate text-[11px] text-muted-foreground">
+                        {getHostStatusDetail(host)}
+                      </span>
+                    </span>
+                  </CommandItem>
+                )
+              })}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
     </div>
   )
 }