From 994a543b87c7d2ea2292ea104e9819c8856fb285 Mon Sep 17 00:00:00 2001
From: fischaxe <axel@mnet-online.de>
Date: Mon, 10 Apr 2023 10:45:24 +0200
Subject: [PATCH] webapp: added css table-responsive for lower resolutions

---
 webapp/src/components/InverterChannelInfo.vue | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/webapp/src/components/InverterChannelInfo.vue b/webapp/src/components/InverterChannelInfo.vue
index d169f5a2..c41829ad 100644
--- a/webapp/src/components/InverterChannelInfo.vue
+++ b/webapp/src/components/InverterChannelInfo.vue
@@ -17,29 +17,31 @@
         </div>
 
         <div class="card-body">
-            <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>
-                <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">
-                                {{ $n(property.v, 'decimal', {
-                                      minimumFractionDigits: property.d,
-                                      maximumFractionDigits: property.d})
-                                }}
-                            </td>
-                            <td>{{ property.u }}</td>
-                        </template>
-                    </tr>
-                </tbody>
-            </table>
+            <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>
+                    <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">
+                                    {{ $n(property.v, 'decimal', {
+                                        minimumFractionDigits: property.d,
+                                        maximumFractionDigits: property.d})
+                                    }}
+                                </td>
+                                <td>{{ property.u }}</td>
+                            </template>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </template>