From e58210a8f105aa89b7aad876ab36619f54c9567e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 4 Mar 2022 00:49:52 -0800
Subject: [PATCH] Add hovercard sides and a static width to hovercards

---
 components/WeaponHovercard/index.tsx | 11 ++++++++++-
 styles/globals.scss                  |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx
index 07582b32..70e5500e 100644
--- a/components/WeaponHovercard/index.tsx
+++ b/components/WeaponHovercard/index.tsx
@@ -45,6 +45,15 @@ const WeaponHovercard = (props: Props) => {
     const tintElement = (props.gridWeapon.object.element == 0 && props.gridWeapon.element) ? Element[props.gridWeapon.element] : Element[props.gridWeapon.object.element]
     const wikiUrl = `https://gbf.wiki/${props.gridWeapon.object.name.en.replaceAll(' ', '_')}`
 
+    const hovercardSide = () => {
+        if (props.gridWeapon.position == -1)
+            return "right"
+        else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position))
+            return "top"
+        else
+            return "bottom"
+    }
+
     const createPrimaryAxSkillString = () => {
         const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
 
@@ -125,7 +134,7 @@ const WeaponHovercard = (props: Props) => {
             <HoverCard.Trigger>
                 { props.children }
             </HoverCard.Trigger>
-            <HoverCard.Content className="Weapon Hovercard">
+            <HoverCard.Content className="Weapon Hovercard" side={hovercardSide()}>
                 <div className="top">
                     <div className="title">
                         <h4>{ props.gridWeapon.object.name.en }</h4>
diff --git a/styles/globals.scss b/styles/globals.scss
index 46393f74..16e17892 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -183,7 +183,7 @@ select {
     flex-direction: column;
     gap: $unit * 2;
     padding: $unit * 2;
-    min-width: 300px;
+    width: 300px;
 
     .top {
         display: flex;