From 9e02504e143338d4d0d60f273cb2cc11cbcf8a91 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 12:45:27 -0300
Subject: [PATCH] fix: profile display name

---
 src/renderer/src/pages/user/user-content.tsx             | 4 +++-
 .../user-profile-settings-modal/user-edit-profile.tsx    | 1 +
 src/renderer/src/pages/user/user.css.ts                  | 9 +++++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx
index fb092d06..f4a46ccd 100644
--- a/src/renderer/src/pages/user/user-content.tsx
+++ b/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={{
diff --git a/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx b/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
index f6a430ba..6ecdb8a1 100644
--- a/src/renderer/src/pages/user/user-profile-settings-modal/user-edit-profile.tsx
+++ b/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 })}
       />
diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts
index 4e1c2139..6bcb30b0 100644
--- a/src/renderer/src/pages/user/user.css.ts
+++ b/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({