Avoid having an element that covers the pinch zoom

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,7 +409,6 @@ 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}
@@ -427,7 +426,6 @@ export default class Compress extends Component<Props, State> {
           />
         ))}
       </div>
-      </div>
     );
   }
 }

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;
+    grid-template-columns: 1fr auto;
-    align-items: flex-end;
+    align-items: end;
   }
 
   &.vertical {
-    flex-direction: column;
+    // TODO
-    justify-content: flex-end;
   }
 }