From b21e077154b8ff21f55e67337d48512e62600dea Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 3 Nov 2024 20:10:18 +0100
Subject: [PATCH] webapp: fix inverter selection button breaking

on small viewports, the icon and the inverter label would be displayed
in two lines. this change keeps the icon and the label tied together in
any case, and the icon is centered vertically around the label.
---
 webapp/src/views/HomeView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index 54075aa8d..dd2da79da 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -29,8 +29,8 @@
                         aria-controls="'v-pills-' + inverter.serial"
                         aria-selected="true"
                     >
-                        <div class="row">
-                            <div class="col-auto col-sm-2">
+                        <div class="d-flex align-items-center">
+                            <div class="me-2">
                                 <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
                                 <BIconExclamationCircleFill
                                     class="fs-4"
@@ -38,7 +38,7 @@
                                 />
                                 <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
                             </div>
-                            <div class="col-sm-9">
+                            <div class="ms-auto me-auto">
                                 {{ inverter.name }}
                             </div>
                         </div>