webapp: added css table-responsive for lower resolutions

tbnobody · Apr 10, 2023 · 994a543 · 994a543
1 parent 12d7349
commit 994a543
Showing 1 changed file with 25 additions and 23 deletions.
diff --git 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>