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({
-
{userProfile.displayName}
+
+ {userProfile.displayName}
+
{currentGame && (
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({