From 8c46521d6e64dce3b3cb51474a1358f1a37bdca9 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 26 Oct 2024 22:16:20 +0200
Subject: [PATCH] webapp: do not use div with v-if but template elements

when using v-if on a div element, the div will be part of the DOM in
case the condition is true. if we group elements to use v-if on the
group, we shall use a template element, so the group elements appear
as siblings of the other elements.

in particular, these spurious div do not mess up our CSS patch that sets
the bottom margin for the last child in a card to "auto".
---
 webapp/src/views/NetworkAdminView.vue      |  4 ++--
 webapp/src/views/PowerLimiterAdminView.vue | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 058dfe32..43a63665 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -89,7 +89,7 @@
                     type="checkbox"
                 />
 
-                <div v-if="networkConfigList.syslogenabled">
+                <template v-if="networkConfigList.syslogenabled">
                     <InputElement
                         :label="$t('networkadmin.SyslogHostname')"
                         v-model="networkConfigList.sysloghostname"
@@ -104,7 +104,7 @@
                         min="1"
                         max="65535"
                     />
-                </div>
+                </template>
             </CardElement>
 
             <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>
diff --git a/webapp/src/views/PowerLimiterAdminView.vue b/webapp/src/views/PowerLimiterAdminView.vue
index 05b7bdd9..639641a4 100644
--- a/webapp/src/views/PowerLimiterAdminView.vue
+++ b/webapp/src/views/PowerLimiterAdminView.vue
@@ -228,7 +228,7 @@
                     wide
                 />
 
-                <div v-if="powerLimiterConfigList.solar_passthrough_enabled">
+                <template v-if="powerLimiterConfigList.solar_passthrough_enabled">
                     <InputElement
                         :label="$t('powerlimiteradmin.SolarPassthroughLosses')"
                         v-model="powerLimiterConfigList.solar_passthrough_losses"
@@ -245,7 +245,7 @@
                         role="alert"
                         v-html="$t('powerlimiteradmin.SolarPassthroughLossesInfo')"
                     ></div>
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
@@ -261,7 +261,7 @@
                     wide
                 />
 
-                <div v-if="!powerLimiterConfigList.ignore_soc">
+                <template v-if="!powerLimiterConfigList.ignore_soc">
                     <div
                         class="alert alert-secondary"
                         role="alert"
@@ -302,7 +302,7 @@
                         type="number"
                         wide
                     />
-                </div>
+                </template>
             </CardElement>
 
             <CardElement
@@ -335,7 +335,7 @@
                     wide
                 />
 
-                <div v-if="isSolarPassthroughEnabled()">
+                <template v-if="isSolarPassthroughEnabled()">
                     <InputElement
                         :label="$t('powerlimiteradmin.FullSolarPassthroughStartThreshold')"
                         :tooltip="$t('powerlimiteradmin.FullSolarPassthroughStartThresholdHint')"
@@ -360,7 +360,7 @@
                         step="0.01"
                         wide
                     />
-                </div>
+                </template>
 
                 <InputElement
                     :label="$t('powerlimiteradmin.VoltageLoadCorrectionFactor')"