Improve the way osd elements render, in particular - stop the labels + variant pickers wrapping under the 3 checkboxes and looking messy

Author: benlumley

src/css/tabs/osd.css

@@ -423,6 +423,24 @@ button {
   width: 100%;
 }
 
+.tab-osd .switchable-field-flex {
+    display: flex;
+}
+
+.tab-osd .switchable-field-flex .switchable-field-description {
+    display: flex;
+    flex-direction: column;
+    /*
+     min width here is counterintuitive/seems to do nothing. but important, stops the variant selects overflowing
+     see https: //stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container
+    */
+    min-width: 0;
+}
+
+.tab-osd .switchable-field-flex .switchable-field-description .osd-variant {
+    margin-top: 5px;
+}
+
 .spacer_box_title span {
   font-size: 11px;
   font-weight: normal;
@@ -455,7 +473,7 @@ button {
 
 .tab-osd .preview {
   width: 360px;
-  float: left; 
+  float: left;
   position: sticky;
   top: 0;
   margin-left: calc((100% - 360px) / 3);

src/js/tabs/osd.js

@@ -2877,7 +2877,7 @@ TABS.osd.initialize = function(callback) {
                             enabledCount++;
                         }
 
-                        const $field = $(`<div class="switchable-field field-${field.index}"></div>`);
+                        const $field = $(`<div class="switchable-field switchable-field-flex field-${field.index}"></div>`);
                         let desc = null;
                         if (field.desc && field.desc.length) {
                             desc = i18n.getMessage(field.desc);
@@ -2917,7 +2917,9 @@ TABS.osd.initialize = function(callback) {
                         }
 
                         const finalFieldName = titleizeField(field);
-                        $field.append(`<label for="${field.name}" class="char-label">${finalFieldName}</label>`);
+                        const $labelAndVariant = $('<div class="switchable-field-description"></div>');
+                        $labelAndVariant.append(`<label for="${field.name}" class="char-label">${finalFieldName}</label>`);
+
 
 
                         if (semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_44) && field.variants && field.variants.length > 0) {
@@ -2941,7 +2943,7 @@ TABS.osd.initialize = function(callback) {
 
                             selectVariant.val(field.variant);
 
-                            $field.append(selectVariant);
+                            $labelAndVariant.append(selectVariant);
                         }
 
                         if (field.positionable && field.isVisible[OSD.getCurrentPreviewProfile()]) {
@@ -2961,6 +2963,7 @@ TABS.osd.initialize = function(callback) {
                             );
                         }
 
+                        $field.append($labelAndVariant);
                         // Insert in alphabetical order, with unknown fields at the end
                         $field.name = field.name;
                         insertOrdered($displayFields, $field);