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/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 { )} /> -
+
{tooltip}
: @@ -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; diff --git a/frontend/src/Series/Details/SeriesDetailsSeason.css b/frontend/src/Series/Details/SeriesDetailsSeason.css index 4a1d746f6..24631da2d 100644 --- a/frontend/src/Series/Details/SeriesDetailsSeason.css +++ b/frontend/src/Series/Details/SeriesDetailsSeason.css @@ -74,13 +74,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/Series/Details/SeriesDetailsSeason.js b/frontend/src/Series/Details/SeriesDetailsSeason.js index 06011d05e..e6f6a93de 100644 --- a/frontend/src/Series/Details/SeriesDetailsSeason.js +++ b/frontend/src/Series/Details/SeriesDetailsSeason.js @@ -456,6 +456,7 @@ class SeriesDetailsSeason extends Component { }