Move options and back button into a single grid

src/client/lazy-app/Compress/Output/style.css

@@ -1,5 +1,5 @@
 .output {
-  composes: abs-fill from global;
+  display: contents;
 
   &::before {
     content: '';

src/client/lazy-app/Compress/index.tsx

@@ -889,11 +889,11 @@ export default class Compress extends Component<Props, State> {
           </div>
         ) : (
           [
-            <div class={style.options} key="options0">
+            <div class={style.options1} key="options0">
               {options[0]}
               {results[0]}
             </div>,
-            <div class={style.options} key="options1">
+            <div class={style.options2} key="options1">
               {options[1]}
               {results[1]}
             </div>,

src/client/lazy-app/Compress/style.css

@@ -8,8 +8,11 @@
   grid-template-rows: 1fr auto;
 
   @media (min-width: 600px) {
-    grid-template-columns: 1fr auto;
+    grid-template-rows: max-content 1fr;
-    grid-template-rows: 100%;
+    grid-template-columns: max-content 1fr max-content;
+    grid-template-areas:
+      'header header header'
+      'optsLeft viewportOpts optsRight';
   }
 }
 
@@ -36,6 +39,16 @@
   }
 }
 
+.options-1 {
+  composes: options;
+  grid-area: optsLeft;
+}
+
+.options-2 {
+  composes: options;
+  grid-area: optsRight;
+}
+
 .multi-panel {
   position: relative;
   display: flex;
@@ -76,10 +89,10 @@
 
 .back {
   composes: unbutton from global;
-  position: absolute;
+  position: relative;
-  top: var(--dist);
+  grid-area: header;
-  left: var(--dist);
+  margin: 14px;
-  --dist: 14px;
+  justify-self: start;
 
   & > svg {
     width: 58px;