From 6d5edf93bf53de36832448a9a659e748309ecc6b Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Thu, 30 Nov 2023 23:34:56 +0530
Subject: [PATCH] tweek styles in use selection

---
 jam-ui/src/components/people/JKFriendsAutoComplete.js | 4 ++--
 jam-ui/src/components/people/JKSelectFriendsModal.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/jam-ui/src/components/people/JKFriendsAutoComplete.js b/jam-ui/src/components/people/JKFriendsAutoComplete.js
index aedcaa5b1..4e990f121 100644
--- a/jam-ui/src/components/people/JKFriendsAutoComplete.js
+++ b/jam-ui/src/components/people/JKFriendsAutoComplete.js
@@ -108,11 +108,11 @@ function JKFriendsAutoComplete({ friends, onSelect }) {
       <ListGroup className={showDropdown ? 'd-block' : 'd-none'} data-testid="autocomplete-list">
         {filteredFriends.map(f => (
           <ListGroupItem key={f.id} onMouseOver={highlight} onMouseOut={unhighlight} onClick={() => handleOnClick(f)}>
-            <div style={{ display: "grid", gridTemplateColumns: "30px auto", columnGap: "5px"}}>
+            <div style={{ display: "grid", gridTemplateColumns: "30px auto", columnGap: "5px", alignContent: "flex-start"}}>
               <div>
                 <JKProfileAvatar src={f.photo_url} size="m" /> 
               </div>
-              <div>
+              <div className='ml-2'>
                 {f.first_name} {f.last_name}
               </div>
             </div>
diff --git a/jam-ui/src/components/people/JKSelectFriendsModal.js b/jam-ui/src/components/people/JKSelectFriendsModal.js
index a6b0dff3d..ec89a1f00 100644
--- a/jam-ui/src/components/people/JKSelectFriendsModal.js
+++ b/jam-ui/src/components/people/JKSelectFriendsModal.js
@@ -42,10 +42,10 @@ function JKSelectFriendsModal({ show, friends, onSubmit, toggleVisibility }) {
         <ModalBody>
           <ListGroup flush>
             {friends.map(f => (
-              <ListGroupItem key={f.id}>
+              <ListGroupItem key={f.id} className="d-flex align-items-top">
                 <Input type="checkbox" onClick={onCheckBoxClick} value={f.id} />
                 <JKProfileAvatar src={f.photo_url} size="m" />
-                <span className='ml-1'>
+                <span className='ml-2'>
                   {f.first_name} {f.last_name}
                 </span>
               </ListGroupItem>