Merge pull request #116 from jedmund/fix-hovercard-zindex

Fix z-index on hovercards

components/WeaponHovercard/index.scss

@@ -1,41 +1,45 @@
-.Weapon.Hovercard {
-  .skills {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-right: $unit * 2;
+.Hovercard {
+  z-index: 99;
 
-    .axSkill {
-      align-items: center;
+  .Weapon.HovercardContent {
+    .skills {
       display: flex;
       flex-direction: row;
+      justify-content: space-between;
+      padding-right: $unit * 2;
 
-      &.primary img {
-        height: 64px;
-        width: 64px;
-      }
+      .axSkill {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
 
-      &.secondary {
-        gap: $unit * 1.5;
+        &.primary img {
+          height: 64px;
+          width: 64px;
+        }
 
-        img {
-          height: 36px;
-          width: 36px;
+        &.secondary {
+          gap: $unit * 1.5;
+
+          img {
+            height: 36px;
+            width: 36px;
+          }
+        }
+
+        span {
+          font-size: $font-small;
+          font-weight: $medium;
+          text-align: center;
         }
       }
+    }
 
-      span {
-        font-size: $font-small;
-        font-weight: $medium;
-        text-align: center;
-      }
+    .weaponKeys {
+      display: flex;
+      flex-direction: column;
+      font-size: $normal;
+      gap: calc($unit / 2);
     }
   }
-
-  .weaponKeys {
-    display: flex;
-    flex-direction: column;
-    font-size: $normal;
-    gap: calc($unit / 2);
-  }
 }

components/WeaponHovercard/index.tsx

@@ -189,9 +189,9 @@ const WeaponHovercard = (props: Props) => {
   )
 
   return (
-    <HoverCard.Root>
+    <HoverCard.Root className="Hovercard">
       <HoverCard.Trigger>{props.children}</HoverCard.Trigger>
-      <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
+      <HoverCard.Content className="Weapon HovercardContent" side={hovercardSide()}>
         <div className="top">
           <div className="title">
             <h4>{props.gridWeapon.object.name[locale]}</h4>