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}
/>
);
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 {
}
{
+ 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 {
)}
/>
- :
@@ -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;