From 5f9cedad23d66a8c18ac59c26dd5b9f9cf11db9b Mon Sep 17 00:00:00 2001
From: Antonio Scandurra <me@as-cii.com>
Date: Mon, 10 Oct 2022 16:05:09 +0200
Subject: [PATCH] Add margin to picker in contacts popover

---
 crates/collab_ui/src/contact_finder.rs | 6 +++++-
 styles/src/styleTree/contactFinder.ts  | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/crates/collab_ui/src/contact_finder.rs b/crates/collab_ui/src/contact_finder.rs
index 65ebee2797..25726e381e 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 bf43a74666..2feb3d7e35 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),