fix: profile display name

src/renderer/src/pages/user/user-content.tsx

@@ -332,7 +332,9 @@ export function UserContent({
         </div>
 
         <div className={styles.profileInformation}>
-          <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
+          <h2 className={styles.profileDisplayName}>
+            {userProfile.displayName}
+          </h2>
           {currentGame && (
             <div
               style={{

src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx

@@ -126,6 +126,7 @@ export const UserEditProfile = ({
         value={form.displayName}
         required
         minLength={3}
+        maxLength={50}
         containerProps={{ style: { width: "100%" } }}
         onChange={(e) => setForm({ ...form, displayName: e.target.value })}
       />

src/renderer/src/pages/user/user.css.ts

@@ -23,6 +23,7 @@ export const profileContentBox = style({
 
 export const profileAvatarContainer = style({
   width: "96px",
+  minWidth: "96px",
   height: "96px",
   borderRadius: "50%",
   display: "flex",
@@ -100,6 +101,14 @@ export const profileInformation = style({
   alignItems: "flex-start",
   color: "#c0c1c7",
   zIndex: 1,
+  overflow: "hidden",
+});
+
+export const profileDisplayName = style({
+  fontWeight: "bold",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  width: "100%",
 });
 
 export const profileContent = style({