From e8d7b48bff67e3403ea9ca79214f37831553d2e9 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 8 May 2018 17:23:28 +0100
Subject: [PATCH] Fix up sizing of mqtt message inputs

---
 nodes/core/io/10-mqtt.html | 55 ++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 29 deletions(-)

diff --git a/nodes/core/io/10-mqtt.html b/nodes/core/io/10-mqtt.html
index 440a3c764..722a7a7ae 100644
--- a/nodes/core/io/10-mqtt.html
+++ b/nodes/core/io/10-mqtt.html
@@ -219,20 +219,19 @@
                 </div>
                 <div class="section-content" style="padding:10px 0 0 10px">
                     <div class="form-row">
-                        <label for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
-                        <input type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic" style="width:300px !important">
-                        &nbsp;&nbsp;
-                        <i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span> <select id="node-config-input-birthRetain" style="float: right; width:75px !important">
+                        <label style="width: 100px !important;" for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
+                        <input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic">
+                        <label style="margin-left: 10px; width: 90px !important;" for="node-config-input-birthRetain"><i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span></label>
+                        <select id="node-config-input-birthRetain" style="width:75px !important">
                             <option value="false" data-i18n="mqtt.false"></option>
                             <option value="true" data-i18n="mqtt.true"></option>
                         </select>
                     </div>
                     <div class="form-row">
-                        <label for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
-                        <input type="text" id="node-config-input-birthPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
-                        &nbsp;&nbsp;
-                        <i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
-                        <select id="node-config-input-birthQos" style="float: right; width:75px !important">
+                        <label style="width: 100px !important;" for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
+                        <input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-birthPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
+                        <label style="margin-left: 10px; width: 90px !important;" for="node-config-input-birthQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
+                        <select id="node-config-input-birthQos" style="width:75px !important">
                             <option value="0">0</option>
                             <option value="1">1</option>
                             <option value="2">2</option>
@@ -246,20 +245,19 @@
                 </div>
                 <div class="section-content" style="padding:10px 0 0 10px">
                     <div class="form-row">
-                        <label for="node-config-input-closeTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
-                        <input type="text" id="node-config-input-closeTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.close-topic">
-                        &nbsp;&nbsp;
-                        <i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span> <select id="node-config-input-closeRetain" style="float:right; width:75px !important">
+                        <label style="width: 100px !important;" for="node-config-input-closeTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
+                        <input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-closeTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.close-topic">
+                        <label style="margin-left: 10px; width: 90px !important;" for="node-config-input-closeRetain"><i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span></label>
+                        <select id="node-config-input-closeRetain" style="width:75px !important">
                             <option value="false" data-i18n="mqtt.false"></option>
                             <option value="true" data-i18n="mqtt.true"></option>
                         </select>
                     </div>
                     <div class="form-row">
-                        <label for="node-config-input-closePayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
-                        <input type="text" id="node-config-input-closePayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
-                        &nbsp;&nbsp;
-                        <i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
-                        <select id="node-config-input-closeQos" style="float:right; width:75px !important">
+                        <label style="width: 100px !important;" for="node-config-input-closePayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
+                        <input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-closePayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
+                        <label style="margin-left: 10px; width: 90px !important;" for="node-config-input-closeQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
+                        <select id="node-config-input-closeQos" style="width:75px !important">
                             <option value="0">0</option>
                             <option value="1">1</option>
                             <option value="2">2</option>
@@ -273,20 +271,19 @@
                 </div>
                 <div class="section-content" style="padding:10px 0 0 10px">
                     <div class="form-row">
-                        <label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
-                        <input type="text" id="node-config-input-willTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.will-topic">
-                        &nbsp;&nbsp;
-                        <i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span> <select id="node-config-input-willRetain" style="float:right; width:75px !important">
+                        <label style="width: 100px !important;" for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
+                        <input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-willTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.will-topic">
+                        <label style="margin-left: 10px; width: 90px !important;" for="node-config-input-willRetain"><i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span></label>
+                        <select id="node-config-input-willRetain" style="width:75px !important">
                             <option value="false" data-i18n="mqtt.false"></option>
                             <option value="true" data-i18n="mqtt.true"></option>
                         </select>
                     </div>
                     <div class="form-row">
-                        <label for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
-                        <input type="text" id="node-config-input-willPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
-                        &nbsp;&nbsp;
-                        <i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
-                        <select id="node-config-input-willQos" style="float:right; width:75px !important">
+                        <label style="width: 100px !important;" for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
+                        <input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-willPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
+                        <label style="margin-left: 10px; width: 90px !important;" for="node-config-input-willQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
+                        <select id="node-config-input-willQos" style="width:75px !important">
                             <option value="0">0</option>
                             <option value="1">1</option>
                             <option value="2">2</option>
@@ -389,7 +386,7 @@
                 id: "mqtt-broker-tab-security",
                 label: this._("mqtt.tabs-label.security")
             });
-            
+
             tabs.addTab({
                 id: "mqtt-broker-tab-messages",
                 label: this._("mqtt.tabs-label.messages")
@@ -412,7 +409,7 @@
                 });
                 toggleSection(isExpanded);
             }
-            
+
             // show first section if none are set so the user gets the idea
             var showBirthSection = this.birthTopic !== ""
                 || this.willTopic === ""