From 3c56ec37382a49233e44179574e163e3cf37572b 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 54075aa..dd2da79 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>