Make monitors position correctly in fullscreen

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

 .monitor-list {
-    width: 100%;
-    height: 100%;
+    /* Width/height are set by the component, margin: auto centers in fullscreen */
+    margin: auto;
     pointer-events: none;
+}
+
+.monitor-list-scaler {
     /* Scaling for monitors should happen from the top left */
     transform-origin: left top;
 }

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

@@ -18,29 +18,37 @@ const MonitorList = props => (
         // Use static `monitor-overlay` class for bounds of draggables
         className={classNames(styles.monitorList, 'monitor-overlay')}
         style={{
-            transform: stageSizeToTransform(props.stageSize)
+            width: props.stageSize.width,
+            height: props.stageSize.height
         }}
     >
-        {props.monitors.valueSeq().filter(m => m.visible)
-            .map(monitorData => (
-                <Monitor
-                    height={monitorData.height}
-                    id={monitorData.id}
-                    key={monitorData.id}
-                    max={monitorData.sliderMax}
-                    min={monitorData.sliderMin}
-                    mode={monitorData.mode}
-                    opcode={monitorData.opcode}
-                    params={monitorData.params}
-                    spriteName={monitorData.spriteName}
-                    targetId={monitorData.targetId}
-                    value={monitorData.value}
-                    width={monitorData.width}
-                    x={monitorData.x}
-                    y={monitorData.y}
-                    onDragEnd={props.onMonitorChange}
-                />
-            ))}
+        <Box
+            className={styles.monitorListScaler}
+            style={{
+                transform: stageSizeToTransform(props.stageSize)
+            }}
+        >
+            {props.monitors.valueSeq().filter(m => m.visible)
+                .map(monitorData => (
+                    <Monitor
+                        height={monitorData.height}
+                        id={monitorData.id}
+                        key={monitorData.id}
+                        max={monitorData.sliderMax}
+                        min={monitorData.sliderMin}
+                        mode={monitorData.mode}
+                        opcode={monitorData.opcode}
+                        params={monitorData.params}
+                        spriteName={monitorData.spriteName}
+                        targetId={monitorData.targetId}
+                        value={monitorData.value}
+                        width={monitorData.width}
+                        x={monitorData.x}
+                        y={monitorData.y}
+                        onDragEnd={props.onMonitorChange}
+                    />
+                ))}
+        </Box>
     </Box>
 );
 

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

@@ -20,7 +20,7 @@ class ListMonitorScroller extends React.Component {
     }
     noRowsRenderer () {
         return (
-            <div className={styles.listEmpty}>
+            <div className={classNames(styles.listRow, styles.listEmpty)}>
                 {'(empty)' /* TODO waiting for design before translation */}
             </div>
         );

src/components/monitor/monitor.css

@@ -138,6 +138,7 @@
 .value-inner {
     padding: 3px 5px;
     min-height: 22px;
+    overflow: hidden; /* Don't let long values escape container */
 }
 
 .list-input {