From c32b9a36bfb35a2f34ccdd9d92a5eef3a061f5f8 Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Sun, 21 Oct 2018 09:24:11 +0100
Subject: [PATCH] Avoid having an element that covers the pinch zoom

---
 src/components/compress/index.tsx  | 36 ++++++++++++++----------------
 src/components/compress/style.scss | 14 +++++-------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/compress/index.tsx b/src/components/compress/index.tsx
index 56c8e5b1..700c244e 100644
--- a/src/components/compress/index.tsx
+++ b/src/components/compress/index.tsx
@@ -400,7 +400,7 @@ export default class Compress extends Component<Props, State> {
     const [leftImageData, rightImageData] = images.map(i => i.data);
 
     return (
-      <div class={style.compress}>
+      <div class={`${style.compress} ${style[orientation]}`}>
         <Output
           originalImage={source && source.data}
           orientation={orientation}
@@ -409,24 +409,22 @@ export default class Compress extends Component<Props, State> {
           leftImgContain={leftImage.preprocessorState.resize.fitMethod === 'cover'}
           rightImgContain={rightImage.preprocessorState.resize.fitMethod === 'cover'}
         />
-        <div class={`${style.optionPair} ${style[orientation]}`}>
-          {images.map((image, index) => (
-            <Options
-              loading={loading || image.loading}
-              source={source}
-              orientation={orientation}
-              imageIndex={index}
-              imageFile={image.file}
-              downloadUrl={image.downloadUrl}
-              preprocessorState={image.preprocessorState}
-              encoderState={image.encoderState}
-              onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
-              onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
-              onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
-              onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
-            />
-          ))}
-        </div>
+        {images.map((image, index) => (
+          <Options
+            loading={loading || image.loading}
+            source={source}
+            orientation={orientation}
+            imageIndex={index}
+            imageFile={image.file}
+            downloadUrl={image.downloadUrl}
+            preprocessorState={image.preprocessorState}
+            encoderState={image.encoderState}
+            onEncoderTypeChange={this.onEncoderTypeChange.bind(this, index)}
+            onEncoderOptionsChange={this.onEncoderOptionsChange.bind(this, index)}
+            onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(this, index)}
+            onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index)}
+          />
+        ))}
       </div>
     );
   }
diff --git a/src/components/compress/style.scss b/src/components/compress/style.scss
index 29fefe9f..b7deed1e 100644
--- a/src/components/compress/style.scss
+++ b/src/components/compress/style.scss
@@ -1,19 +1,15 @@
 .compress {
-  height: 100%;
-}
-
-.option-pair {
-  display: flex;
   width: 100%;
   height: 100%;
+  contain: strict;
+  display: grid;
 
   &.horizontal {
-    justify-content: space-between;
-    align-items: flex-end;
+    grid-template-columns: 1fr auto;
+    align-items: end;
   }
 
   &.vertical {
-    flex-direction: column;
-    justify-content: flex-end;
+    // TODO
   }
 }