From b68565205dc326813d3ecae559d789329f770d72 Mon Sep 17 00:00:00 2001
From: Darren Lines <darren@darrenlines.uk>
Date: Thu, 10 Mar 2022 21:53:07 +0000
Subject: [PATCH] Improved alignment of inputs and labels, especially when the
 configurator is narrow.

---
 main.css                         |  7 +++++--
 src/css/tabs/advanced_tuning.css |  7 +++++++
 src/css/tabs/configuration.css   | 35 ++++++++++++++++++++++++++------
 src/css/tabs/gps.css             |  4 ++++
 src/css/tabs/motors.css          | 10 ++++++++-
 src/css/tabs/osd.css             | 17 ++++++++++++++--
 tabs/osd.html                    | 11 +++++-----
 7 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/main.css b/main.css
index ccd1f97a..48e12e37 100644
--- a/main.css
+++ b/main.css
@@ -37,10 +37,14 @@ a.disabled {
 }
 
 /* Help-Icon  */
+.gui_box_titlebar .helpicon {
+    margin-right: 10px;
+    margin-top: 5px !important;
+}
+
 .helpicon {
     float: right;
     margin-top: 7px;
-    margin-right: 7px;
     display: block;
     height: 14px;
     width: 14px;
@@ -1950,7 +1954,6 @@ dialog {
     .helpicon {
         float: right;
         margin-top: 5px;
-        margin-right: 7px;
         height: 14px;
         width: 14px;
         transition: none;
diff --git a/src/css/tabs/advanced_tuning.css b/src/css/tabs/advanced_tuning.css
index e69de29b..395617aa 100644
--- a/src/css/tabs/advanced_tuning.css
+++ b/src/css/tabs/advanced_tuning.css
@@ -0,0 +1,7 @@
+.tab-advanced-tuning .config-section select, .tab-advanced-tuning .spacer_box div input {
+    margin-right: 0 !important;
+}
+
+.tab-advanced-tuning .config-section .checkbox .switchery {
+    margin-right: 63px !important;
+}
\ No newline at end of file
diff --git a/src/css/tabs/configuration.css b/src/css/tabs/configuration.css
index 57e58712..7f86aa31 100644
--- a/src/css/tabs/configuration.css
+++ b/src/css/tabs/configuration.css
@@ -40,7 +40,7 @@
 
 .config-section .string input,
 .tab-configuration .string input {
-    width: 130px;
+    width: 106px;
 }
 
 .tab-configuration .disabled {
@@ -49,7 +49,7 @@
 
 .config-section input,
 .tab-configuration input {
-    float: left;
+    /*float: left;*/
 }
 
 .config-section .spacer_box,
@@ -185,6 +185,12 @@ hr {
     width: 110px;
 }
 
+.tab-configuration #magalign {
+    width: 111px;
+    height: 22px;
+    margin-right: 4px;
+}
+
 @media only screen and (max-width: 1055px) , only screen and (max-device-width: 1055px) {
     .tab-configuration .gui_box span {
         line-height: 17px;
@@ -211,7 +217,12 @@ hr {
 .config-section .radio,
 .config-section .number {
     position: relative;
-    height: 22px;
+    min-height: 22px;
+}
+
+.config-section .select select,
+.config-section .number input {
+    vertical-align: top;
 }
 
 .config-section .checkbox label,
@@ -220,8 +231,8 @@ hr {
 }
 
 .config-section label {
-    position: absolute;
-    left: 108px;
+    display: inline-block;
+    width: calc(100% - 162px);
 }
 
 .config-section .radio label {
@@ -243,9 +254,21 @@ hr {
 }
 
 .config-section select {
-    width: 110px;
+    width: 111px;
+    height: 22px;
+    margin-right: 4px;
 }
 
 .config-section .helpicon {
     margin-top: 3px;
 }
+
+.config-section .unit_wrapper {
+    vertical-align: top;
+}
+
+.config-section .checkbox .switchery {
+    margin-right: 72px;
+    vertical-align: top;
+    margin-top: 3px;
+}
\ No newline at end of file
diff --git a/src/css/tabs/gps.css b/src/css/tabs/gps.css
index 0ae45759..ad1c9a93 100644
--- a/src/css/tabs/gps.css
+++ b/src/css/tabs/gps.css
@@ -113,6 +113,10 @@
     border-top-right-radius: 0;
 }
 
+.tab-gps .config-section .checkbox .switchery {
+    margin-right: 68px;
+}
+
 #gps-map {
     height: 400px;
     width: 100%;
diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css
index b00b9f05..11048ab4 100644
--- a/src/css/tabs/motors.css
+++ b/src/css/tabs/motors.css
@@ -455,4 +455,12 @@
 
 .tab-servos .short {
     width: 32px;
-} 
\ No newline at end of file
+} 
+
+.tab-motors .config-section .checkbox .switchery {
+    margin-right: 68px;
+}
+
+.tab-motors .config-section .number input {
+    margin-right: 4px;
+}
\ No newline at end of file
diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css
index ff80f79a..0f881fe7 100644
--- a/src/css/tabs/osd.css
+++ b/src/css/tabs/osd.css
@@ -489,11 +489,11 @@ button {
 }
 
 .tab-osd .settings select {
-    width: 75px;
+    width: 80px;
 }
 
 .tab-osd .settings .switchery {
-    margin-right: 25px;
+    margin-right: 33px;
 }
 
 .tab-osd .settings .djiCraftNameElements {
@@ -529,4 +529,17 @@ button {
     float: right;
     width: auto !important;
     margin-right: 0 !important;
+}
+
+.tab-osd label > .i18n-replaced {
+    display: inline-block;
+    left: 108px;
+    width: calc(100% - 110px);
+}
+
+.tab-osd .settings select,
+.tab-osd .settings input, 
+.tab-osd .osd_settings .switchery,
+.tab-osd .unit_wrapper {
+    vertical-align: top;
 }
\ No newline at end of file
diff --git a/tabs/osd.html b/tabs/osd.html
index 717855af..28f133bc 100644
--- a/tabs/osd.html
+++ b/tabs/osd.html
@@ -38,7 +38,7 @@
                     </div>
                 </div>
             </div>
-            <div class="cf_column third_right">
+            <div class="cf_column third_right osd_settings">
                 <div class="gui_box grey">
                     <div class="gui_box_titlebar">
                         <div class="spacer_box_title" data-i18n="osd_video_format"></div>
@@ -221,11 +221,10 @@
                             <select data-setting="dji_message_speed_source" data-live="true"></select> 
                             <span data-i18n="osd_dji_speed_source"></span>
                         </label>
-                        <div class="djiCraftNameElements">
-                            <input type="checkbox" id="useCraftnameForMessages" data-setting="dji_use_name_for_messages" data-live="true" class="toggle"/>
-                            <span data-i18n="osd_dji_use_craft_name_elements"></span> 
-
-                        </div>
+                        <label class="djiCraftNameElements">
+                                <input type="checkbox" id="useCraftnameForMessages" data-setting="dji_use_name_for_messages" data-live="true" class="toggle"/>
+                                <span data-i18n="osd_dji_use_craft_name_elements"></span>
+                        </label>
                         <label>
                             <input type="checkbox" id="djiAdjustments" data-setting="dji_use_adjustments" data-live="true" class="toggle"></select>
                             <span data-i18n="osd_dji_adjustments"></span>