Fix character names rendering incorrectly

This commit is contained in:
KingRainbow44 2023-05-11 23:05:36 -04:00
parent 564e4e496b
commit e3accdad1b
No known key found for this signature in database
GPG Key ID: FC2CB64B00D257BE
2 changed files with 17 additions and 3 deletions

View File

@ -2,21 +2,29 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100px; max-width: 96px;
max-height: 125px; max-height: 125px;
border-radius: 15px; border-radius: 15px;
height: 100%; height: 100%;
width: 100%;
overflow: hidden; overflow: hidden;
} }
.Character :hover {
cursor: pointer;
box-shadow: 1px 1px black;
}
.Character_Icon { .Character_Icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 96px; max-width: 96px;
max-height: 96px; max-height: 96px;
align-self: center;
} }
.Character_Label { .Character_Label {
@ -30,7 +38,7 @@
height: 30px; height: 30px;
p { p {
font-size: 18px;
text-align: center; text-align: center;
margin: 4px;
} }
} }

View File

@ -34,6 +34,8 @@ class Character extends React.PureComponent<IProps> {
// Check if the avatar is blacklisted. // Check if the avatar is blacklisted.
if (ignored.includes(id)) return undefined; if (ignored.includes(id)) return undefined;
const characterName = nameSwitch[id] ?? name;
return ( return (
<div <div
className={"Character"} className={"Character"}
@ -47,7 +49,11 @@ class Character extends React.PureComponent<IProps> {
/> />
<div className={"Character_Label"}> <div className={"Character_Label"}>
<p>{nameSwitch[id] ?? name}</p> <p
style={{ fontSize: characterName.length >= 12 ? 13 : 17 }}
>
{characterName}
</p>
</div> </div>
</div> </div>
); );