Fix styling board and gyro align

Author: McGiverGim

src/css/tabs/configuration.css

@@ -219,6 +219,18 @@
     border-bottom: 1px solid #ddd;
     width: 33.3%;
     float: left;
+    white-space: nowrap;
+}
+
+.tab-configuration .board_align_inputs input {
+    width: 3.5em;
+}
+
+.tab-configuration .board_align_inputs label,
+.tab-configuration .gyro_alignment_inputs label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .tab-configuration .selectProtocol
@@ -374,37 +386,35 @@
 }
 
 .tab-configuration .alignicon {
-    width: 20px;
-    height: 20px;
+    width: 15px;
+    height: 15px;
     float: left;
-    margin-left: -5px;
+    margin-left: -1px;
     margin-right: 3px;
 }
 
 .tab-configuration .pitch {
     background-image: url(../../images/icons/cf_icon_pitch.svg);
     background-repeat: no-repeat;
-    background-size: 20px;
     background-position: center;
 }
 
 .tab-configuration .yaw {
     background-image: url(../../images/icons/cf_icon_yaw.svg);
     background-repeat: no-repeat;
-    background-size: 20px;
     background-position: center;
 }
 
 .tab-configuration .roll {
     background-image: url(../../images/icons/cf_icon_roll.svg);
     background-repeat: no-repeat;
-    background-size: 20px;
     background-position: center;
 }
 
 .tab-configuration .board select {
     float: left;
     width: fit-content;
+    max-width: 50%;
     height: 20px;
     margin-right: 5px;
     border: 1px solid silver;

src/tabs/configuration.html

@@ -274,29 +274,29 @@
                                 <div class="gyro_align_content">
                                     <div class="gyro_alignment_inputs">
                                         <label>
-                                            <span i18n="configurationSensorGyroToUse"></span>
                                             <select class="gyro_to_use">
                                                 <option i18n="configurationSensorGyroToUseDefaultOption" value="0"></option>
                                                 <!-- list generated here -->
                                             </select>
+                                            <span i18n="configurationSensorGyroToUse"></span>
                                         </label>
                                     </div>
                                     <div class="gyro_alignment_inputs">
                                         <label>
-                                            <span i18n="configurationSensorAlignmentGyro1"></span>
                                             <select class="gyro_1_align">
                                                 <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
                                                 <!-- list generated here -->
                                             </select>
+                                            <span i18n="configurationSensorAlignmentGyro1"></span>
                                         </label>
                                     </div>
                                     <div class="gyro_alignment_inputs">
-                                        <label>
-                                            <span i18n="configurationSensorAlignmentGyro2"></span>
+                                        <label>                                            
                                             <select class="gyro_2_align">
                                                 <option i18n="configurationSensorAlignmentDefaultOption" value="0"></option>
                                                 <!-- list generated here -->
                                             </select>
+                                            <span i18n="configurationSensorAlignmentGyro2"></span>
                                         </label>
                                     </div>
                                 </div>