diff --git a/components/HovercardHeader/index.module.scss b/components/HovercardHeader/index.module.scss index dcc1117a..f547451b 100644 --- a/components/HovercardHeader/index.module.scss +++ b/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; - } } } diff --git a/components/HovercardHeader/index.tsx b/components/HovercardHeader/index.tsx index 1acf04e8..105d52ed 100644 --- a/components/HovercardHeader/index.tsx +++ b/components/HovercardHeader/index.tsx @@ -132,6 +132,7 @@ const HovercardHeader = ({ gridObject, object, type, ...props }: Props) => { )} { 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 ( -
+
    {Array.from(Array(numStars)).map((x, i) => { if (props.type === 'character' && i > 4) {