From 3dd72f97816f35389f037e43af8858b9a750ef58 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Sun, 22 Oct 2017 00:32:17 +0200
Subject: [PATCH] release: fix minor ui issues for checkbox containers

---
 src/css/style.css                      | 7 ++++++-
 src/templates/settings/export/gif.html | 5 ++++-
 src/templates/settings/export/zip.html | 2 +-
 src/templates/settings/resize.html     | 4 ++--
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 51eae66f..d5a302ff 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -52,7 +52,12 @@ body {
 }
 
 .checkbox-fix {
-  margin-left: 0;
+  margin: 3px 3px 3px 0;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
 }
 
 .hidden {
diff --git a/src/templates/settings/export/gif.html b/src/templates/settings/export/gif.html
index a7ba806a..41eaff37 100644
--- a/src/templates/settings/export/gif.html
+++ b/src/templates/settings/export/gif.html
@@ -11,7 +11,10 @@
     </div>
     <div class="export-panel-section export-panel-row">
       <input id="gif-repeat-checkbox" class="gif-repeat-checkbox checkbox-fix" type="checkbox" />
-      <label for="gif-repeat-checkbox">Loop repeatedly</label>
+      <label for="gif-repeat-checkbox"
+             title="Uncheck to play the animation only one time."
+             rel="tooltip"
+             data-placement="top">Loop repeatedly</label>
     </div>
     <div class="export-panel-section export-panel-row">
       <button type="button" class="button button-primary gif-download-button">Download</button>
diff --git a/src/templates/settings/export/zip.html b/src/templates/settings/export/zip.html
index 1562a8bf..17dbf5fa 100644
--- a/src/templates/settings/export/zip.html
+++ b/src/templates/settings/export/zip.html
@@ -7,7 +7,7 @@
         <input type="text" style="flex: 1;" class="zip-prefix-name textfield"
                autocomplete="off" placeholder="PNG file prefix ...">
       </div>
-      <div style="margin: 5px 0;">
+      <div class="checkbox-container" style="margin: 5px 0;">
         <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
         <label for="zip-split-layers">Split by layers</label>
       </div>
diff --git a/src/templates/settings/resize.html b/src/templates/settings/resize.html
index 536340ae..24784149 100644
--- a/src/templates/settings/resize.html
+++ b/src/templates/settings/resize.html
@@ -17,13 +17,13 @@
           <span>px</span>
         </div>
         <div class="resize-section">
-          <label>
+          <label class="checkbox-container">
             <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
             <span>Maintain aspect ratio</span>
           </label>
         </div>
         <div class="resize-section">
-          <label>
+          <label class="checkbox-container">
             <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
             <span>Resize canvas content</span>
           </label>