From 0371cfd292fe515042afc2b70e4e82900cff302f Mon Sep 17 00:00:00 2001
From: Surma <surma@surma.dev>
Date: Tue, 1 Dec 2020 13:12:28 +0000
Subject: [PATCH 1/7] Add CLI button

---
 .../lazy-app/Compress/Options/index.tsx       | 23 ++++++++-
 .../lazy-app/util/cli-invocation-generator.ts | 51 +++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 src/client/lazy-app/util/cli-invocation-generator.ts

diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index ede3b056..233b8c5a 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -18,6 +18,8 @@ import Select from './Select';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
 
+import { generateCliInvocation } from '../../util/cli-invocation-generator';
+
 interface Props {
   mobileView: boolean;
   source?: SourceImage;
@@ -97,6 +99,23 @@ export default class Options extends Component<Props, State> {
     );
   };
 
+  private onCreateCLIInvocation = () => {
+    if (!this.props.encoderState) {
+      return;
+    }
+
+    try {
+      const cliInvocation = generateCliInvocation(
+        this.props.encoderState,
+        this.props.processorState,
+      );
+      navigator.clipboard.writeText(cliInvocation);
+    } catch (e) {
+      // Show toast
+      console.error(e);
+    }
+  };
+
   render(
     { source, encoderState, processorState, onEncoderOptionsChange }: Props,
     { supportedEncoderMap }: State,
@@ -110,7 +129,9 @@ export default class Options extends Component<Props, State> {
         <Expander>
           {!encoderState ? null : (
             <div>
-              <h3 class={style.optionsTitle}>Edit</h3>
+              <h3 class={style.optionsTitle}>
+                <button onClick={this.onCreateCLIInvocation}>CLI</button>Edit
+              </h3>
               <label class={style.sectionEnabler}>
                 <Checkbox
                   name="resize.enable"
diff --git a/src/client/lazy-app/util/cli-invocation-generator.ts b/src/client/lazy-app/util/cli-invocation-generator.ts
new file mode 100644
index 00000000..56faf9ab
--- /dev/null
+++ b/src/client/lazy-app/util/cli-invocation-generator.ts
@@ -0,0 +1,51 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { EncoderState, ProcessorState } from '../feature-meta';
+
+// Maps our encoder.type values to CLI parameter names
+const typeMap = new Map<string, string>([
+  ['avif', '--avif'],
+  // ["jxl", "--jxl"],
+  ['mozJPEG', '--mozjpeg'],
+  ['oxiPNG', '--oxipng'],
+  ['webP', '--webp'],
+  // ["wp2", "--wp2"]
+]);
+
+// Same as JSON.stringify, but with single quotes around the entire value
+// so that shells don’t do weird stuff.
+function cliJson<T>(v: T): string {
+  return "'" + JSON.stringify(v) + "'";
+}
+
+export function generateCliInvocation(
+  encoder: EncoderState,
+  processor: ProcessorState,
+): string {
+  if (!typeMap.has(encoder.type)) {
+    throw Error(`Encoder ${encoder.type} is unsupported in the CLI`);
+  }
+  return [
+    'npx',
+    '@squoosh/cli',
+    ...(processor.resize.enabled
+      ? ['--resize', cliJson(processor.resize)]
+      : []),
+    ...(processor.quantize.enabled
+      ? ['--quant', cliJson(processor.quantize)]
+      : []),
+    typeMap.get(encoder.type)!,
+    cliJson(encoder.options),
+  ].join(' ');
+}

From 46764f337562948ca30d5574c8ff643cb872a6e5 Mon Sep 17 00:00:00 2001
From: Surma <surma@surma.dev>
Date: Tue, 1 Dec 2020 13:14:35 +0000
Subject: [PATCH 2/7] Show snack on error

---
 src/client/lazy-app/Compress/Options/index.tsx | 5 +++--
 src/client/lazy-app/Compress/index.tsx         | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index 233b8c5a..4b06e016 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -5,6 +5,7 @@ import 'add-css:./style.css';
 import { cleanSet, cleanMerge } from '../../util/clean-modify';
 
 import type { SourceImage, OutputType } from '..';
+import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
 import {
   EncoderOptions,
   EncoderState,
@@ -21,6 +22,7 @@ import { Options as ResizeOptionsComponent } from 'features/processors/resize/cl
 import { generateCliInvocation } from '../../util/cli-invocation-generator';
 
 interface Props {
+  showSnack: SnackBarElement['showSnackbar'];
   mobileView: boolean;
   source?: SourceImage;
   encoderState?: EncoderState;
@@ -111,8 +113,7 @@ export default class Options extends Component<Props, State> {
       );
       navigator.clipboard.writeText(cliInvocation);
     } catch (e) {
-      // Show toast
-      console.error(e);
+      this.props.showSnack(e);
     }
   };
 
diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx
index bcd84242..eada89d5 100644
--- a/src/client/lazy-app/Compress/index.tsx
+++ b/src/client/lazy-app/Compress/index.tsx
@@ -786,7 +786,7 @@ export default class Compress extends Component<Props, State> {
   }
 
   render(
-    { onBack }: Props,
+    { onBack, showSnack }: Props,
     { loading, sides, source, mobileView, preprocessorState }: State,
   ) {
     const [leftSide, rightSide] = sides;
@@ -794,6 +794,7 @@ export default class Compress extends Component<Props, State> {
 
     const options = sides.map((side, index) => (
       <Options
+        showSnack={showSnack}
         source={source}
         mobileView={mobileView}
         processorState={side.latestSettings.processorState}

From 8105633ca6e4aa1e246e08c2e9fc81c46e0511e1 Mon Sep 17 00:00:00 2001
From: Surma <surma@surma.dev>
Date: Mon, 7 Dec 2020 11:17:38 +0000
Subject: [PATCH 3/7] Update
 src/client/lazy-app/util/cli-invocation-generator.ts

---
 src/client/lazy-app/util/cli-invocation-generator.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/lazy-app/util/cli-invocation-generator.ts b/src/client/lazy-app/util/cli-invocation-generator.ts
index 56faf9ab..679c6bb3 100644
--- a/src/client/lazy-app/util/cli-invocation-generator.ts
+++ b/src/client/lazy-app/util/cli-invocation-generator.ts
@@ -16,11 +16,11 @@ import { EncoderState, ProcessorState } from '../feature-meta';
 // Maps our encoder.type values to CLI parameter names
 const typeMap = new Map<string, string>([
   ['avif', '--avif'],
-  // ["jxl", "--jxl"],
+  ["jxl", "--jxl"],
   ['mozJPEG', '--mozjpeg'],
   ['oxiPNG', '--oxipng'],
   ['webP', '--webp'],
-  // ["wp2", "--wp2"]
+  ["wp2", "--wp2"],
 ]);
 
 // Same as JSON.stringify, but with single quotes around the entire value

From 7de8fa9da310b25d552c42ce2ba30f0010e731a7 Mon Sep 17 00:00:00 2001
From: Jason Miller <jason@developit.ca>
Date: Wed, 9 Dec 2020 18:11:44 -0500
Subject: [PATCH 4/7] Initial Options Flyout

---
 src/client/lazy-app/Compress/Flyout/style.css |  4 +-
 .../lazy-app/Compress/Options/index.tsx       | 53 +++++++++-----
 .../lazy-app/Compress/Options/style.css       | 70 ++++++++++++++++++-
 src/client/lazy-app/Compress/Output/style.css |  2 +-
 src/client/lazy-app/Compress/index.tsx        | 31 +++++++-
 src/client/lazy-app/icons/index.tsx           | 16 +++--
 .../{cli-invocation-generator.ts => cli.ts}   |  0
 7 files changed, 146 insertions(+), 30 deletions(-)
 rename src/client/lazy-app/util/{cli-invocation-generator.ts => cli.ts} (100%)

diff --git a/src/client/lazy-app/Compress/Flyout/style.css b/src/client/lazy-app/Compress/Flyout/style.css
index f8dcb7c7..73541deb 100644
--- a/src/client/lazy-app/Compress/Flyout/style.css
+++ b/src/client/lazy-app/Compress/Flyout/style.css
@@ -1,6 +1,8 @@
 .wrap {
-  display: inline;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-items: center;
 }
 
 .wrap > aside:last-of-type {
diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index 5cd27d3b..dff931d1 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -5,7 +5,6 @@ import 'add-css:./style.css';
 import { cleanSet, cleanMerge } from '../../util/clean-modify';
 
 import type { SourceImage, OutputType } from '..';
-import type SnackBarElement from 'shared/initial-app/custom-els/snack-bar';
 import {
   EncoderOptions,
   EncoderState,
@@ -14,17 +13,15 @@ import {
   encoderMap,
 } from '../../feature-meta';
 import Expander from './Expander';
-import Checkbox from './Checkbox';
 import Toggle from './Toggle';
 import Select from './Select';
+import Flyout from '../Flyout';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-
-import { generateCliInvocation } from '../../util/cli-invocation-generator';
+import { CLIIcon, MoreIcon, SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
-  showSnack: SnackBarElement['showSnackbar'];
   mobileView: boolean;
   source?: SourceImage;
   encoderState?: EncoderState;
@@ -32,6 +29,8 @@ interface Props {
   onEncoderTypeChange(index: 0 | 1, newType: OutputType): void;
   onEncoderOptionsChange(index: 0 | 1, newOptions: EncoderOptions): void;
   onProcessorOptionsChange(index: 0 | 1, newOptions: ProcessorState): void;
+  onCopyToOtherSideClick(index: 0 | 1): void;
+  onCopyCliClick(index: 0 | 1): void;
 }
 
 interface State {
@@ -110,20 +109,12 @@ export default class Options extends Component<Props, State> {
     this.props.onEncoderOptionsChange(this.props.index, newOptions);
   };
 
-  private onCreateCLIInvocation = () => {
-    if (!this.props.encoderState) {
-      return;
-    }
+  private onCopyCliClick = () => {
+    this.props.onCopyCliClick(this.props.index);
+  };
 
-    try {
-      const cliInvocation = generateCliInvocation(
-        this.props.encoderState,
-        this.props.processorState,
-      );
-      navigator.clipboard.writeText(cliInvocation);
-    } catch (e) {
-      this.props.showSnack(e);
-    }
+  private onCopyToOtherSideClick = () => {
+    this.props.onCopyToOtherSideClick(this.props.index);
   };
 
   render(
@@ -146,7 +137,31 @@ export default class Options extends Component<Props, State> {
           {!encoderState ? null : (
             <div>
               <h3 class={style.optionsTitle}>
-                <button onClick={this.onCreateCLIInvocation}>CLI</button>Edit
+                Edit
+                <Flyout
+                  direction={['up', 'left']}
+                  anchor="right"
+                  toggle={
+                    <button class={style.titleButton}>
+                      <MoreIcon />
+                    </button>
+                  }
+                >
+                  <button
+                    class={style.menuButton}
+                    onClick={this.onCopyCliClick}
+                  >
+                    <CLIIcon />
+                    Copy npx command
+                  </button>
+                  <button
+                    class={style.menuButton}
+                    onClick={this.onCopyToOtherSideClick}
+                  >
+                    <SwapIcon />
+                    Copy settings to other side
+                  </button>
+                </Flyout>
               </h3>
               <label class={style.sectionEnabler}>
                 Resize
diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css
index 7f1d1590..104e3a7e 100644
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/src/client/lazy-app/Compress/Options/style.css
@@ -14,13 +14,21 @@
   background-color: var(--main-theme-color);
   color: var(--header-text-color);
   margin: 0;
-  padding: 10px var(--horizontal-padding);
+  height: 38px;
+  padding: 0 0 0 var(--horizontal-padding);
   font-weight: bold;
   font-size: 1.4rem;
   border-bottom: 1px solid var(--off-black);
   transition: all 300ms ease-in-out;
   transition-property: background-color, color;
 
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  gap: 0.8rem 0;
+
   position: sticky;
   top: 0;
   z-index: 1;
@@ -81,3 +89,63 @@
   box-sizing: border-box;
   border-radius: 4px;
 }
+
+.options-title aside {
+  right: 10px;
+  bottom: calc(100% + 10px);
+}
+
+.title-button {
+  composes: unbutton from global;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0);
+
+  &:hover,
+  &:active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  svg {
+    --size: 24px;
+    fill: var(--header-text-color);
+    display: block;
+    width: var(--size);
+    height: var(--size);
+    padding: 5px;
+  }
+}
+
+.menu-button {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 8px 0;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-radius: 2rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  height: 39px;
+  padding: 0 16px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: #fff;
+
+  &:hover {
+    background: rgba(50, 50, 50, 0.92);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px #fff;
+    outline: none;
+    z-index: 1;
+  }
+
+  & > svg {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    color: var(--main-theme-color);
+  }
+}
diff --git a/src/client/lazy-app/Compress/Output/style.css b/src/client/lazy-app/Compress/Output/style.css
index cb48e003..989cc572 100644
--- a/src/client/lazy-app/Compress/Output/style.css
+++ b/src/client/lazy-app/Compress/Output/style.css
@@ -176,7 +176,7 @@ input.zoom {
   }
 }
 
-[data-flyout-open] {
+.controls [data-flyout-open] {
   .moreButton {
     background: rgba(82, 82, 82, 0.92);
 
diff --git a/src/client/lazy-app/Compress/index.tsx b/src/client/lazy-app/Compress/index.tsx
index 8fe3dc2c..53bb1f35 100644
--- a/src/client/lazy-app/Compress/index.tsx
+++ b/src/client/lazy-app/Compress/index.tsx
@@ -33,6 +33,7 @@ import WorkerBridge from '../worker-bridge';
 import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
 import Transform from './Transform';
+import { generateCliInvocation } from '../util/cli';
 
 export type OutputType = EncoderType | 'identity';
 
@@ -411,7 +412,7 @@ export default class Compress extends Component<Props, State> {
     this.queueUpdateImage();
   }
 
-  private async onCopyToOtherClick(index: 0 | 1) {
+  private onCopyToOtherClick = async (index: 0 | 1) => {
     const otherIndex = index ? 0 : 1;
     const oldSettings = this.state.sides[otherIndex];
     const newSettings = { ...this.state.sides[index] };
@@ -436,7 +437,7 @@ export default class Compress extends Component<Props, State> {
     this.setState({
       sides: cleanSet(this.state.sides, otherIndex, oldSettings),
     });
-  }
+  };
 
   private onPreprocessorChange = async (
     preprocessorState: PreprocessorState,
@@ -483,6 +484,29 @@ export default class Compress extends Component<Props, State> {
     }));
   };
 
+  private onCopyCliClick = async (index: 0 | 1) => {
+    try {
+      const cliInvocation = generateCliInvocation(
+        this.state.sides[index].latestSettings.encoderState!,
+        this.state.sides[index].latestSettings.processorState,
+      );
+      await navigator.clipboard.writeText(cliInvocation);
+      const result = await this.props.showSnack(
+        'CLI command copied to clipboard',
+        {
+          timeout: 8000,
+          actions: ['usage', 'dismiss'],
+        },
+      );
+
+      if (result === 'usage') {
+        open('https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli');
+      }
+    } catch (e) {
+      this.props.showSnack(e);
+    }
+  };
+
   /**
    * Debounce the heavy lifting of updateImage.
    * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
@@ -853,7 +877,6 @@ export default class Compress extends Component<Props, State> {
     const options = sides.map((side, index) => (
       <Options
         index={index as 0 | 1}
-        showSnack={showSnack}
         source={source}
         mobileView={mobileView}
         processorState={side.latestSettings.processorState}
@@ -861,6 +884,8 @@ export default class Compress extends Component<Props, State> {
         onEncoderTypeChange={this.onEncoderTypeChange}
         onEncoderOptionsChange={this.onEncoderOptionsChange}
         onProcessorOptionsChange={this.onProcessorOptionsChange}
+        onCopyCliClick={this.onCopyCliClick}
+        onCopyToOtherSideClick={this.onCopyToOtherClick}
       />
     ));
 
diff --git a/src/client/lazy-app/icons/index.tsx b/src/client/lazy-app/icons/index.tsx
index 41d33f73..efca6b27 100644
--- a/src/client/lazy-app/icons/index.tsx
+++ b/src/client/lazy-app/icons/index.tsx
@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-const Icon = (props: preact.JSX.HTMLAttributes) => (
+const Icon = (props: preact.JSX.HTMLAttributes | preact.JSX.SVGAttributes) => (
   // @ts-ignore - TS bug https://github.com/microsoft/TypeScript/issues/16019
   <svg
     width="24"
@@ -11,9 +11,15 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
   />
 );
 
+export const CLIIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M1 2.7H23v18.5H1zm5.5 13l3.7-3.7-3.7-3.7m5.5 7.4h5.6" />
+  </Icon>
+);
+
 export const SwapIcon = (props: preact.JSX.HTMLAttributes) => (
   <Icon {...props}>
-    <path d="M9.01 14H2v2h7.01v3L13 15l-3.99-4zm5.98-1v-3H22V8h-7.01V5L11 9z" />
+    <path d="M8.5 8.6v6.8L5.1 12l3.4-3.4M10 5l-7 7 7 7V5zm4 0v14l7-7-7-7z" />
   </Icon>
 );
 
@@ -77,9 +83,9 @@ export const RotateIcon = (props: preact.JSX.HTMLAttributes) => (
 
 export const MoreIcon = (props: preact.JSX.HTMLAttributes) => (
   <Icon {...props}>
-    <circle cx="12" cy="6" r="2" fill="#fff" />
-    <circle cx="12" cy="12" r="2" fill="#fff" />
-    <circle cx="12" cy="18" r="2" fill="#fff" />
+    <circle cx="12" cy="6" r="2" />
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="12" cy="18" r="2" />
   </Icon>
 );
 
diff --git a/src/client/lazy-app/util/cli-invocation-generator.ts b/src/client/lazy-app/util/cli.ts
similarity index 100%
rename from src/client/lazy-app/util/cli-invocation-generator.ts
rename to src/client/lazy-app/util/cli.ts

From a65bbdf811398fbe4517482b9ffd3a432db5d2b9 Mon Sep 17 00:00:00 2001
From: Jason Miller <jason@developit.ca>
Date: Wed, 9 Dec 2020 23:47:43 -0500
Subject: [PATCH 5/7] Hoist flyouts to <body>

---
 src/client/lazy-app/Compress/Flyout/index.tsx | 141 +++++++++++++++---
 src/client/lazy-app/Compress/Flyout/style.css |  36 +----
 .../lazy-app/Compress/Options/index.tsx       |   1 +
 .../lazy-app/Compress/Options/style.css       |   9 +-
 src/client/lazy-app/Compress/Output/index.tsx |  14 +-
 5 files changed, 142 insertions(+), 59 deletions(-)

diff --git a/src/client/lazy-app/Compress/Flyout/index.tsx b/src/client/lazy-app/Compress/Flyout/index.tsx
index 6cecfa18..f13e0e48 100644
--- a/src/client/lazy-app/Compress/Flyout/index.tsx
+++ b/src/client/lazy-app/Compress/Flyout/index.tsx
@@ -6,51 +6,119 @@ import {
   createRef,
   ComponentChildren,
   ComponentProps,
+  Fragment,
+  render,
 } from 'preact';
-import { ClickOutsideDetector } from '../ClickOutsideDetector';
 import * as style from './style.css';
 import 'add-css:./style.css';
 
 type Anchor = 'left' | 'right' | 'top' | 'bottom';
 type Direction = 'left' | 'right' | 'up' | 'down';
 
+const has = (haystack: string | string[] | undefined, needle: string) =>
+  Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle;
+
 interface Props extends ComponentProps<'aside'> {
   showing?: boolean;
   direction?: Direction | Direction[];
-  anchor?: Anchor | Anchor[];
+  anchor?: Anchor;
   toggle?: VNode;
   children?: ComponentChildren;
 }
 
 interface State {
   showing: boolean;
+  hasShown: boolean;
 }
 
 export default class Flyout extends Component<Props, State> {
   state = {
     showing: this.props.showing === true,
+    hasShown: this.props.showing === true,
   };
 
+  private wrap = createRef<HTMLElement>();
+
   private menu = createRef<HTMLElement>();
 
-  private hide = () => {
-    this.setState({ showing: false });
+  private resizeObserver?: ResizeObserver;
+
+  private shown?: number;
+
+  private dismiss = (event: Event) => {
+    if (this.menu.current && this.menu.current.contains(event.target as Node))
+      return;
+    // prevent toggle buttons from immediately dismissing:
+    if (this.shown && Date.now() - this.shown < 10) return;
+    this.setShowing(false);
+  };
+
+  private setShowing = (showing?: boolean) => {
+    this.shown = Date.now();
+    if (showing) this.setState({ showing: true, hasShown: true });
+    else this.setState({ showing: false });
   };
 
   private toggle = () => {
-    this.setState({ showing: !this.state.showing });
+    this.setShowing(!this.state.showing);
+  };
+
+  private reposition = () => {
+    const menu = this.menu.current;
+    const wrap = this.wrap.current;
+    if (!menu || !wrap || !this.state.showing) return;
+    const bbox = wrap.getBoundingClientRect();
+
+    const { direction = 'down', anchor = 'right' } = this.props;
+    const { innerWidth, innerHeight } = window;
+
+    const anchorX = has(anchor, 'left') ? bbox.left : bbox.right;
+
+    menu.style.left = menu.style.right = menu.style.top = menu.style.bottom =
+      '';
+
+    if (has(direction, 'left')) {
+      menu.style.right = innerWidth - anchorX + 'px';
+    } else {
+      menu.style.left = anchorX + 'px';
+    }
+    if (has(direction, 'up')) {
+      const anchorY = has(anchor, 'bottom') ? bbox.bottom : bbox.top;
+      menu.style.bottom = innerHeight - anchorY + 'px';
+    } else {
+      const anchorY = has(anchor, 'top') ? bbox.top : bbox.bottom;
+      menu.style.top = anchorY + 'px';
+    }
   };
 
   componentWillReceiveProps({ showing }: Props) {
     if (showing !== this.props.showing) {
-      this.setState({ showing });
+      this.setShowing(showing);
     }
   }
 
+  componentDidMount() {
+    addEventListener('click', this.dismiss, { passive: true });
+    addEventListener('resize', this.reposition, { passive: true });
+    if (typeof ResizeObserver === 'function' && this.wrap.current) {
+      this.resizeObserver = new ResizeObserver(this.reposition);
+      this.resizeObserver.observe(this.wrap.current);
+    }
+    if (this.props.showing) this.setShowing(true);
+  }
+
+  componentWillUnmount() {
+    removeEventListener('click', this.dismiss);
+    removeEventListener('resize', this.reposition);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+  }
+
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.state.showing && !prevState.showing) {
       const menu = this.menu.current;
       if (menu) {
+        this.reposition();
+
         let toFocus = menu.firstElementChild;
         for (let child of menu.children) {
           if (child.hasAttribute('autofocus')) {
@@ -79,21 +147,56 @@ export default class Flyout extends Component<Props, State> {
     const anchorText = Array.isArray(anchor) ? anchor.join(' ') : anchor;
 
     return (
-      <span class={style.wrap} data-flyout-open={showing ? '' : undefined}>
-        <ClickOutsideDetector onClick={this.hide}>
-          {toggle && cloneElement(toggle, toggleProps)}
+      <span
+        class={style.wrap}
+        ref={this.wrap}
+        data-flyout-open={showing ? '' : undefined}
+      >
+        {toggle && cloneElement(toggle, toggleProps)}
 
-          <aside
-            {...props}
-            ref={this.menu}
-            hidden={!showing}
-            data-anchor={anchorText}
-            data-direction={directionText}
-          >
-            {children}
-          </aside>
-        </ClickOutsideDetector>
+        {showing &&
+          createPortal(
+            <aside
+              {...props}
+              class={`${style.flyout} ${props.class || props.className || ''}`}
+              ref={this.menu}
+              data-anchor={anchorText}
+              data-direction={directionText}
+            >
+              {children}
+            </aside>,
+            document.body,
+          )}
       </span>
     );
   }
 }
+
+// not worth pulling in compat
+function createPortal(children: ComponentChildren, parent: Element) {
+  return <Portal parent={parent}>{children}</Portal>;
+}
+// this is probably overly careful, since it works directly rendering into parent
+function createPersistentFragment(parent: Element) {
+  const frag = {
+    nodeType: 11,
+    childNodes: [],
+    appendChild: parent.appendChild.bind(parent),
+    insertBefore: parent.insertBefore.bind(parent),
+    removeChild: parent.removeChild.bind(parent),
+  };
+  return (frag as unknown) as Element;
+}
+class Portal extends Component<{
+  children: ComponentChildren;
+  parent: Element;
+}> {
+  root = createPersistentFragment(this.props.parent);
+  componentWillUnmount() {
+    render(null, this.root);
+  }
+  render() {
+    render(<Fragment>{this.props.children}</Fragment>, this.root);
+    return null;
+  }
+}
diff --git a/src/client/lazy-app/Compress/Flyout/style.css b/src/client/lazy-app/Compress/Flyout/style.css
index 73541deb..ebae67d7 100644
--- a/src/client/lazy-app/Compress/Flyout/style.css
+++ b/src/client/lazy-app/Compress/Flyout/style.css
@@ -5,11 +5,9 @@
   justify-items: center;
 }
 
-.wrap > aside:last-of-type {
+.flyout {
   display: inline-block;
-  position: absolute;
-  left: 0;
-  top: 100%;
+  position: fixed;
   z-index: 100;
   display: flex;
   flex-wrap: nowrap;
@@ -25,44 +23,14 @@
     display: none;
   }
 
-  /* align to the right edge */
-  &[data-anchor*='right'] {
-    left: 100%;
-  }
-
-  /* open to the left */
   &[data-direction*='left'] {
-    right: 0;
-    left: auto;
     align-items: flex-end;
-    &[anchor*='right'] {
-      right: 100%;
-    }
   }
 
-  /* align to the top edge */
-  &[data-anchor*='top'] {
-    top: 0;
-  }
-
-  /* open to the left */
   &[data-direction*='up'] {
-    bottom: 100%;
-    top: auto;
-    flex-direction: column-reverse;
     --flyout-offset-y: 20px;
-    &[data-anchor*='bottom'] {
-      bottom: 0;
-    }
-  }
-
-  /*
-  @media (min-width: 860px) {
     flex-direction: column-reverse;
-    top: auto;
-    bottom: 100%;
   }
-  */
 }
 
 @keyframes menuOpen {
diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index dff931d1..ee0efb1b 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -139,6 +139,7 @@ export default class Options extends Component<Props, State> {
               <h3 class={style.optionsTitle}>
                 Edit
                 <Flyout
+                  class={style.menu}
                   direction={['up', 'left']}
                   anchor="right"
                   toggle={
diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css
index 104e3a7e..99704e9d 100644
--- a/src/client/lazy-app/Compress/Options/style.css
+++ b/src/client/lazy-app/Compress/Options/style.css
@@ -15,7 +15,7 @@
   color: var(--header-text-color);
   margin: 0;
   height: 38px;
-  padding: 0 0 0 var(--horizontal-padding);
+  padding: 0 var(--horizontal-padding);
   font-weight: bold;
   font-size: 1.4rem;
   border-bottom: 1px solid var(--off-black);
@@ -90,12 +90,13 @@
   border-radius: 4px;
 }
 
-.options-title aside {
-  right: 10px;
-  bottom: calc(100% + 10px);
+.menu {
+  transform: translateY(-10px);
 }
 
 .title-button {
+  position: relative;
+  left: 10px;
   composes: unbutton from global;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0);
diff --git a/src/client/lazy-app/Compress/Output/index.tsx b/src/client/lazy-app/Compress/Output/index.tsx
index 017c209f..184ed83d 100644
--- a/src/client/lazy-app/Compress/Output/index.tsx
+++ b/src/client/lazy-app/Compress/Output/index.tsx
@@ -40,6 +40,7 @@ interface State {
   altBackground: boolean;
   transform: boolean;
   menuOpen: boolean;
+  smallControls: boolean;
 }
 
 const scaleToOpts: ScaleToOpts = {
@@ -56,6 +57,9 @@ export default class Output extends Component<Props, State> {
     altBackground: false,
     transform: false,
     menuOpen: false,
+    smallControls:
+      typeof matchMedia === 'function' &&
+      matchMedia('(max-width: 859px)').matches,
   };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
@@ -84,6 +88,12 @@ export default class Output extends Component<Props, State> {
     if (this.canvasRight && rightDraw) {
       drawDataToCanvas(this.canvasRight, rightDraw);
     }
+
+    if (typeof matchMedia === 'function') {
+      matchMedia('(max-width: 859px)').addEventListener('change', (e) =>
+        this.setState({ smallControls: e.matches }),
+      );
+    }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -278,7 +288,7 @@ export default class Output extends Component<Props, State> {
       onShowPreprocessorTransforms,
       onToggleBackground,
     }: Props,
-    { scale, editingScale }: State,
+    { scale, editingScale, smallControls }: State,
   ) {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
@@ -370,7 +380,7 @@ export default class Output extends Component<Props, State> {
               class={style.menu}
               showing={hidden ? false : undefined}
               anchor="right"
-              direction={mobileView ? ['down', 'left'] : 'up'}
+              direction={smallControls ? ['down', 'left'] : 'up'}
               toggle={
                 <button class={`${style.button} ${style.moreButton}`}>
                   <MoreIcon />

From 76ef6294f36ce94058fd882b5fb94e7caeffe5f6 Mon Sep 17 00:00:00 2001
From: Jason Miller <jason@developit.ca>
Date: Thu, 10 Dec 2020 23:37:55 -0500
Subject: [PATCH 6/7] Fix merge issue

---
 src/client/lazy-app/icons/index.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/client/lazy-app/icons/index.tsx b/src/client/lazy-app/icons/index.tsx
index 802f892c..efca6b27 100644
--- a/src/client/lazy-app/icons/index.tsx
+++ b/src/client/lazy-app/icons/index.tsx
@@ -130,14 +130,3 @@ export const DownloadIcon = () => (
     <path d="M6.6 2.7h-4v13.2h2.7A2.7 2.7 0 018 18.6a2.7 2.7 0 002.6 2.6h2.7a2.7 2.7 0 002.6-2.6 2.7 2.7 0 012.7-2.7h2.6V2.7h-4a1.3 1.3 0 110-2.7h4A2.7 2.7 0 0124 2.7v18.5a2.7 2.7 0 01-2.7 2.7H2.7A2.7 2.7 0 010 21.2V2.7A2.7 2.7 0 012.7 0h4a1.3 1.3 0 010 2.7zm4 7.4V1.3a1.3 1.3 0 112.7 0v8.8L15 8.4a1.3 1.3 0 011.9 1.8l-4 4a1.3 1.3 0 01-1.9 0l-4-4A1.3 1.3 0 019 8.4z" />
   </svg>
 );
-
-export const CLIIcon = () => (
-  <svg viewBox="0 0 81.3 68.8">
-    <path
-      fill="none"
-      stroke-miterlimit="15.6"
-      stroke-width="6.3"
-      d="M3.1 3.1h75v62.5h-75zm18.8 43.8l12.5-12.5-12.5-12.5m18.7 25h18.8"
-    />
-  </svg>
-);

From ce3d94297dc2bba099731c1ea9cea39d97b3fe35 Mon Sep 17 00:00:00 2001
From: Jason Miller <jason@developit.ca>
Date: Thu, 10 Dec 2020 23:44:48 -0500
Subject: [PATCH 7/7] Close Options flyout when clicking an item

---
 src/client/lazy-app/Compress/Flyout/index.tsx  | 18 +++++++++++++-----
 src/client/lazy-app/Compress/Options/index.tsx |  7 ++++++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/client/lazy-app/Compress/Flyout/index.tsx b/src/client/lazy-app/Compress/Flyout/index.tsx
index f13e0e48..c52c7099 100644
--- a/src/client/lazy-app/Compress/Flyout/index.tsx
+++ b/src/client/lazy-app/Compress/Flyout/index.tsx
@@ -18,7 +18,7 @@ type Direction = 'left' | 'right' | 'up' | 'down';
 const has = (haystack: string | string[] | undefined, needle: string) =>
   Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle;
 
-interface Props extends ComponentProps<'aside'> {
+interface Props extends Omit<ComponentProps<'aside'>, 'ref'> {
   showing?: boolean;
   direction?: Direction | Direction[];
   anchor?: Anchor;
@@ -53,16 +53,24 @@ export default class Flyout extends Component<Props, State> {
     this.setShowing(false);
   };
 
+  hide = () => {
+    this.setShowing(false);
+  };
+
+  show = () => {
+    this.setShowing(true);
+  };
+
+  toggle = () => {
+    this.setShowing(!this.state.showing);
+  };
+
   private setShowing = (showing?: boolean) => {
     this.shown = Date.now();
     if (showing) this.setState({ showing: true, hasShown: true });
     else this.setState({ showing: false });
   };
 
-  private toggle = () => {
-    this.setShowing(!this.state.showing);
-  };
-
   private reposition = () => {
     const menu = this.menu.current;
     const wrap = this.wrap.current;
diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index ee0efb1b..021bfb42 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 import * as style from './style.css';
 import 'add-css:./style.css';
@@ -65,6 +65,8 @@ export default class Options extends Component<Props, State> {
     supportedEncoderMap: undefined,
   };
 
+  menu = createRef<Flyout>();
+
   constructor() {
     super();
     supportedEncoderMapP.then((supportedEncoderMap) =>
@@ -111,10 +113,12 @@ export default class Options extends Component<Props, State> {
 
   private onCopyCliClick = () => {
     this.props.onCopyCliClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   private onCopyToOtherSideClick = () => {
     this.props.onCopyToOtherSideClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   render(
@@ -139,6 +143,7 @@ export default class Options extends Component<Props, State> {
               <h3 class={style.optionsTitle}>
                 Edit
                 <Flyout
+                  ref={this.menu}
                   class={style.menu}
                   direction={['up', 'left']}
                   anchor="right"