add sort by tempo

src/assets/main.css

@@ -1,8 +1,23 @@
 @import './base.css';
 
 html,
-body {
+body,
+#app {
   touch-action: manipulation;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  z-index: 1;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: auto;
 }
 
 body,
@@ -29,11 +44,12 @@ button {
 
 button.thinButton {
   width: 56px;
+  background-color: var(--white);
 }
 
 button#start,
 button#stop {
-  width: 128px;
+  width: 140px;
   padding: 24px;
   margin: 16px;
 }
@@ -46,6 +62,12 @@ button#stop {
   background: var(--orange);
 }
 
+#controls {
+  box-shadow: 0 0px 4px var(--shadow);
+  background-color: var(--background);
+  border-bottom: 1px solid var(--light-gray);
+}
+
 #controls,
 #presets {
   display: flex;
@@ -53,6 +75,17 @@ button#stop {
   align-items: center;
 }
 
+#presets {
+  flex-grow: 1;
+}
+
+#presetsMessage {
+  flex-grow: 1;
+  align-content: center;
+  font-weight: lighter;
+  color: var(--gray);
+}
+
 #speedControls {
   display: flex;
 }
@@ -60,6 +93,7 @@ button#stop {
 #bpm {
   font-size: 32pt;
   width: 140px;
+  margin: 0 8px
 }
 
 #presetsControls {
@@ -99,6 +133,7 @@ button#stop {
   margin: 4px;
   padding: 4px;
   text-align: center;
+  background-color: var(--white);
 }
 
 .presetItem.selected {