From 9143bb4a7c3c0e45de705e433846852242330a17 Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sat, 20 Jul 2019 22:32:11 -0400
Subject: [PATCH] Fixed: Queue tooltips appearing offscreen on mobile devices

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 .../src/Activity/Queue/QueueStatusCell.js     |  1 +
 .../Artist/Details/ArtistDetailsSeason.css    |  8 +++-
 .../src/Artist/Details/ArtistDetailsSeason.js |  1 +
 frontend/src/Components/Tooltip/Tooltip.js    | 48 +++++++++++++++++--
 4 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Activity/Queue/QueueStatusCell.js b/frontend/src/Activity/Queue/QueueStatusCell.js
index f8cbc65ff..552fa1444 100644
--- a/frontend/src/Activity/Queue/QueueStatusCell.js
+++ b/frontend/src/Activity/Queue/QueueStatusCell.js
@@ -116,6 +116,7 @@ function QueueStatusCell(props) {
         title={title}
         body={hasWarning || hasError ? getDetailedPopoverBody(statusMessages) : sourceTitle}
         position={tooltipPositions.RIGHT}
+        canFlip={false}
       />
     </TableRowCell>
   );
diff --git a/frontend/src/Artist/Details/ArtistDetailsSeason.css b/frontend/src/Artist/Details/ArtistDetailsSeason.css
index 397dbb68a..127f0c772 100644
--- a/frontend/src/Artist/Details/ArtistDetailsSeason.css
+++ b/frontend/src/Artist/Details/ArtistDetailsSeason.css
@@ -81,13 +81,19 @@
 }
 
 .collapseButtonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 10px 15px;
   width: 100%;
   border-top: 1px solid $borderColor;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
   background-color: #fafafa;
-  text-align: center;
+}
+
+.collapseButtonIcon {
+  margin-bottom: -4px;
 }
 
 .expandButtonIcon {
diff --git a/frontend/src/Artist/Details/ArtistDetailsSeason.js b/frontend/src/Artist/Details/ArtistDetailsSeason.js
index aeeaf6529..f9968a8e9 100644
--- a/frontend/src/Artist/Details/ArtistDetailsSeason.js
+++ b/frontend/src/Artist/Details/ArtistDetailsSeason.js
@@ -206,6 +206,7 @@ class ArtistDetailsSeason extends Component {
                 }
                 <div className={styles.collapseButtonContainer}>
                   <IconButton
+                    iconClassName={styles.collapseButtonIcon}
                     name={icons.COLLAPSE}
                     size={20}
                     title="Hide albums"
diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js
index ea940c9d7..ce9decc5a 100644
--- a/frontend/src/Components/Tooltip/Tooltip.js
+++ b/frontend/src/Components/Tooltip/Tooltip.js
@@ -35,6 +35,33 @@ class Tooltip extends Component {
     }
   }
 
+  //
+  // Control
+
+  computeMaxSize = (data) => {
+    const {
+      top,
+      right,
+      bottom,
+      left
+    } = data.offsets.reference;
+
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+
+    if ((/^top/).test(data.placement)) {
+      data.styles.maxHeight = top - 20;
+    } else if ((/^bottom/).test(data.placement)) {
+      data.styles.maxHeight = windowHeight - bottom - 20;
+    } else if ((/^right/).test(data.placement)) {
+      data.styles.maxWidth = windowWidth - right - 30;
+    } else {
+      data.styles.maxWidth = left - 30;
+    }
+
+    return data;
+  }
+
   //
   // Listeners
 
@@ -72,7 +99,8 @@ class Tooltip extends Component {
       anchor,
       tooltip,
       kind,
-      position
+      position,
+      canFlip
     } = this.props;
 
     return (
@@ -98,10 +126,18 @@ class Tooltip extends Component {
             // are shown (Quality Definitions for example).
             eventsEnabled={false}
             modifiers={{
+              computeMaxHeight: {
+                order: 851,
+                enabled: true,
+                fn: this.computeMaxSize
+              },
               preventOverflow: {
               // Fixes positioning for tooltips in the queue
               // and likely others.
                 escapeWithReference: true
+              },
+              flip: {
+                enabled: canFlip
               }
             }}
           >
@@ -132,7 +168,9 @@ class Tooltip extends Component {
                           )}
                         />
 
-                        <div className={bodyClassName}>
+                        <div
+                          className={bodyClassName}
+                        >
                           {tooltip}
                         </div>
                       </div> :
@@ -154,13 +192,15 @@ Tooltip.propTypes = {
   anchor: PropTypes.node.isRequired,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),
-  position: PropTypes.oneOf(tooltipPositions.all)
+  position: PropTypes.oneOf(tooltipPositions.all),
+  canFlip: PropTypes.bool.isRequired
 };
 
 Tooltip.defaultProps = {
   bodyClassName: styles.body,
   kind: kinds.DEFAULT,
-  position: tooltipPositions.TOP
+  position: tooltipPositions.TOP,
+  canFlip: true
 };
 
 export default Tooltip;