From a2fb7a38cdd70769d114013f7b78d10795916c51 Mon Sep 17 00:00:00 2001
From: Jason Miller <jason@developit.ca>
Date: Wed, 9 Dec 2020 12:20:55 -0500
Subject: [PATCH] Fix mobile fly-out

---
 src/client/lazy-app/Compress/Flyout/index.tsx | 37 +++++++++++++------
 src/client/lazy-app/Compress/Flyout/style.css |  1 +
 src/client/lazy-app/Compress/Output/index.tsx |  2 +-
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/client/lazy-app/Compress/Flyout/index.tsx b/src/client/lazy-app/Compress/Flyout/index.tsx
index 37950d3b..6cecfa18 100644
--- a/src/client/lazy-app/Compress/Flyout/index.tsx
+++ b/src/client/lazy-app/Compress/Flyout/index.tsx
@@ -1,13 +1,22 @@
-import { h, cloneElement, Component, VNode, createRef, ComponentChildren, ComponentProps } from "preact";
-import { ClickOutsideDetector } from "../ClickOutsideDetector";
+import {
+  h,
+  cloneElement,
+  Component,
+  VNode,
+  createRef,
+  ComponentChildren,
+  ComponentProps,
+} 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';
 
 interface Props extends ComponentProps<'aside'> {
   showing?: boolean;
-  direction?: 'up' | 'down';
+  direction?: Direction | Direction[];
   anchor?: Anchor | Anchor[];
   toggle?: VNode;
   children?: ComponentChildren;
@@ -19,7 +28,7 @@ interface State {
 
 export default class Flyout extends Component<Props, State> {
   state = {
-    showing: this.props.showing === true
+    showing: this.props.showing === true,
   };
 
   private menu = createRef<HTMLElement>();
@@ -55,17 +64,23 @@ export default class Flyout extends Component<Props, State> {
     }
   }
 
-  render({ direction, anchor, toggle, children, ...props }: Props, { showing }: State) {
+  render(
+    { direction, anchor, toggle, children, ...props }: Props,
+    { showing }: State,
+  ) {
     const toggleProps = {
       flyoutOpen: showing,
-      onClick: this.toggle
+      onClick: this.toggle,
     };
 
+    const directionText = Array.isArray(direction)
+      ? direction.join(' ')
+      : direction;
     const anchorText = Array.isArray(anchor) ? anchor.join(' ') : anchor;
 
     return (
-        <span class={style.wrap} data-flyout-open={showing ? '' : undefined}>
-          <ClickOutsideDetector onClick={this.hide}>
+      <span class={style.wrap} data-flyout-open={showing ? '' : undefined}>
+        <ClickOutsideDetector onClick={this.hide}>
           {toggle && cloneElement(toggle, toggleProps)}
 
           <aside
@@ -73,12 +88,12 @@ export default class Flyout extends Component<Props, State> {
             ref={this.menu}
             hidden={!showing}
             data-anchor={anchorText}
-            data-direction={direction}
+            data-direction={directionText}
           >
             {children}
           </aside>
-          </ClickOutsideDetector>
-        </span>
+        </ClickOutsideDetector>
+      </span>
     );
   }
 }
diff --git a/src/client/lazy-app/Compress/Flyout/style.css b/src/client/lazy-app/Compress/Flyout/style.css
index f933f913..f8dcb7c7 100644
--- a/src/client/lazy-app/Compress/Flyout/style.css
+++ b/src/client/lazy-app/Compress/Flyout/style.css
@@ -32,6 +32,7 @@
   &[data-direction*='left'] {
     right: 0;
     left: auto;
+    align-items: flex-end;
     &[anchor*='right'] {
       right: 100%;
     }
diff --git a/src/client/lazy-app/Compress/Output/index.tsx b/src/client/lazy-app/Compress/Output/index.tsx
index 48efd24a..017c209f 100644
--- a/src/client/lazy-app/Compress/Output/index.tsx
+++ b/src/client/lazy-app/Compress/Output/index.tsx
@@ -370,7 +370,7 @@ export default class Output extends Component<Props, State> {
               class={style.menu}
               showing={hidden ? false : undefined}
               anchor="right"
-              direction={mobileView ? 'down' : 'up'}
+              direction={mobileView ? ['down', 'left'] : 'up'}
               toggle={
                 <button class={`${style.button} ${style.moreButton}`}>
                   <MoreIcon />