Responsive grid

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

@@ -41,16 +41,14 @@
 }
 
 .controls {
-  position: absolute;
   display: flex;
   justify-content: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 9px 84px;
   overflow: hidden;
   flex-wrap: wrap;
   contain: content;
+  grid-area: header;
+  align-self: center;
+  padding: 9px 66px;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
@@ -60,11 +58,9 @@
 
   @media (min-width: 860px) {
     padding: 9px;
-    top: auto;
-    left: 320px;
-    right: 320px;
-    bottom: 0;
     flex-wrap: wrap-reverse;
+    grid-area: viewportOpts;
+    align-self: end;
   }
 }
 

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

@@ -3,9 +3,10 @@
   height: 100%;
   contain: strict;
   display: grid;
-  align-items: end;
-  align-content: end;
-  grid-template-rows: 1fr auto;
+  grid-template-rows: max-content 1fr;
+  grid-template-areas:
+    'header'
+    'opts';
 
   @media (min-width: 600px) {
     grid-template-rows: max-content 1fr;
@@ -27,6 +28,8 @@
   width: calc(100% - 60px);
   max-height: 100%;
   overflow: hidden;
+  align-self: end;
+  grid-area: opts;
 
   @media (min-width: 600px) {
     width: 300px;
@@ -86,13 +89,22 @@
   composes: unbutton from global;
   position: relative;
   grid-area: header;
-  margin: 14px;
+  margin: 9px;
   justify-self: start;
+  align-self: start;
+
+  & > svg {
+    width: 47px;
+  }
+
+  @media (min-width: 600px) {
+    margin: 14px;
 
     & > svg {
       width: 58px;
     }
   }
+}
 
 .back-blob {
   fill: var(--hot-pink);