Fixed: Tooltips overflowing the screen width

Fixes #3924

frontend/src/Components/Tooltip/Tooltip.css

@@ -1,6 +1,6 @@
 .tooltipContainer {
   z-index: $popperZIndex;
-  margin: 10px 15px;
+  margin: 10px 10px;
 }
 
 .tooltip {
@@ -28,6 +28,10 @@
   border-color: transparent;
 }
 
+.arrowDisabled {
+  display: none;
+}
+
 .arrow::after {
   border-width: 10px;
   content: '';
@@ -35,7 +39,6 @@
 
 .top {
   bottom: -11px;
-  left: 50%;
   margin-left: -11px;
   border-bottom-width: 0;
 
@@ -64,7 +67,6 @@
 }
 
 .right {
-  top: 50%;
   left: -11px;
   margin-top: -11px;
   border-left-width: 0;
@@ -95,7 +97,6 @@
 
 .bottom {
   top: -11px;
-  left: 50%;
   margin-left: -11px;
   border-top-width: 0;
 
@@ -124,7 +125,6 @@
 }
 
 .left {
-  top: 50%;
   right: -11px;
   margin-top: -11px;
   border-right-width: 0;

frontend/src/Components/Tooltip/Tooltip.js

@@ -54,7 +54,7 @@ class Tooltip extends Component {
     } else if ((/^bottom/).test(data.placement)) {
       data.styles.maxHeight = windowHeight - bottom - 20;
     } else if ((/^right/).test(data.placement)) {
-      data.styles.maxWidth = windowWidth - right - 35;
+      data.styles.maxWidth = windowWidth - right - 50;
     } else {
       data.styles.maxWidth = left - 35;
     }
@@ -134,14 +134,14 @@ class Tooltip extends Component {
               preventOverflow: {
                 // Fixes positioning for tooltips in the queue
                 // and likely others.
-                escapeWithReference: true
+                escapeWithReference: false
               },
               flip: {
                 enabled: canFlip
               }
             }}
           >
-            {({ ref, style, placement, scheduleUpdate }) => {
+            {({ ref, style, placement, arrowProps, scheduleUpdate }) => {
               this._scheduleUpdate = scheduleUpdate;
 
               return (
@@ -152,6 +152,15 @@ class Tooltip extends Component {
                   onMouseEnter={this.onMouseEnter}
                   onMouseLeave={this.onMouseLeave}
                 >
+                  <div
+                    className={this.state.isOpen ? classNames(
+                      styles.arrow,
+                      styles[kind],
+                      styles[placement.split('-')[0]]
+                    ) : styles.arrowDisabled}
+                    ref={arrowProps.ref}
+                    style={arrowProps.style}
+                  />
                   {
                     this.state.isOpen ?
                       <div
@@ -160,14 +169,6 @@ class Tooltip extends Component {
                           styles[kind]
                         )}
                       >
-                        <div
-                          className={classNames(
-                            styles.arrow,
-                            styles[kind],
-                            styles[placement.split('-')[0]]
-                          )}
-                        />
-
                         <div
                           className={bodyClassName}
                         >