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,9 +42,8 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
     });
   };
 
-  const errorMessage = useMemo(() => error?.message ?? null, [error]);
-
   return (
+    <Fragment>
       <div
         className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
         title="Click to change profile picture"
@@ -62,10 +63,11 @@ export const AvatarUpload = ({ uploadUrl, initialThumbUrl, initials }) => {
           style={{ display: 'none' }}
           onChange={handleChange}
         />
-      {errorMessage && <div className="profile-avatar__error">{errorMessage}</div>}
       </div>
+      {errorMessage && <div className="profile-avatar__error">{errorMessage}</div>}
+    </Fragment>
   );
-}
+};
 
 AvatarUpload.propTypes = {
   uploadUrl: string.isRequired,