Pin config buttons to bottom of config menu

Previously the load/save/apply buttons in the config menu were hidden
below all available config options and required the user to scroll to
the bottom to save changes. This made for bad ux, since for new users,
it isn't immediately apparent that selecting a new dropdown value, for
instance, doesn't instantly save the new setting. The new layout should
make it more clear that hitting "Apply" is required to save config
changes.

app/static/css/main.css

@@ -61,6 +61,15 @@ body {
     -webkit-appearance: none;
 }
 
+.config-options {
+    max-height: 370px;
+    overflow-y: scroll;
+}
+
+.config-buttons {
+    max-height: 30px;
+}
+
 .config-div {
     padding: 5px;
 }
@@ -102,7 +111,6 @@ button::-moz-focus-inner {
 }
 
 .open {
-    overflow-y: scroll;
     padding-bottom: 20px;
 }
 

app/templates/index.html

@@ -84,6 +84,7 @@
         <div class="content">
             <div class="config-fields">
                 <form id="config-form" action="config" method="post">
+                    <div class="config-options">
                         <div class="config-div config-div-ctry">
                             <label for="config-ctry">{{ translation['config-country'] }}: </label>
                             <select name="ctry" id="config-ctry">
@@ -222,7 +223,8 @@
                                 {{ config.style.replace('\t', '') }}
                             </textarea>
                         </div>
-                    <div class="config-div">
+                    </div>
+                    <div class="config-div config-buttons">
                         <input type="submit" id="config-load" value="{{ translation['load'] }}">&nbsp;
                         <input type="submit" id="config-submit" value="{{ translation['apply'] }}">&nbsp;
                         <input type="submit" id="config-save" value="{{ translation['save-as'] }}">