From b922a6a1a1d02fa2fa4362c3dd607b376c524cbd Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Wed, 1 Jan 2025 22:10:13 +0100
Subject: [PATCH] [web] Align items in volume menu

---
 web-src/src/components/ControlMainVolume.vue   | 2 +-
 web-src/src/components/ControlOutputVolume.vue | 2 +-
 web-src/src/components/ControlStreamVolume.vue | 9 +++------
 web-src/src/components/NavbarBottom.vue        | 8 +-------
 4 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/web-src/src/components/ControlMainVolume.vue b/web-src/src/components/ControlMainVolume.vue
index 7d0c4c60..b70d171c 100644
--- a/web-src/src/components/ControlMainVolume.vue
+++ b/web-src/src/components/ControlMainVolume.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media is-align-items-center pt-0">
+  <div class="media is-align-items-center mb-0">
     <div class="media-left">
       <a class="button is-small" @click="toggle">
         <mdicon class="icon" :name="icon" />
diff --git a/web-src/src/components/ControlOutputVolume.vue b/web-src/src/components/ControlOutputVolume.vue
index 7886043b..6c528ea6 100644
--- a/web-src/src/components/ControlOutputVolume.vue
+++ b/web-src/src/components/ControlOutputVolume.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media is-align-items-center pt-0">
+  <div class="media is-align-items-center mb-0">
     <div class="media-left">
       <a
         class="button is-small"
diff --git a/web-src/src/components/ControlStreamVolume.vue b/web-src/src/components/ControlStreamVolume.vue
index a754630b..e6a40a89 100644
--- a/web-src/src/components/ControlStreamVolume.vue
+++ b/web-src/src/components/ControlStreamVolume.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="media is-align-items-center pt-0">
+  <div class="media is-align-items-center mb-0">
     <div class="media-left">
       <a
         class="button is-small"
@@ -12,11 +12,8 @@
         <mdicon class="icon" name="broadcast" />
       </a>
     </div>
-    <div class="media-content">
-      <div
-        class="is-flex is-align-content-center"
-        :class="{ 'has-text-grey-light': !playing }"
-      >
+    <div class="media-content is-align-items-center">
+      <div class="is-flex" :class="{ 'has-text-grey-light': !playing }">
         <div class="is-size-7 is-uppercase" v-text="$t('navigation.stream')" />
         <a href="stream.mp3" class="ml-2" target="_blank">
           <mdicon class="icon is-small" name="open-in-new" />
diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index fe4ecefa..b915961d 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -47,19 +47,13 @@
       >
         <div class="dropdown-menu">
           <div class="dropdown-content">
-            <div class="dropdown-item">
+            <div class="dropdown-item pt-0">
               <control-main-volume />
-            </div>
-            <hr class="dropdown-divider" />
-            <div class="dropdown-item">
               <control-output-volume
                 v-for="output in outputsStore.outputs"
                 :key="output.id"
                 :output="output"
               />
-            </div>
-            <hr class="dropdown-divider" />
-            <div class="dropdown-item">
               <control-stream-volume />
             </div>
             <hr class="dropdown-divider" />