Center avatar and display name in UserDetailsDialog

stylesheets/_index.scss

@@ -42,12 +42,12 @@
     margin-bottom: 1em;
   }
 
-  .avatar-upload {
+  .avatar-center {
     display: flex;
     justify-content: center;
   }
 
-  .avatar-upload-inner {
+  .avatar-center-inner {
     display: flex;
   }
 

ts/components/EditProfileDialog.tsx

@@ -64,8 +64,8 @@ export class EditProfileDialog extends React.Component<Props, State> {
 
     return (
       <div className="content">
-        <div className="avatar-upload">
+        <div className="avatar-center">
-          <div className="avatar-upload-inner">
+          <div className="avatar-center-inner">
             {this.renderAvatar()}
             <div className="upload-btn-background">
               <input

ts/components/UserDetailsDialog.tsx

@@ -35,8 +35,12 @@ export class UserDetailsDialog extends React.Component<Props> {
 
     return (
       <div className="content">
+        <div className="avatar-center">
+          <div className="avatar-center-inner">
             {this.renderAvatar()}
-        <span className="profile-name">{this.props.profileName}</span>
+          </div>
+        </div>
+        <div className="profile-name">{this.props.profileName}</div>
         <div className="message">{this.props.pubkey}</div>
 
         <div className="buttons">