webapp: apply card-table class to info view cards

the cards in all information views still used a div.card-body around the
table, which added a margin on all sides of the table. to achieve a
unified look, these cards and tables now look the same as the inverter
channel cards.

webapp/src/components/CardElement.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['card', addSpace ? 'mt-5' : '']">
+    <div :class="['card', table ? 'card-table' : '', addSpace ? 'mt-5' : '']">
         <div :class="['card-header', textVariant]">{{ text }}</div>
         <div :class="['card-body', 'card-text', centerContent ? 'text-center' : '', flexChildren ? 'd-flex' : '']">
             <slot />
@@ -14,6 +14,7 @@ export default defineComponent({
     props: {
         text: String,
         textVariant: String,
+        table: Boolean,
         addSpace: Boolean,
         centerContent: Boolean,
         flexChildren: Boolean,

webapp/src/components/FirmwareInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/HardwareInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/HeapDetails.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('heapdetails.HeapDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/InterfaceApInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary">
+    <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/InterfaceNetworkInfo.vue

@@ -2,6 +2,7 @@
     <CardElement
         :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
         textVariant="text-bg-primary"
+        table
     >
         <div class="table-responsive">
             <table class="table table-hover table-condensed">

webapp/src/components/MemoryInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>

webapp/src/components/PinInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary">
+    <CardElement :text="$t('pininfo.PinOverview')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <thead>

webapp/src/components/RadioInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary">
+    <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/TaskDetails.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary">
+    <CardElement :text="$t('taskdetails.TaskDetails')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/WifiApInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/components/WifiStationInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary">
+    <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary" table>
         <div class="table-responsive">
             <table class="table table-hover table-condensed">
                 <tbody>

webapp/src/views/MqttInfoView.vue

@@ -5,7 +5,7 @@
         :show-reload="true"
         @reload="getMqttInfo"
     >
-        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -112,7 +112,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -165,7 +165,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>

webapp/src/views/NtpInfoView.vue

@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNtpInfo">
-        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>
@@ -21,7 +21,7 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space>
+        <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>

webapp/src/views/VedirectInfoView.vue

@@ -1,6 +1,6 @@
 <template>
     <BasePage :title="$t('vedirectinfo.VedirectInformation')" :isLoading="dataLoading">
-        <CardElement :text="$t('vedirectinfo.ConfigurationSummary')" textVariant="text-bg-primary">
+        <CardElement :text="$t('vedirectinfo.ConfigurationSummary')" textVariant="text-bg-primary" table>
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
                     <tbody>