Minor CSS fix

[Rajat-Dabade]

Summary

Minor UI fixes

Before:

The focus was going behind the person's avatar.

https://user-images.githubusercontent.com/26198062/199473719-f2fe9489-7e0b-4461-a68c-4d27861ef524.mov

After:

Added some margin for the person's avatar and name.

https://user-images.githubusercontent.com/26198062/199473838-1bea02d9-3113-4a11-be31-a16c85da8cef.mov

Reason

The default behaviour for component Select in react-select is like below. The focus by default will be at the beginning of the input field.

https://user-images.githubusercontent.com/26198062/199474499-e7a19729-84ca-48d5-b298-c131fce75557.mov

Ticket Link

Fixes https://github.com/mattermost/focalboard/issues/3881

[Rajat-Dabade]

cc @sbishel @wiggin77

[wiggin77]

Shouldn't the caret be placed after the existing people when editing?

[asaadmahmood]

@Rajat-Dabade The hover state and the default state alignment is not correct. Even if we're adding this, we need the profile icon to start from the same place as the other items in the list.

[Rajat-Dabade]

@wiggin77, when we start typing the existing selected value will disappear. If we keep the caret at the end of the already selected value, it would not look that great because of the disappearing nature (The caret will go at the beginning). If we take the example of the multi-select, the caret is always kept at the end so that we can add more value. It's just to make a difference between the select and multi-select fields. Thought?

[Rajat-Dabade]

@asaadmahmood, after suggested changes

https://user-images.githubusercontent.com/26198062/199977605-5f814cd8-8378-4df1-a428-5f64132aed24.mov

[mattermod]

Cherry pick is scheduled.