diff --git a/src/components/ProfilePage.jsx b/src/components/ProfilePage.jsx
index c33145b..3acef92 100644
--- a/src/components/ProfilePage.jsx
+++ b/src/components/ProfilePage.jsx
@@ -104,13 +104,32 @@ export class ProfilePage extends React.Component {
const shouldShowAgeMessage = requiresParentalConsent && isCurrentUserProfile;
+ // Inserted into the DOM in two places (for responsive layout)
+ const headingLockup = (
+
+ {username}
+
+
+ );
+
+ const photoUploadErrorMessage = ((error) => {
+ if (error === null) return null;
+ return (
+
+
+ {error.userMessage}
+
+
+ );
+ })(photoUploadError);
+
return (
-
-
-
+
+
+
-
- {photoUploadError !== null ?
{photoUploadError.userMessage} : null}
-
{username}
-
-
+
+ {headingLockup}
+
+
+ {photoUploadErrorMessage}
+
-
+
+
+ {headingLockup}
+
-
+
{shouldShowAgeMessage ? : null}
,
- }}
- tagName="p"
- className="mb-0"
- />
+
+ ,
+ }}
+ />
+
);
}
diff --git a/src/index.scss b/src/index.scss
index d286a06..7e1b217 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -47,7 +47,6 @@ $fa-font-path: "~font-awesome/fonts";
.profile-avatar-wrap {
- margin-right: 1rem;
@include media-breakpoint-up(md) {
max-width: 12rem;