Ordering of items in mobile view. Changing scrolling element.

src/components/Options/index.tsx

@@ -136,7 +136,7 @@ export default class Options extends Component<Props, State> {
     const EncoderOptionComponent = encoderOptionsComponentMap[encoderState.type];
 
     return (
-      <div>
+      <div class={style.optionsScroller}>
         <Expander>
           {encoderState.type === identity.type ? null :
             <div>
@@ -181,7 +181,6 @@ export default class Options extends Component<Props, State> {
 
         <h3 class={style.optionsTitle}>Compress</h3>
 
-        <div class={style.optionsScroller}>
         <section class={`${style.optionOneCell} ${style.optionsSection}`}>
           {encoderSupportMap ?
             <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
@@ -206,7 +205,6 @@ export default class Options extends Component<Props, State> {
             />
           : null}
         </Expander>
-        </div>
 
         <div class={style.optionsCopy}>
           <button onClick={this.onCopyToOtherClick} class={style.copyButton}>

src/components/compress/index.tsx

@@ -154,7 +154,7 @@ async function processSvg(blob: Blob): Promise<HTMLImageElement> {
 }
 
 export default class Compress extends Component<Props, State> {
-  widthQuery = window.matchMedia('(max-width: 600px)');
+  widthQuery = window.matchMedia('(max-width: 599px)');
 
   state: State = {
     source: undefined,

src/components/compress/style.scss

@@ -36,4 +36,24 @@
 
 .multi-panel {
   position: relative;
+  display: flex;
+  flex-flow: column;
+
+  // Reorder so headings appear after content:
+  & > :nth-child(1) {
+    order: 2;
+    margin-bottom: 10px;
+  }
+
+  & > :nth-child(2) {
+    order: 1;
+  }
+
+  & > :nth-child(3) {
+    order: 4;
+  }
+
+  & > :nth-child(4) {
+    order: 3;
+  }
 }