From 0deae2a52e20959645ca014473549cc79e08449e Mon Sep 17 00:00:00 2001
From: Synox <synox@users.noreply.github.com>
Date: Tue, 21 Mar 2017 11:51:24 +0100
Subject: [PATCH] optimized navigation layout

---
 src/client-libs/style.css |  9 +++++++--
 src/index.html            | 19 +++++++++++++------
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/client-libs/style.css b/src/client-libs/style.css
index f951cbd..4f09eff 100644
--- a/src/client-libs/style.css
+++ b/src/client-libs/style.css
@@ -19,9 +19,13 @@ div.min-height {
 
 header {
     background-color: #D9E2E9;
-    /* leave some space on top & bottom */
+    /* leave some space on top  */
     padding-top: 5px;
-    padding-bottom: 5px;
+}
+
+#openRandomButton {
+    /* center vertically */
+    margin-top: 6px;
 }
 
 .sticky-header {
@@ -77,3 +81,4 @@ header {
 div.min-height {
     min-height: 400px;
 }
+
diff --git a/src/index.html b/src/index.html
index 7a2cce9..2a5db22 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,19 +19,26 @@
     <header>
         <div class="container">
 
-            <form class="form-inline" ng-submit="$ctrl.updateUsername($ctrl.inputFieldUsername)">
+            <form ng-submit="$ctrl.updateUsername($ctrl.inputFieldUsername)">
 
                 <small id="emailHelp" class="form-text text-muted">
                     You have <span class="tag tag-pill tag-default">{{$ctrl.mails.length}}</span> mails in your
                     mailbox:
                 </small>
 
-                <input id="inputFieldUsername" ng-model="$ctrl.inputFieldUsername"
-                       placeholder="new username"
-                       type="text" class="form-control mx-sm-3 form-control-lg" onclick="this.select()"/>
+                <div class="form-group row">
+                    <div class="col-sm-8">
 
-
-                <button ng-click="$ctrl.randomize()" type="button" class="btn btn-outline-primary">open random</button>
+                        <input id="inputFieldUsername" ng-model="$ctrl.inputFieldUsername"
+                               placeholder="new username"
+                               type="text" class="form-control form-control-lg" onclick="this.select()"/>
+                    </div>
+                    <div class="col-sm-2">
+                        <button id="openRandomButton" ng-click="$ctrl.randomize()" type="button"
+                                class="btn btn-outline-primary">open random
+                        </button>
+                    </div>
+                </div>
             </form>
         </div>
     </header>