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({
From 3293320926e74a867a39188231604840c0f0c3aa Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 13:21:21 -0300
Subject: [PATCH 04/13] fix: sidebar profile layout
---
.../components/sidebar/sidebar-profile.css.ts | 20 +++++---------
.../components/sidebar/sidebar-profile.tsx | 27 ++++++++++---------
2 files changed, 20 insertions(+), 27 deletions(-)
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
index ba29c850..d97b0c44 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts
+++ b/src/renderer/src/components/sidebar/sidebar-profile.css.ts
@@ -7,22 +7,24 @@ export const profileContainerBackground = createVar();
export const profileContainer = style({
background: profileContainerBackground,
position: "relative",
+ display: "flex",
+ gap: `${SPACING_UNIT}px`,
cursor: "pointer",
":hover": {
backgroundColor: "rgba(255, 255, 255, 0.15)",
},
+ borderBottom: `solid 1px ${vars.color.border}`,
+ boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
+ padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
});
export const profileButton = style({
display: "flex",
cursor: "pointer",
transition: "all ease 0.1s",
- padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
color: vars.color.muted,
- borderBottom: `solid 1px ${vars.color.border}`,
- boxShadow: "0px 0px 15px 0px rgb(0 0 0 / 70%)",
width: "100%",
- zIndex: "10",
+ overflow: "hidden",
});
export const profileButtonContent = style({
@@ -75,16 +77,6 @@ export const profileButtonTitle = style({
whiteSpace: "nowrap",
});
-export const friendRequestContainer = style({
- position: "absolute",
- padding: "8px",
- right: `${SPACING_UNIT}px`,
- display: "flex",
- top: 0,
- bottom: 0,
- alignItems: "center",
-});
-
export const friendRequestButton = style({
color: vars.color.success,
cursor: "pointer",
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx
index 069831cb..e41d7da2 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -41,6 +41,9 @@ export function SidebarProfile() {
return undefined;
}, [profileBackground]);
+ const showPendingRequests =
+ userDetails && receivedRequests.length > -1 && !gameRunning;
+
return (
- {userDetails && receivedRequests.length > 0 && !gameRunning && (
-
-
-
+ {showPendingRequests && (
+
)}
);
From 0bedb7c9b7e237e3bf872b1754f21782c624e4ce Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Mon, 26 Aug 2024 14:12:42 -0300
Subject: [PATCH 05/13] fix: header overflow text
---
src/renderer/src/components/header/header.css.ts | 5 +++++
src/renderer/src/components/header/header.tsx | 2 +-
src/renderer/src/components/sidebar/sidebar-profile.tsx | 2 +-
3 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/src/renderer/src/components/header/header.css.ts b/src/renderer/src/components/header/header.css.ts
index 0e82aaef..12855986 100644
--- a/src/renderer/src/components/header/header.css.ts
+++ b/src/renderer/src/components/header/header.css.ts
@@ -104,6 +104,7 @@ export const section = style({
alignItems: "center",
gap: `${SPACING_UNIT * 2}px`,
height: "100%",
+ overflow: "hidden",
});
export const backButton = recipe({
@@ -136,11 +137,15 @@ export const backButton = recipe({
export const title = recipe({
base: {
transition: "all ease 0.2s",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ width: "100%",
},
variants: {
hasBackButton: {
true: {
transform: "translateX(28px)",
+ width: "calc(100% - 28px)",
},
},
},
diff --git a/src/renderer/src/components/header/header.tsx b/src/renderer/src/components/header/header.tsx
index d3315098..c37e4b44 100644
--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -72,7 +72,7 @@ export function Header({ onSearch, onClear, search }: HeaderProps) {
isWindows: window.electron.platform === "win32",
})}
>
-
+