From e3accdad1b83bade38a3be95a646d4b0be939ead Mon Sep 17 00:00:00 2001
From: KingRainbow44 <kobedo11@gmail.com>
Date: Thu, 11 May 2023 23:05:36 -0400
Subject: [PATCH] Fix character names rendering incorrectly

---
 src/handbook/src/css/widgets/Character.scss | 12 ++++++++++--
 src/handbook/src/ui/widgets/Character.tsx   |  8 +++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/handbook/src/css/widgets/Character.scss b/src/handbook/src/css/widgets/Character.scss
index 5d161d3ee..2188c0ff9 100644
--- a/src/handbook/src/css/widgets/Character.scss
+++ b/src/handbook/src/css/widgets/Character.scss
@@ -2,21 +2,29 @@
     display: flex;
     flex-direction: column;
 
-    max-width: 100px;
+    max-width: 96px;
     max-height: 125px;
     border-radius: 15px;
 
     height: 100%;
+    width: 100%;
 
     overflow: hidden;
 }
 
+.Character :hover {
+    cursor: pointer;
+    box-shadow: 1px 1px black;
+}
+
 .Character_Icon {
     width: 100%;
     height: 100%;
 
     max-width: 96px;
     max-height: 96px;
+
+    align-self: center;
 }
 
 .Character_Label {
@@ -30,7 +38,7 @@
     height: 30px;
 
     p {
-        font-size: 18px;
         text-align: center;
+        margin: 4px;
     }
 }
diff --git a/src/handbook/src/ui/widgets/Character.tsx b/src/handbook/src/ui/widgets/Character.tsx
index c2b2a8fa1..c200937a9 100644
--- a/src/handbook/src/ui/widgets/Character.tsx
+++ b/src/handbook/src/ui/widgets/Character.tsx
@@ -34,6 +34,8 @@ class Character extends React.PureComponent<IProps> {
         // Check if the avatar is blacklisted.
         if (ignored.includes(id)) return undefined;
 
+        const characterName = nameSwitch[id] ?? name;
+
         return (
             <div
                 className={"Character"}
@@ -47,7 +49,11 @@ class Character extends React.PureComponent<IProps> {
                 />
 
                 <div className={"Character_Label"}>
-                    <p>{nameSwitch[id] ?? name}</p>
+                    <p
+                        style={{ fontSize: characterName.length >= 12 ? 13 : 17 }}
+                    >
+                        {characterName}
+                    </p>
                 </div>
             </div>
         );