fix: sidebar profile layout

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",

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 (
     <div
       className={styles.profileContainer}
@@ -88,19 +91,17 @@ export function SidebarProfile() {
           )}
         </div>
       </button>
-      {userDetails && receivedRequests.length > 0 && !gameRunning && (
-        <div className={styles.friendRequestContainer}>
-          <button
-            type="button"
-            className={styles.friendRequestButton}
-            onClick={() =>
-              showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-            }
-          >
-            <PersonAddIcon size={24} />
-            {receivedRequests.length}
-          </button>
-        </div>
+      {showPendingRequests && (
+        <button
+          type="button"
+          className={styles.friendRequestButton}
+          onClick={() =>
+            showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
+          }
+        >
+          <PersonAddIcon size={24} />
+          {receivedRequests.length}
+        </button>
       )}
     </div>
   );