From cb74bc17be725e7993bf789f6289ed47972c11a5 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 12:01:43 +0100
Subject: [PATCH] [web] Fix spacing when no buttons in properties

---
 web-src/src/components/ListProperties.vue      | 11 +----------
 web-src/src/components/ModalDialogPlayable.vue | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/web-src/src/components/ListProperties.vue b/web-src/src/components/ListProperties.vue
index ba26e058..02ef2527 100644
--- a/web-src/src/components/ListProperties.vue
+++ b/web-src/src/components/ListProperties.vue
@@ -10,15 +10,7 @@
     :album="item.name"
     class="is-normal mb-5"
   />
-  <div class="buttons">
-    <a
-      v-for="button in buttons"
-      :key="button.label"
-      v-t="button.label"
-      class="button is-small"
-      @click="button.handler"
-    />
-  </div>
+  <slot v-if="$slots.buttons" name="buttons" />
   <div
     v-for="property in item.properties?.filter((p) => p.value)"
     :key="property.label"
@@ -43,7 +35,6 @@ export default {
   name: 'ListProperties',
   components: { CoverArtwork },
   props: {
-    buttons: { default: () => [], type: Array },
     item: { required: true, type: Object }
   }
 }
diff --git a/web-src/src/components/ModalDialogPlayable.vue b/web-src/src/components/ModalDialogPlayable.vue
index 155a3d4c..32a1e577 100644
--- a/web-src/src/components/ModalDialogPlayable.vue
+++ b/web-src/src/components/ModalDialogPlayable.vue
@@ -1,7 +1,19 @@
 <template>
   <modal-dialog :actions="actions" :show="show" @close="$emit('close')">
     <template #content>
-      <list-properties :buttons="buttons" :item="item" />
+      <list-properties :item="item">
+        <template #buttons>
+          <div class="buttons">
+            <a
+              v-for="button in buttons"
+              :key="button.label"
+              v-t="button.label"
+              class="button is-small"
+              @click="button.handler"
+            />
+          </div>
+        </template>
+      </list-properties>
     </template>
   </modal-dialog>
 </template>
@@ -15,7 +27,7 @@ export default {
   name: 'ModalDialogPlayable',
   components: { ListProperties, ModalDialog },
   props: {
-    buttons: { default: () => [], type: Array },
+    buttons: { default: null, type: Array },
     item: { required: true, type: Object },
     show: Boolean
   },