From 55720b8182d993fa6609be40ddcea51bdb6d27a1 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Sat, 15 Feb 2025 23:30:34 +0100
Subject: [PATCH] [web] Fix dropdown control being too wide on mobile

---
 web-src/src/components/NavbarBottom.vue |  2 +-
 web-src/src/components/NavbarTop.vue    |  2 +-
 web-src/src/mystyles.scss               | 11 +++++------
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web-src/src/components/NavbarBottom.vue b/web-src/src/components/NavbarBottom.vue
index b915961d..ea9d1e4f 100644
--- a/web-src/src/components/NavbarBottom.vue
+++ b/web-src/src/components/NavbarBottom.vue
@@ -45,7 +45,7 @@
         class="dropdown is-up is-right"
         :class="{ 'is-active': uiStore.show_player_menu }"
       >
-        <div class="dropdown-menu">
+        <div class="dropdown-menu is-mobile">
           <div class="dropdown-content">
             <div class="dropdown-item pt-0">
               <control-main-volume />
diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue
index d056c3a4..f2f55f44 100644
--- a/web-src/src/components/NavbarTop.vue
+++ b/web-src/src/components/NavbarTop.vue
@@ -63,7 +63,7 @@
         class="dropdown is-right"
         :class="{ 'is-active': uiStore.show_burger_menu }"
       >
-        <div class="dropdown-menu">
+        <div class="dropdown-menu is-mobile">
           <div class="dropdown-content">
             <control-link class="dropdown-item" :to="{ name: 'playlists' }">
               <span class="icon-text">
diff --git a/web-src/src/mystyles.scss b/web-src/src/mystyles.scss
index aaae22e5..44f2fae5 100644
--- a/web-src/src/mystyles.scss
+++ b/web-src/src/mystyles.scss
@@ -41,13 +41,12 @@
   position: fixed;
 }
 
-.dropdown-menu {
+.dropdown-menu.is-mobile {
   @include mixins.mobile {
     width: 100vw;
   }
-}
-
-.dropdown-content {
-  max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
-  overflow: auto;
+  .dropdown-content {
+    max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
+    overflow: auto;
+  }
 }