From 8cc454bc127e024629f0472fd69d689a5cfd9f5c Mon Sep 17 00:00:00 2001
From: Spectralitree <spectralitree@gmail.com>
Date: Sun, 7 Feb 2021 11:01:00 +0100
Subject: [PATCH] tweak avatar display

---
 src/Components/MemberCard.js  | 4 +++-
 src/Components/MemberPage.js  | 6 ++++--
 src/Components/ProfileCard.js | 8 +++++---
 src/Components/ProfilePage.js | 8 +++++---
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/Components/MemberCard.js b/src/Components/MemberCard.js
index 1e7ff5d1..d9b8d8d6 100644
--- a/src/Components/MemberCard.js
+++ b/src/Components/MemberCard.js
@@ -235,7 +235,9 @@ export default function MemberCard(props) {
             { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
                 {close => (
                     <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                        <div className="m-auto" style={{maxWidth: '640px'}}>
+                            <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                        </div>
                     </div>
                 )}
             </Popup> : 
diff --git a/src/Components/MemberPage.js b/src/Components/MemberPage.js
index 7d081ae9..e287df94 100644
--- a/src/Components/MemberPage.js
+++ b/src/Components/MemberPage.js
@@ -237,9 +237,11 @@ export default function MemberPage(props) {
         }><BS.Button variant="link" onClick={() => copyLink()}><FaLink style={{fontSize: '1.25rem'}}/></BS.Button></BS.OverlayTrigger> : <BS.Button variant="link"><FaLock style={{fontSize: '1.25rem'}} /></BS.Button> }<BS.Button variant="link" ><b>{member.name}</b> ({member.id})</BS.Button> </div> 
             { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
                 {close => (
-                    <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                  <div className="text-center w-100 m-0" onClick={() => close()}>
+                    <div className="m-auto" style={{maxWidth: '640px'}}>
+                        <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
                     </div>
+                  </div>
                 )}
             </Popup> : 
         <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
diff --git a/src/Components/ProfileCard.js b/src/Components/ProfileCard.js
index 61d860e8..dd4ad348 100644
--- a/src/Components/ProfileCard.js
+++ b/src/Components/ProfileCard.js
@@ -91,9 +91,11 @@ export default function MemberCard(props) {
         : <BS.Accordion.Toggle  as={BS.Button} variant="link" eventKey={member.id} > <b>{member.name}</b> ({member.id})</BS.Accordion.Toggle>}</div>
             { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
                 {close => (
-                    <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
-                    </div>
+                  <div className="text-center w-100 m-0" onClick={() => close()}>
+                  <div className="m-auto" style={{maxWidth: '640px'}}>
+                      <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                  </div>
+                </div>
                 )}
             </Popup> : 
         <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}
diff --git a/src/Components/ProfilePage.js b/src/Components/ProfilePage.js
index 0670c41e..eefa9269 100644
--- a/src/Components/ProfilePage.js
+++ b/src/Components/ProfilePage.js
@@ -93,9 +93,11 @@ export default function ProfilePage(props) {
          <BS.Button variant="link" ><b>{member.name}</b> ({member.id})</BS.Button></div>
             { member.avatar_url ?   <Popup trigger={<BS.Image src={`${member.avatar_url}`} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />} className="avatar" modal>
                 {close => (
-                    <div className="text-center w-100 m-0" onClick={() => close()}>
-                    <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
-                    </div>
+                  <div className="text-center w-100 m-0" onClick={() => close()}>
+                  <div className="m-auto" style={{maxWidth: '640px'}}>
+                      <BS.Image src={`${avatar}`} style={{'maxWidth': '100%', height: 'auto'}} thumbnail />
+                  </div>
+                </div>
                 )}
             </Popup> : 
         <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} tabIndex="0" className="float-right" roundedCircle />}