diff --git a/src/components/monitor-list/monitor-list.jsx b/src/components/monitor-list/monitor-list.jsx index 2af0a8fb84149c335b7e6e57120cf54b3e64619f..5cb11424113808e07f9c8573a9b2626ec3a838d5 100644 --- a/src/components/monitor-list/monitor-list.jsx +++ b/src/components/monitor-list/monitor-list.jsx @@ -10,7 +10,12 @@ import styles from './monitor-list.css'; const stageSizeToTransform = ({width, height, widthDefault, heightDefault}) => { const scaleX = width / widthDefault; const scaleY = height / heightDefault; - return `scale(${scaleX},${scaleY})`; + if (scaleX === 1 && scaleY === 1) { + // Do not set a transform if the scale is 1 because + // it messes up `position: fixed` elements like the context menu. + return; + } + return {transform: `scale(${scaleX},${scaleY})`}; }; const MonitorList = props => ( @@ -24,9 +29,7 @@ const MonitorList = props => ( > <Box className={styles.monitorListScaler} - style={{ - transform: stageSizeToTransform(props.stageSize) - }} + style={stageSizeToTransform(props.stageSize)} > {props.monitors.valueSeq().filter(m => m.visible) .map(monitorData => ( diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css index c8b7f3108796331a93df8090ccb0c507289782e0..66ff0749e25abe2266f39e3c133eb954ae37b971 100644 --- a/src/components/monitor/monitor.css +++ b/src/components/monitor/monitor.css @@ -60,6 +60,11 @@ flex-direction: row; } +.slider { + width: 100%; + transform: translateZ(0); /* Fixes flickering in Safari */ +} + .list-monitor { display: flex; flex-direction: column; @@ -81,7 +86,6 @@ width: 100%; display: flex; flex-direction: column; - overflow-y: scroll; overflow-x: hidden; height: calc(100% - 44px); } @@ -150,12 +154,13 @@ outline: none; font-size: 0.75rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + width: 100%; } .remove-button { position: absolute; top: 4px; - right: 3px; + right: 6px; cursor: pointer; color: $ui-white; } diff --git a/src/components/monitor/slider-monitor.jsx b/src/components/monitor/slider-monitor.jsx index f8187cfee6a9be6fe0811ddfb8751c00bf0eaa64..b9cebfa140a34f338071102e11324c7f055aee4f 100644 --- a/src/components/monitor/slider-monitor.jsx +++ b/src/components/monitor/slider-monitor.jsx @@ -1,5 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; + import styles from './monitor.css'; const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate}) => ( @@ -17,13 +19,12 @@ const SliderMonitor = ({categoryColor, label, min, max, value, onSliderUpdate}) </div> <div className={styles.row}> <input - className="no-drag" // Class used on parent Draggable to prevent drags + className={classNames(styles.slider, 'no-drag')} // Class used on parent Draggable to prevent drags max={max} min={min} type="range" value={value} onChange={onSliderUpdate} - // @todo onChange callback /> </div>