Fix character names rendering incorrectly

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;
     }
 }

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>
         );