From 92060985410b37710f74380e9fa67f47a0349a65 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sun, 27 Oct 2024 19:57:25 +0100
Subject: [PATCH] webapp: optimize placement of device profile doc buttons

* remove empty container for device profile links. if a device profile
  has no links, no buttons are generated, but a row was still part of
  the DOM, adding spurious space between the select and the alert with
  the hint.
* "float" the buttons to the right, as we always place these kinds of
  buttons to the right.
---
 webapp/src/views/DeviceAdminView.vue | 28 +++++++++++++++-------------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 258ec5b2..1bcb8bff 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -78,19 +78,15 @@
                                 </div>
                             </div>
 
-                            <div class="row mb-3">
-                                <div class="col-sm-2"></div>
-                                <div class="col-sm-10">
-                                    <div
-                                        class="btn-group mb-2 me-2"
-                                        v-for="(doc, index) in pinMappingList.find(
-                                            (i) => i.name === deviceConfigList.curPin.name
-                                        )?.links"
-                                        :key="index"
-                                    >
-                                        <a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
-                                    </div>
-                                </div>
+                            <div class="mb-3 d-flex justify-content-end gap-3" v-if="docLinks.length">
+                                <a
+                                    v-for="(doc, index) in docLinks"
+                                    :key="index"
+                                    :href="doc.url"
+                                    class="btn btn-primary"
+                                    target="_blank"
+                                    >{{ doc.name }}</a
+                                >
                             </div>
 
                             <div
@@ -313,6 +309,12 @@ export default defineComponent({
             this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness));
         },
     },
+    computed: {
+        docLinks() {
+            const mapping = this.pinMappingList.find((i) => i.name === this.deviceConfigList.curPin.name);
+            return mapping?.links || [];
+        },
+    },
     methods: {
         getPinMappingList() {
             this.pinMappingLoading = true;