From eff8d52014540b085eb84257fb4e178fe98b43af Mon Sep 17 00:00:00 2001
From: Rene <Rene@ssssss.com>
Date: Mon, 25 Mar 2024 20:30:02 +0100
Subject: [PATCH] better alignment inverter, issue 360

---
 webapp/src/views/HomeView.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 0bd013335..f05c42974 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -5,14 +5,20 @@
         <div class="row gy-3">
             <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-                    <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
+                    <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break" 
                         :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
                         :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
                         aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
-                        <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
-                        <BIconExclamationCircleFill class="fs-4" v-if="inverter.reachable && !inverter.producing" />
-                        <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
-                        {{ inverter.name }}
+                        <div class="row">
+                            <div class="col-auto col-sm-2">
+                                <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
+                                <BIconExclamationCircleFill class="fs-4" v-if="inverter.reachable && !inverter.producing" />
+                                <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
+                            </div>
+                            <div class="col-sm-9">
+                                {{ inverter.name }}
+                            </div>
+                        </div>
                     </button>
                 </div>
             </div>