Fixed: Queue tooltips appearing offscreen on mobile devices

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>

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>
   );

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 {

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"

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;