optimized navigation layout

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

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"
+                <div class="form-group row">
-                       placeholder="new username"
+                    <div class="col-sm-8">
-                       type="text" class="form-control mx-sm-3 form-control-lg" onclick="this.select()"/>
 
-
+                        <input id="inputFieldUsername" ng-model="$ctrl.inputFieldUsername"
-                <button ng-click="$ctrl.randomize()" type="button" class="btn btn-outline-primary">open random</button>
+                               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>