modified stylesheet and index.html for a better looking connection form

css/glowingbear.css

@@ -104,6 +104,20 @@ input[type=text], input[type=password], #sendMessage, .badge {
     color: #ccc;
     box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.8) inset;
     background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.3);
+    margin-bottom: 5px !important;
+}
+.input-group {
+    width: 100%;
+}
+.row {
+    margin: 0px;
+    max-width: 300px;
+}
+.no-gutter [class*="col"] {
+    padding: 0px
+}
+.col-sm-9 {
+    padding-right: 5px !important;
 }
 .glyphicon {
     top: 0; /* Fixes alignment issue in top bar */
@@ -608,4 +622,7 @@ h2 span, h2 small {
         width: 5px;
         height: 5px;
     }
+    .col-sm-9 {
+        padding-right: 0px !important;
+    }
 }

index.html

@@ -60,8 +60,14 @@
                 <div class="form-group">
                   <label class="control-label" for="host">WeeChat relay hostname and port number</label>
                   <div class="input-group">
-                    <input type="text" class="form-control favorite-font" id="host" ng-model="host" placeholder="Address">
-                    <input type="text" class="form-control favorite-font" id="port" ng-model="port" placeholder="Port">
+                    <div class="row no-gutter">
+                      <div class="col-sm-9">
+                        <input type="text" class="form-control favorite-font" id="host" ng-model="host" placeholder="Address" >
+                      </div>
+                      <div class="col-sm-3">
+                        <input type="text" class="form-control favorite-font" id="port" ng-model="port" placeholder="Port">
+                      </div>
+                    </div>
                   </div>
                   <label class="control-label" for="password">WeeChat relay password</label>
                   <input type="password" class="form-control favorite-font" id="password" ng-model="password" placeholder="Password">