webapp: Reduce wasted horizontal space for better mobile UX

webapp/src/components/InverterChannelInfo.vue

@@ -2,7 +2,7 @@
     <div class="card" :class="{
         'border-info': channelType == 'AC',
         'border-secondary': channelType == 'INV'
-    }">
+    }" style="overflow: hidden">
         <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
             {{ $t('inverterchannelinfo.General') }}
         </div>
@@ -16,24 +16,17 @@
             {{ $t('inverterchannelinfo.Phase', { num: channelNumber + 1 }) }}
         </div>
 
-        <div class="card-body">
         <div class="table-responsive">
-                <table class="table table-striped table-hover">
-                    <thead>
-                        <tr>
-                            <th scope="col">{{ $t('inverterchannelinfo.Property') }}</th>
-                            <th style="text-align: right" scope="col">{{ $t('inverterchannelinfo.Value') }}</th>
-                            <th scope="col">{{ $t('inverterchannelinfo.Unit') }}</th>
-                        </tr>
-                    </thead>
+            <table class="table table-striped table-hover" style="margin: 0">
                 <tbody>
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
                             <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
-                                <td style="text-align: right">
+                            <td style="text-align: right; padding-right: 0;">
                                 {{ $n(property.v, 'decimal', {
                                     minimumFractionDigits: property.d,
-                                        maximumFractionDigits: property.d})
+                                    maximumFractionDigits: property.d
+                                })
                                 }}
                             </td>
                             <td>{{ property.u }}</td>
@@ -43,7 +36,6 @@
             </table>
         </div>
     </div>
-    </div>
 </template>
 
 <script lang="ts">

webapp/src/locales/de.json

@@ -317,10 +317,7 @@
     "inverterchannelinfo": {
         "String": "String {num}",
         "Phase": "Phase {num}",
-        "General": "Allgemein",
-        "Property": "Eigenschaft",
-        "Value": "Wert",
-        "Unit": "Einheit"
+        "General": "Allgemein"
     },
     "invertertotalinfo": {
         "TotalYieldTotal": "Gesamtertrag Insgesamt",

webapp/src/locales/en.json

@@ -317,10 +317,7 @@
     "inverterchannelinfo": {
         "String": "String {num}",
         "Phase": "Phase {num}",
-        "General": "General",
-        "Property": "Property",
-        "Value": "Value",
-        "Unit": "Unit"
+        "General": "General"
     },
     "invertertotalinfo": {
         "TotalYieldTotal": "Total Yield Total",

webapp/src/locales/fr.json

@@ -317,10 +317,7 @@
     "inverterchannelinfo": {
         "String": "Ligne {num}",
         "Phase": "Phase {num}",
-        "General": "General",
-        "Property": "Propriété",
-        "Value": "Valeur",
-        "Unit": "Unité"
+        "General": "General"
     },
     "invertertotalinfo": {
         "TotalYieldTotal": "Rendement total",