Improve profile parameters layout: button always visible, smaller font

- Flexbox layout with scrolling inner content instead of whole tab
- same smaller font size like in layers tab, small input fields

css/style.css

@@ -192,7 +192,7 @@ input#trackname:focus:invalid {
 }
 
 /* Override Bootstrap tabs that set `display` from `none` to `block` when activating */
-.tab-content > #profile_editor.active {
+#profileEditorTabsContent.tab-content > .active {
     display: flex;
 }
 
@@ -430,6 +430,7 @@ table.dataTable.display tbody tr.even:hover {
  * leaflet-sidebar-v2
  */
 
+.leaflet-sidebar-pane#tab_profile,
 .leaflet-sidebar-pane#tab_data,
 .leaflet-sidebar-pane#tab_itinerary {
     /* Full height for content with inner scrolling,
@@ -437,12 +438,17 @@ table.dataTable.display tbody tr.even:hover {
     height: 100%;
 }
 
-.leaflet-sidebar-pane#tab_profile {
-    min-height: 100%;
+#profile_params,
+.CodeMirror {
+    /* auto instead of 1 to avoid overflow to content height in Firefox */
+    flex: auto;
+    /* override default 300px, behaves like min-height with flex auto */
+    height: 0;
 }
 
-#profile_params_container .form-group {
-    margin-bottom: 5px;
+#profile_params {
+    overflow-y: scroll;
+    padding-right: 5px;
 }
 
 .leaflet-sidebar-pane#tab_profile label {
@@ -467,7 +473,8 @@ table.dataTable.display tbody tr.even:hover {
 }
 
 /* layers control as sidebar tab */
-#tab_layers_control {
+#tab_layers_control,
+#profile_params {
     font-size: 0.9rem;
     line-height: normal;
 }
@@ -517,11 +524,6 @@ table.dataTable.display tbody tr.even:hover {
  */
 
 .CodeMirror {
-    /* auto instead of 1 to avoid overflow to content height in Firefox */
-    flex: auto;
-    /* override default 300px, behaves like min-height with flex auto */
-    height: 0;
-
     border: 1px solid #ddd;
 
     font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

index.html

@@ -682,7 +682,7 @@
                                 <div class="tab-content flexcolumn flexgrow" id="profileEditorTabsContent">
                                     <div
                                         id="profile_params_container"
-                                        class="tab-pane show active"
+                                        class="flexcolumn flexgrow tab-pane show active"
                                         role="tabpanel"
                                         aria-labelledby="params-tab"
                                     >

js/control/Profile.js

@@ -217,7 +217,7 @@ BR.Profile = L.Evented.extend({
             if (paramType == 'select') {
                 var select = document.createElement('select');
                 select.name = paramName;
-                select.className = 'form-control';
+                select.className = 'form-control form-control-sm';
                 label.htmlFor = select.id = 'customize-profile-' + paramName;
 
                 var paramValues = params[param].possible_values;
@@ -238,7 +238,7 @@ BR.Profile = L.Evented.extend({
                 if (paramType == 'number') {
                     input.type = 'number';
                     input.value = params[param].value;
-                    input.className = 'form-control';
+                    input.className = 'form-control form-control-sm';
 
                     label.append(paramName);
                     div.appendChild(label);