WS: improve mixer demo layout

share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/button.css

@@ -34,6 +34,7 @@
     text-decoration: none;
     box-sizing: border-box;
     transition: border 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
+    min-height: 37px;
 }
 /*.toolkit-button:hover {
     border: 1px solid #002f42;

share/web_surfaces/builtin/mixer/ardour-toolkit-theme/css/dialog.css

@@ -8,3 +8,21 @@
     -moz-box-shadow:    0px 2px 9px 0px rgba(0, 0, 0, 0.75);
     box-shadow:         0px 2px 9px 0px rgba(0, 0, 0, 0.75);
 }
+
+/* disable show/hide animations */
+
+.toolkit-dialog {
+    -webkit-animation: none;
+    -moz-animation: none;
+    -ms-animation: none;
+    -o-animation: none;
+    animation: none;
+}
+
+.toolkit-dialog.toolkit-hiding {
+    -webkit-transition: none;
+    -moz-transition: none;
+    -ms-transition: none;
+    -o-transition: none;
+    transition: none;
+}

share/web_surfaces/builtin/mixer/js/main.js

@@ -34,6 +34,10 @@ import { createRootContainer, Container, Dialog, Label, Button, DiscreteKnob,
                 root.removeChild(root.children[0]);
             }
 
+            const top = new Container();
+            top.id = 'top';
+            top.appendTo(root);
+
             const mixer = new Container();
             mixer.id = 'mixer';
             mixer.appendTo(root);

share/web_surfaces/builtin/mixer/main.css

@@ -20,8 +20,10 @@ div {
 
 #root {
     display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
+    /* keep these for dialogs */
     align-items: center;
     justify-content: center;
 }
@@ -43,12 +45,16 @@ div {
     background-image: url('expand.svg');
 }
 
+#top {
+    height: 10vh;
+}
+
 #mixer {
     display: flex;
     flex-direction: row;
     height: 100%;
-    max-height: 600px;
     width: 100%;
+    padding-bottom: 10vh;
     overflow-x: auto;
     justify-content: space-between;
 }
@@ -58,11 +64,13 @@ div {
     flex-direction: column;
     align-items: center;
     min-width: 200px;
+    max-height: 768px;
 }
 
 .strip-meter-fader {
     display: flex;
     flex: 1;
+    min-height: 300px;
 }
 
 .strip-label {