From 2731a9da365736d58fbd08a61323c7f4f44046bd Mon Sep 17 00:00:00 2001
From: Sonia Appasamy <sonia@tailscale.com>
Date: Wed, 6 Dec 2023 14:12:47 -0500
Subject: [PATCH] client/web: fix exit node selector styling

Remove padding on top of search bar, remove rounded corners of
bottom border of earch bar, and add auto focus.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>
---
 client/web/src/components/exit-node-selector.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/web/src/components/exit-node-selector.tsx b/client/web/src/components/exit-node-selector.tsx
index 0f47ffae4..5b629527c 100644
--- a/client/web/src/components/exit-node-selector.tsx
+++ b/client/web/src/components/exit-node-selector.tsx
@@ -205,10 +205,11 @@ function ExitNodeSelectorInner({
   )
 
   return (
-    <div className="w-[calc(var(--radix-popover-trigger-width)-16px)] py-1 rounded-lg shadow">
+    <div className="w-[calc(var(--radix-popover-trigger-width)-16px)] pb-1 rounded-lg shadow">
       <SearchInput
         name="exit-node-search"
-        inputClassName="w-full px-4 py-2"
+        inputClassName="w-full px-4 py-2 border-none rounded-b-none"
+        autoFocus
         autoCorrect="off"
         autoComplete="off"
         autoCapitalize="off"
@@ -231,7 +232,7 @@ function ExitNodeSelectorInner({
               group.nodes.length > 0 && (
                 <div
                   key={group.id}
-                  className="pb-1 mb-1 border-b last:border-b-0 last:mb-0"
+                  className="pb-1 mb-1 border-b last:border-b-0 border-gray-200 last:mb-0"
                 >
                   {group.name && (
                     <div className="px-4 py-2 text-gray-500 text-xs font-medium uppercase tracking-wide">