Get the menu to be properly sticky

src/Dissolve.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="app-area">
     <Menu />
-    <div v-if="started" id="soundscapes">
+    <div id="first-input" v-if="needsInput">
+      <button class="soundscapes" v-on:click="resumeContext">Start</button>
+    </div>
+    <div v-if="!needsInput" class="soundscapes">
       <SoundscapeComp
         v-for="(soundscape, index) in soundscapes"
         :key="index"
@@ -29,6 +32,7 @@ export default class Dissolve extends Vue {
   context!: AudioContext;
   started = false;
   soundscapes: Array<Soundscape> = [];
+  needsInput = false;
 
   newSoundscape(): void {
     this.addSoundscape(new Soundscape());
@@ -46,11 +50,14 @@ export default class Dissolve extends Vue {
       this.addSoundscape(scape);
     });
     this.started = true;
-    document.addEventListener("touchstart", this.resumeContext);
+    if (this.context.state == "suspended") {
+      this.needsInput = true;
+    }
   }
 
   resumeContext(): void {
     this.context.resume();
+    this.needsInput = false;
   }
 
   clear(): void {
@@ -90,7 +97,7 @@ body {
 }
 
 #app {
-  font-family: "Coda", cursive;
+  font-family: "Coda";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
@@ -103,16 +110,19 @@ body {
 #app-area {
   display: flex;
   flex-direction: row;
-  height: 100%;
-  width: 100%;
+  height: max-content;
+  width: 100vw;
 }
 
 #menu {
+  top: 0px;
+  position: sticky;
   flex: 1 0;
+  height: 100%;
 }
 
-#soundscapes {
-  flex: 5 0;
+.soundscapes {
+  flex: 4 0;
   display: flex;
   flex-direction: column;
 }
@@ -120,6 +130,22 @@ body {
 .start-button {
   font-size: 60pt;
 }
+
+#first-input {
+  z-index: 10;
+  text-align: center;
+  vertical-align: middle;
+}
+
+#first-input > button {
+  display: inline-block;
+  height: 100vh;
+  background-color: #444;
+  color: #ddd;
+  font-size: 48pt;
+  height: 60pt;
+  width: 100%;
+}
 </style>
 
 <style src="@vueform/slider/themes/default.css"></style>

src/components/Menu.vue

@@ -46,18 +46,13 @@ export default class Menu extends Vue {
   justify-content: flex-start;
 }
 
-#menu-contents {
-  position: fixed;
-  top: 0;
-}
-
 .list-label {
   font-size: 36pt;
 }
 
 .list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  grid-template-columns: 1fr;
   grid-auto-rows: minmax(max-content, 1fr);
   background: #777;
 }

src/components/SoundscapeComp.vue

@@ -119,7 +119,7 @@ export default class SoundscapeComp extends Vue {
 
 .soundscape-section {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-auto-rows: max-content;
   grid-gap: 20px;
   margin-top: 10px;