1.2.1

* Avoid wrapping a single button

* Making the zoom controls appear on the bottom, when the controls are positioned on the bottom

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "squoosh",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "squoosh",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "apache-2.0",
   "scripts": {
     "start": "webpack-dev-server --host 0.0.0.0 --hot",

src/components/Output/index.tsx

@@ -336,6 +336,7 @@ export default class Output extends Component<Props, State> {
               <AddIcon />
             </button>
           </div>
+          <div class={style.buttonsNoWrap}>
             <button class={style.button} onClick={this.onRotateClick} title="Rotate image">
               <RotateIcon />
             </button>
@@ -351,6 +352,7 @@ export default class Output extends Component<Props, State> {
             </button>
           </div>
         </div>
+      </div>
     );
   }
 }

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;
+  }
+}