From dd9a190fd9d0a7d92c26a0e2e51a5f6b678e158c Mon Sep 17 00:00:00 2001
From: Lang <7system7@gmail.com>
Date: Wed, 22 Apr 2026 12:15:06 +0200
Subject: [PATCH] fix: usr: the error message cannot be seen during avatar
 changing #10

---
 assets/css/homepage/_profile.scss     | 15 +++++++++
 assets/js/components/AvatarUpload.jsx | 48 ++++++++++++++-------------
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/assets/css/homepage/_profile.scss b/assets/css/homepage/_profile.scss
index fdfa4b5..64b2e6f 100644
--- a/assets/css/homepage/_profile.scss
+++ b/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;
diff --git a/assets/js/components/AvatarUpload.jsx b/assets/js/components/AvatarUpload.jsx
index ce1fa8a..3010014 100644
--- a/assets/js/components/AvatarUpload.jsx
+++ b/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
-      className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
-      title="Click to change profile picture"
-      onClick={() => inputRef.current?.click()}
-    >
-      {thumbUrl
-        ? <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" />
+    <Fragment>
+      <div
+        className={`profile-avatar${isPending ? ' profile-avatar--loading' : ''}`}
+        title="Click to change profile picture"
+        onClick={() => inputRef.current?.click()}
+      >
+        {thumbUrl
+          ? <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>
+        <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,