From 8174fb117634e3579d27f1996f53dda9115abfbf Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 23:08:58 +0200
Subject: [PATCH] webapp: MQTT: use v-if in favor of v-show

if we hide elements (which is done using style="display:none;"), they
are still part of the DOM and mess with CSS rules that shall apply to
the last element of a card or the last row of a table.
---
 webapp/src/views/MqttAdminView.vue | 18 +++++++++---------
 webapp/src/views/MqttInfoView.vue  |  4 ++--
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
index 0420a1fc..daa9fb4b 100644
--- a/webapp/src/views/MqttAdminView.vue
+++ b/webapp/src/views/MqttAdminView.vue
@@ -14,7 +14,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.VerboseLogging')"
                     v-model="mqttConfigList.mqtt_verbose_logging"
                     type="checkbox"
@@ -22,7 +22,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.EnableHass')"
                     v-model="mqttConfigList.mqtt_hass_enabled"
                     type="checkbox"
@@ -34,7 +34,7 @@
                 :text="$t('mqttadmin.MqttBrokerParameter')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.Hostname')"
@@ -107,7 +107,7 @@
                 <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.RootCa')"
                     v-model="mqttConfigList.mqtt_root_ca_cert"
                     type="textarea"
@@ -116,14 +116,14 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.TlsCertLoginEnable')"
                     v-model="mqttConfigList.mqtt_tls_cert_login"
                     type="checkbox"
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientCert')"
                     v-model="mqttConfigList.mqtt_client_cert"
                     type="textarea"
@@ -132,7 +132,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientKey')"
                     v-model="mqttConfigList.mqtt_client_key"
                     type="textarea"
@@ -145,7 +145,7 @@
                 :text="$t('mqttadmin.LwtParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.LwtTopic')"
@@ -190,7 +190,7 @@
                 :text="$t('mqttadmin.HassParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
+                v-if="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.HassPrefixTopic')"
diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
index e55659f5..1ffb67f5 100644
--- a/webapp/src/views/MqttInfoView.vue
+++ b/webapp/src/views/MqttInfoView.vue
@@ -89,7 +89,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls">
+                        <tr v-if="mqttDataList.mqtt_tls">
                             <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
                         </tr>
@@ -103,7 +103,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls_cert_login">
+                        <tr v-if="mqttDataList.mqtt_tls_cert_login">
                             <th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_client_cert_info }}</td>
                         </tr>