Wrap the monitor list in a CSS scale transform

src/components/monitor-list/monitor-list.css

@@ -2,4 +2,6 @@
     width: 100%;
     height: 100%;
     pointer-events: none;
+    /* Scaling for monitors should happen from the top left */
+    transform-origin: left top;
 }

src/components/monitor-list/monitor-list.jsx

@@ -7,10 +7,19 @@ import {OrderedMap} from 'immutable';
 
 import styles from './monitor-list.css';
 
+const stageSizeToTransform = ({width, height, widthDefault, heightDefault}) => {
+    const scaleX = width / widthDefault;
+    const scaleY = height / heightDefault;
+    return `scale(${scaleX},${scaleY})`;
+};
+
 const MonitorList = props => (
     <Box
         // Use static `monitor-overlay` class for bounds of draggables
         className={classNames(styles.monitorList, 'monitor-overlay')}
+        style={{
+            transform: stageSizeToTransform(props.stageSize)
+        }}
     >
         {props.monitors.valueSeq().filter(m => m.visible)
             .map(monitorData => (
@@ -37,7 +46,13 @@ const MonitorList = props => (
 
 MonitorList.propTypes = {
     monitors: PropTypes.instanceOf(OrderedMap),
-    onMonitorChange: PropTypes.func.isRequired
+    onMonitorChange: PropTypes.func.isRequired,
+    stageSize: PropTypes.shape({
+        width: PropTypes.number,
+        height: PropTypes.number,
+        widthDefault: PropTypes.number,
+        heightDefault: PropTypes.number
+    }).isRequired
 };
 
 export default MonitorList;

src/components/monitor/monitor.css

@@ -93,6 +93,7 @@
     align-items: center;
     padding: 2px;
     flex-shrink: 0;
+    transform: translateZ(0); /* Keep sharp when scaled */
 }
 
 .list-index {

src/components/stage/stage.jsx

@@ -47,7 +47,7 @@ const StageComponent = props => {
                     {...boxProps}
                 />
                 <Box className={styles.monitorWrapper}>
-                    <MonitorList />
+                    <MonitorList stageSize={stageSize} />
                 </Box>
                 {isColorPicking && colorInfo ? (
                     <Box className={styles.colorPickerWrapper}>