From f1c095e41db6c0b653e40c579fc3af2c2b793f22 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.
---
 webapp/src/views/DeviceAdminView.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 3901de7c..c701cfe9 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/webapp/src/views/DeviceAdminView.vue
@@ -78,18 +78,17 @@
                                 </div>
                             </div>
 
-                            <div class="row mb-3">
+                            <div class="row mb-3" v-if="docLinks.length">
                                 <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"
+                                <div class="col-sm-10 d-flex gap-3">
+                                    <a
+                                        v-for="(doc, index) in docLinks"
                                         :key="index"
+                                        :href="doc.url"
+                                        class="btn btn-primary"
+                                        target="_blank"
+                                        >{{ doc.name }}</a
                                     >
-                                        <a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
-                                    </div>
                                 </div>
                             </div>
 
@@ -315,6 +314,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: {
         getLanguageList() {
             this.languageLoading = true;