From 80dfa03b94e1441c9da7867b36c9b51710e71c6a Mon Sep 17 00:00:00 2001
From: Jake Archibald <jaffathecake@gmail.com>
Date: Fri, 30 Nov 2018 11:44:15 +0000
Subject: [PATCH] Avoid wrapping a single button (#357)

* Avoid wrapping a single button

* Making the zoom controls appear on the bottom, when the controls are positioned on the bottom
---
 src/components/Output/index.tsx  | 28 +++++++++++++++-------------
 src/components/Output/style.scss | 10 ++++++++++
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Output/index.tsx b/src/components/Output/index.tsx
index a52d2702..36ba4120 100644
--- a/src/components/Output/index.tsx
+++ b/src/components/Output/index.tsx
@@ -336,19 +336,21 @@ export default class Output extends Component<Props, State> {
               <AddIcon />
             </button>
           </div>
-          <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
-            <RotateIcon />
-          </button>
-          <button
-            class={`${style.button} ${altBackground ? style.active : ''}`}
-            onClick={this.toggleBackground}
-            title="Change canvas color"
-          >
-            {altBackground
-              ? <ToggleBackgroundActiveIcon />
-              : <ToggleBackgroundIcon />
-            }
-          </button>
+          <div class={style.buttonsNoWrap}>
+            <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
+              <RotateIcon />
+            </button>
+            <button
+              class={`${style.button} ${altBackground ? style.active : ''}`}
+              onClick={this.toggleBackground}
+              title="Change canvas color"
+            >
+              {altBackground
+                ? <ToggleBackgroundActiveIcon />
+                : <ToggleBackgroundIcon />
+              }
+            </button>
+          </div>
         </div>
       </div>
     );
diff --git a/src/components/Output/style.scss b/src/components/Output/style.scss
index e8e780da..01ae940b 100644
--- a/src/components/Output/style.scss
+++ b/src/components/Output/style.scss
@@ -62,6 +62,7 @@
     left: 320px;
     right: 320px;
     bottom: 0;
+    flex-wrap: wrap-reverse;
   }
 }
 
@@ -152,3 +153,12 @@
   left: 0;
   padding: 9px;
 }
+
+.buttons-no-wrap {
+  display: flex;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}