From 83437b2759c8cbc195c84773a31b684485dd719b Mon Sep 17 00:00:00 2001
From: PhilJaro <122352327+PhilJaro@users.noreply.github.com>
Date: Tue, 22 Oct 2024 18:19:13 +0200
Subject: [PATCH] webapp: Enable horizontal scrolling for battery view on small
 screens (#1324)

Enables horizontal scrolling for the batter views in order to not break the UI on small screens.
---
 webapp/src/components/BatteryView.vue | 76 ++++++++++++++-------------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/webapp/src/components/BatteryView.vue b/webapp/src/components/BatteryView.vue
index 67dd1ba2..d7a9665d 100644
--- a/webapp/src/components/BatteryView.vue
+++ b/webapp/src/components/BatteryView.vue
@@ -48,43 +48,45 @@
                                 <div class="card" :class="{ 'border-info': true }">
                                     <div class="card-header text-bg-info">{{ $t('battery.' + section) }}</div>
                                     <div class="card-body">
-                                        <table class="table table-striped table-hover">
-                                            <thead>
-                                                <tr>
-                                                    <th scope="col">{{ $t('battery.Property') }}</th>
-                                                    <th style="text-align: right" scope="col">
-                                                        {{ $t('battery.Value') }}
-                                                    </th>
-                                                    <th scope="col">{{ $t('battery.Unit') }}</th>
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <tr v-for="(prop, key) in values" v-bind:key="key">
-                                                    <th scope="row">{{ $t('battery.' + key) }}</th>
-                                                    <td style="text-align: right">
-                                                        <template v-if="isStringValue(prop) && prop.translate">
-                                                            {{ $t('battery.' + prop.value) }}
-                                                        </template>
-                                                        <template v-else-if="isStringValue(prop)">
-                                                            {{ prop.value }}
-                                                        </template>
-                                                        <template v-else>
-                                                            {{
-                                                                $n(prop.v, 'decimal', {
-                                                                    minimumFractionDigits: prop.d,
-                                                                    maximumFractionDigits: prop.d,
-                                                                })
-                                                            }}
-                                                        </template>
-                                                    </td>
-                                                    <td>
-                                                        <template v-if="!isStringValue(prop)">
-                                                            {{ prop.u }}
-                                                        </template>
-                                                    </td>
-                                                </tr>
-                                            </tbody>
-                                        </table>
+                                        <div class="table-responsive">
+                                            <table class="table table-striped table-hover">
+                                                <thead>
+                                                    <tr>
+                                                        <th scope="col">{{ $t('battery.Property') }}</th>
+                                                        <th style="text-align: right" scope="col">
+                                                            {{ $t('battery.Value') }}
+                                                        </th>
+                                                        <th scope="col">{{ $t('battery.Unit') }}</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr v-for="(prop, key) in values" v-bind:key="key">
+                                                        <th scope="row">{{ $t('battery.' + key) }}</th>
+                                                        <td style="text-align: right">
+                                                            <template v-if="isStringValue(prop) && prop.translate">
+                                                                {{ $t('battery.' + prop.value) }}
+                                                            </template>
+                                                            <template v-else-if="isStringValue(prop)">
+                                                                {{ prop.value }}
+                                                            </template>
+                                                            <template v-else>
+                                                                {{
+                                                                    $n(prop.v, 'decimal', {
+                                                                        minimumFractionDigits: prop.d,
+                                                                        maximumFractionDigits: prop.d,
+                                                                    })
+                                                                }}
+                                                            </template>
+                                                        </td>
+                                                        <td>
+                                                            <template v-if="!isStringValue(prop)">
+                                                                {{ prop.u }}
+                                                            </template>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
                                     </div>
                                 </div>
                             </div>