Merge pull request #117 from jedmund/fix-hovercards-real

Fix z-index on entity units to fix hovercards

components/CharacterHovercard/index.tsx

@@ -69,6 +69,7 @@ const CharacterHovercard = (props: Props) => {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
+      <HoverCard.Portal>
         <HoverCard.Content className="Weapon Hovercard">
           <div className="top">
             <div className="title">
@@ -116,6 +117,7 @@ const CharacterHovercard = (props: Props) => {
           </a>
           <HoverCard.Arrow />
         </HoverCard.Content>
+      </HoverCard.Portal>
     </HoverCard.Root>
   )
 }

components/SummonHovercard/index.tsx

@@ -62,6 +62,7 @@ const SummonHovercard = (props: Props) => {
   return (
     <HoverCard.Root>
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
+      <HoverCard.Portal>
         <HoverCard.Content className="Weapon Hovercard">
           <div className="top">
             <div className="title">
@@ -90,6 +91,7 @@ const SummonHovercard = (props: Props) => {
           </a>
           <HoverCard.Arrow />
         </HoverCard.Content>
+      </HoverCard.Portal>
     </HoverCard.Root>
   )
 }

components/SummonUnit/index.scss

@@ -91,7 +91,7 @@
   img {
     position: relative;
     width: 100%;
-    z-index: 2;
+    z-index: 0;
 
     &.Placeholder {
       opacity: 0;

components/WeaponHovercard/index.scss

@@ -1,7 +1,4 @@
-.Hovercard {
-  z-index: 99;
-
-  .Weapon.HovercardContent {
+.Weapon.Hovercard {
   .skills {
     display: flex;
     flex-direction: row;
@@ -42,4 +39,3 @@
     gap: calc($unit / 2);
   }
 }
-}

components/WeaponHovercard/index.tsx

@@ -189,9 +189,10 @@ const WeaponHovercard = (props: Props) => {
   )
 
   return (
-    <HoverCard.Root className="Hovercard">
+    <HoverCard.Root>
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
-      <HoverCard.Content className="Weapon HovercardContent" side={hovercardSide()}>
+      <HoverCard.Portal>
+        <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
           <div className="top">
             <div className="title">
               <h4>{props.gridWeapon.object.name[locale]}</h4>
@@ -235,7 +236,8 @@ const WeaponHovercard = (props: Props) => {
           props.gridWeapon.ax[0].strength
             ? axSection
             : ''}
-        {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0
+          {props.gridWeapon.weapon_keys &&
+          props.gridWeapon.weapon_keys.length > 0
             ? keysSection
             : ''}
           <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">
@@ -243,6 +245,7 @@ const WeaponHovercard = (props: Props) => {
           </a>
           <HoverCard.Arrow />
         </HoverCard.Content>
+      </HoverCard.Portal>
     </HoverCard.Root>
   )
 }

components/WeaponUnit/index.scss

@@ -6,6 +6,7 @@
   position: relative;
   width: 100%;
   height: auto;
+  z-index: 0;
 
   @include breakpoint(tablet) {
     min-height: auto;