fix: usr: the error message cannot be seen during avatar changing #10

assets/css/homepage/_profile.scss

@@ -28,6 +28,21 @@
   box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
 }
 
+#profile-avatar-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.profile-avatar__error {
+  font-size: 11px;
+  color: #e57373;
+  text-align: center;
+  max-width: 120px;
+  line-height: 1.3;
+}
+
 .profile-avatar {
   position: relative;
   width: 80px;

assets/js/components/AvatarUpload.jsx

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 
-import React, { useMemo, useRef } from 'react';
+import React, { Fragment, useMemo, useRef } from 'react';
 import { string } from 'prop-types';
 import { useProfileDataProvider } from '@mine-hooks/useGameDataProvider';
 
@@ -16,6 +16,8 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
   const [thumbUrl, setThumbUrl] = React.useState(initialThumbUrl || null);
   const { uploadAvatarMutation: { isPending, error, mutate } } = useProfileDataProvider();
 
+  const errorMessage = useMemo(() => error?.message ?? null, [error]);
+
   const handleChange = e => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -40,32 +42,32 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
     });
   };
 
-  const errorMessage = useMemo(() => error?.message ?? null, [error]);
-
   return (
-    <div
+    <Fragment>
-      className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
+      <div
-      title="Click to change profile picture"
+        className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
-      onClick={() => inputRef.current?.click()}
+        title="Click to change profile picture"
-    >
+        onClick={() => inputRef.current?.click()}
-      {thumbUrl
+      >
-        ? <img src={thumbUrl} alt={initials} className="profile-avatar__img" />
+        {thumbUrl
-        : <span className="profile-avatar__initials">{initials}</span>
+          ? <img src={thumbUrl} alt={initials} className="profile-avatar__img" />
-      }
+          : <span className="profile-avatar__initials">{initials}</span>
-      <div className="profile-avatar__overlay">
+        }
-        <i className="fa fa-camera" />
+        <div className="profile-avatar__overlay">
+          <i className="fa fa-camera" />
+        </div>
+        <input
+          ref={inputRef}
+          type="file"
+          accept="image/jpeg,image/png,image/gif,image/webp"
+          style={{ display: 'none' }}
+          onChange={handleChange}
+        />
       </div>
-      <input
-        ref={inputRef}
-        type="file"
-        accept="image/jpeg,image/png,image/gif,image/webp"
-        style={{ display: 'none' }}
-        onChange={handleChange}
-      />
       {errorMessage && <div className="profile-avatar__error">{errorMessage}</div>}
-    </div>
+    </Fragment>
   );
-}
+};
 
 AvatarUpload.propTypes = {
   uploadUrl: string.isRequired,