diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index a17df22e959..896a79a23e5 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -18,6 +18,9 @@ interface Props { onSave?: () => void; } +const CONTROLS_WIDTH = 50; +const CONTROLS_SPACING = 10; + const styles = { container: { display: 'flex', @@ -32,6 +35,7 @@ const styles = { mainContainer: { display: 'flex', flexDirection: 'row', + flexGrow: 1, paddingTop: 40, paddingLeft: 40, paddingRight: 40, @@ -49,11 +53,17 @@ const styles = { maxHeight: '100%', objectFit: 'contain', } as React.CSSProperties, + controlsOffsetPlaceholder: { + width: CONTROLS_WIDTH, + marginRight: CONTROLS_SPACING, + flexShrink: 0, + }, controls: { + width: CONTROLS_WIDTH, flexShrink: 0, display: 'flex', flexDirection: 'column', - marginLeft: 10, + marginLeft: CONTROLS_SPACING, } as React.CSSProperties, navigationContainer: { flexShrink: 0, @@ -125,6 +135,7 @@ export class Lightbox extends React.Component { ref={this.setContainerRef} >
+
{!is.undefined(contentType) ? this.renderObject({ objectURL, contentType })