From 50b8ead7c34452e0b5f4719dad63710a5f3336cc Mon Sep 17 00:00:00 2001
From: Matthew Stratford <hi@mstratford.net>
Date: Wed, 3 Feb 2021 23:18:21 +0000
Subject: [PATCH] Fix broken hover tooltips for empty show plans.

---
 src/App.scss | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index abe1c9d..4f271b7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -223,3 +223,78 @@ $number-of-channels: 3;
 .react-contexify__item__content svg {
   margin: 4px 0.6em 0 0;
 }
+
+// Because react tooltip and empty show plans get very broken.
+.__react_component_tooltip {
+    color: #fff;
+    background: #222;
+    border: 1px solid transparent;
+
+  	&.place-top {
+        margin-top: -10px;
+    }
+    &.place-top::before {
+        border-top: 8px solid transparent;
+    }
+    &.place-top::after {
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        bottom: -6px;
+        left: 50%;
+        margin-left: -8px;
+        border-top-color: #222;
+        border-top-style: solid;
+        border-top-width: 6px;
+    }
+
+    &.place-bottom {
+        margin-top: 10px;
+    }
+    &.place-bottom::before {
+        border-bottom: 8px solid transparent;
+    }
+    &.place-bottom::after {
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        top: -6px;
+        left: 50%;
+        margin-left: -8px;
+        border-bottom-color: #222;
+        border-bottom-style: solid;
+        border-bottom-width: 6px;
+    }
+
+    &.place-left {
+        margin-left: -10px;
+    }
+    &.place-left::before {
+        border-left: 8px solid transparent;
+    }
+    &.place-left::after {
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        right: -6px;
+        top: 50%;
+        margin-top: -4px;
+        border-left-color: #222;
+        border-left-style: solid;
+        border-left-width: 6px;
+    }
+
+    &.place-right {
+        margin-left: 10px;
+    }
+    &.place-right::before {
+        border-right: 8px solid transparent;
+    }
+    &.place-right::after {
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        left: -6px;
+        top: 50%;
+        margin-top: -4px;
+        border-right-color: #222;
+        border-right-style: solid;
+        border-right-width: 6px;
+    }
+}