From 9ca6fd64984c0c7e77c77fc1b9cd2058833f26c5 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 19:13:05 -0400
Subject: [PATCH] Center lightbox navigation controls

---
 ts/components/Lightbox.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index a17df22e9..896a79a23 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<Props, {}> {
         ref={this.setContainerRef}
       >
         <div style={styles.mainContainer}>
+          <div style={styles.controlsOffsetPlaceholder} />
           <div style={styles.objectContainer}>
             {!is.undefined(contentType)
               ? this.renderObject({ objectURL, contentType })