Display audio menu refactor (#1404)

* Update display and generation of the audio menu

* Wrap menu items in a div to allow for horizontal layout groupings

2 files changed, 8 insertions, 3 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index bd381c6d..607368fc 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -1673,13 +1673,13 @@ button.footer-notification-close-button:active {
 .audio-button-popup-menu[data-show-icons=false] .popup-menu-item-icon {
     display: none;
 }
-.popup-menu-item-icon[data-icon=checkmark] {
+.audio-button-popup-menu .popup-menu-item-icon[data-icon=checkmark] {
     background-color: var(--success-color);
 }
-.popup-menu-item-icon[data-icon=cross] {
+.audio-button-popup-menu .popup-menu-item-icon[data-icon=cross] {
     background-color: var(--danger-color);
 }
-.popup-menu-item[data-source-in-options=false][data-valid=null] {
+.audio-button-popup-menu .popup-menu-item-group[data-source-in-options=false][data-valid=null] .popup-menu-item {
     color: var(--text-color-light1);
 }
 
diff --git a/ext/css/material.css b/ext/css/material.css
index 1177baa1..2c7195cb 100644
--- a/ext/css/material.css
+++ b/ext/css/material.css
@@ -994,3 +994,8 @@ button.popup-menu-item:disabled {
     padding: 0.5em 0.75em;
     font-size: var(--font-size-small);
 }
+.popup-menu-item-group {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+}