Fix styling post-hovercard

components/CharacterUnit/index.scss

@@ -27,7 +27,8 @@
     h3 {
         color: #333;
         font-size: $font-regular;
-        font-weight: 500;
+        font-weight: $normal;
+        line-height: 1.1;
         margin: 0;
         max-width: 131px;
         text-align: center;

components/CharacterUnit/index.tsx

@@ -77,20 +77,18 @@ const CharacterUnit = (props: Props) => {
     )
 
     const unitContent = (
-        <div>
+        <div className={classes}>
-            <div className={classes}>
+            { (props.editable) ? editableImage : image }
-                { (props.editable) ? editableImage : image }
+            { (gridCharacter && character) ? 
-                { (gridCharacter && character) ? 
+                <UncapIndicator 
-                    <UncapIndicator 
+                    type="character"
-                        type="character"
+                    flb={character.uncap.flb || false}
-                        flb={character.uncap.flb || false}
+                    ulb={character.uncap.ulb || false}
-                        ulb={character.uncap.ulb || false}
+                    uncapLevel={gridCharacter.uncap_level}
-                        uncapLevel={gridCharacter.uncap_level}
+                    updateUncap={passUncapData}
-                        updateUncap={passUncapData}
+                    special={character.special}
-                        special={character.special}
+                /> : '' }
-                    /> : '' }
+            <h3 className="CharacterName">{character?.name.en}</h3>
-                <h3 className="CharacterName">{character?.name.en}</h3>
-            </div>
         </div>
     )
 
@@ -101,9 +99,7 @@ const CharacterUnit = (props: Props) => {
     )
 
     return (
-        <div className={classes}>
+        (gridCharacter) ? withHovercard : unitContent
-            { (gridCharacter) ? withHovercard : unitContent }
-        </div>
     )
 }
 

components/SummonUnit/index.scss

@@ -92,7 +92,8 @@
     h3 {
         color: #333;
         font-size: $font-regular;
-        font-weight: 500;
+        font-weight: $normal;
+        line-height: 1.1;
         margin: 0;
         text-align: center;
     }

components/SummonUnit/index.tsx

@@ -83,7 +83,7 @@ const SummonUnit = (props: Props) => {
     )
 
     const unitContent = (
-        <div>
+        <div className={classes}>
             { (props.editable) ? editableImage : image }
             { (gridSummon) ? 
                 <UncapIndicator 
@@ -105,11 +105,7 @@ const SummonUnit = (props: Props) => {
         </SummonHovercard>
     )
 
-    return (
+    return (gridSummon) ? withHovercard : unitContent
-        <div className={classes}>
-            { (gridSummon) ? withHovercard : unitContent }
-        </div>
-    )
 }
 
 export default SummonUnit

components/WeaponUnit/index.scss

@@ -85,6 +85,7 @@
         color: $grey-00;
         font-size: $font-button;
         font-weight: $normal;
+        line-height: 1.1;
         margin: 0;
         text-align: center;
     }

components/WeaponUnit/index.tsx

@@ -90,7 +90,7 @@ const WeaponUnit = (props: Props) => {
     )
 
     const unitContent = (
-        <div>
+        <div className={classes}>
             { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? 
             <WeaponModal gridWeapon={gridWeapon}>
                 <div>
@@ -118,11 +118,7 @@ const WeaponUnit = (props: Props) => {
         </WeaponHovercard>
     )
 
-    return (
+    return (gridWeapon) ? withHovercard : unitContent
-        <div className={classes}>
-            { (gridWeapon) ? withHovercard : unitContent }
-        </div>
-    )
 }
 
 export default WeaponUnit