Center uncap indicator in hovercard

components/HovercardHeader/index.module.scss

@@ -41,17 +41,14 @@
     align-items: center;
     display: flex;
     flex-direction: row;
-    gap: $unit * 2;
+    justify-content: space-between;
+    gap: $unit-2x;
 
     .icons {
       display: flex;
       flex-direction: row;
-      flex-grow: 1;
+      flex-grow: 0;
       gap: $unit;
     }
-
-    .UncapIndicator {
-      min-width: 100px;
-    }
   }
 }

components/HovercardHeader/index.tsx

@@ -132,6 +132,7 @@ const HovercardHeader = ({ gridObject, object, type, ...props }: Props) => {
             )}
         </div>
         <UncapIndicator
+          className="hovercard"
           type={type}
           ulb={object.uncap.ulb || false}
           flb={object.uncap.flb || false}

components/uncap/UncapIndicator/index.module.scss

@@ -1,6 +1,11 @@
 .wrapper {
   display: flex;
 
+  &.hovercard {
+    min-width: 100px;
+    justify-content: center;
+  }
+
   .indicator {
     display: flex;
     flex-direction: row;

components/uncap/UncapIndicator/index.tsx

@@ -4,8 +4,9 @@ import TranscendencePopover from '~components/uncap/TranscendencePopover'
 import TranscendenceStar from '~components/uncap/TranscendenceStar'
 
 import styles from './index.module.scss'
+import classNames from 'classnames'
 
-interface Props {
+interface Props extends React.ComponentProps<'div'> {
   type: 'character' | 'weapon' | 'summon'
   rarity?: number
   uncapLevel?: number
@@ -25,6 +26,13 @@ const UncapIndicator = (props: Props) => {
 
   const [popoverOpen, setPopoverOpen] = useState(false)
 
+  const classes = classNames(
+    {
+      [styles.wrapper]: true,
+    },
+    props.className?.split(' ').map((className) => styles[className])
+  )
+
   function setNumStars() {
     let numStars
 
@@ -150,7 +158,7 @@ const UncapIndicator = (props: Props) => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={classes}>
       <ul className={styles.indicator}>
         {Array.from(Array(numStars)).map((x, i) => {
           if (props.type === 'character' && i > 4) {