diff --git a/crates/collab_ui/src/contact_finder.rs b/crates/collab_ui/src/contact_finder.rs
index 65ebee2797cd8a0a0c6db468d75f1c84892f9a5e..25726e381e6242496b83df734d75ef1b19b1b243 100644
--- a/crates/collab_ui/src/contact_finder.rs
+++ b/crates/collab_ui/src/contact_finder.rs
@@ -121,7 +121,11 @@ impl PickerDelegate for ContactFinder {
         } else {
             &theme.contact_finder.contact_button
         };
-        let style = theme.picker.item.style_for(mouse_state, selected);
+        let style = theme
+            .contact_finder
+            .picker
+            .item
+            .style_for(mouse_state, selected);
         Flex::row()
             .with_children(user.avatar.clone().map(|avatar| {
                 Image::new(avatar)
diff --git a/styles/src/styleTree/contactFinder.ts b/styles/src/styleTree/contactFinder.ts
index bf43a74666da6325676140c9a5c6720b77b0547a..2feb3d7e356c945824ae577a0ae5a136802b0fd9 100644
--- a/styles/src/styleTree/contactFinder.ts
+++ b/styles/src/styleTree/contactFinder.ts
@@ -3,6 +3,7 @@ import picker from "./picker";
 import { backgroundColor, border, iconColor, player, text } from "./components";
 
 export default function contactFinder(theme: Theme) {
+  const sideMargin = 12;
   const contactButton = {
     background: backgroundColor(theme, 100),
     color: iconColor(theme, "primary"),
@@ -13,7 +14,10 @@ export default function contactFinder(theme: Theme) {
 
   return {
     picker: {
-      item: picker(theme).item,
+      item: {
+        ...picker(theme).item,
+        margin: { left: sideMargin, right: sideMargin }
+      },
       empty: picker(theme).empty,
       inputEditor: {
         background: backgroundColor(theme, 500),