feat: improved camera view and sounds view

client/src/App.vue

@@ -6,7 +6,7 @@
       <router-link to="/control">Control</router-link> |
       <router-link to="/sounds">Sounds</router-link>
     </div>
-    <router-view/>
+    <router-view id="view"/>
   </div>
 </template>
 
@@ -33,10 +33,18 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  display: grid;
+  grid-template-rows: 36px auto;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
 }
 
 #nav {
-  padding: 30px;
+  line-height: 36px;
 
   div.nav-item {
     display: inline;
@@ -54,4 +62,8 @@ export default {
     }
   }
 }
+
+#view {
+  overflow-y: scroll;
+}
 </style>

client/src/components/ImageStream.vue

@@ -20,6 +20,9 @@ export default {
 
 <style scoped lang="scss">
 .video-stream {
-  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
 }
 </style>

client/src/views/SoundBoard.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="sounds">
-    <div :key="`sound-${sound.name}`" class="sound" v-for="sound in sounds">
-      <h2 @click="emitSound(sound.name)">{{ sound.name }}</h2>
+  <div>
+    <div id="sound-list">
+      <div :key="`sound-${sound.name}`" class="sound" v-for="sound in sounds">
+        <h2 @click="emitSound(sound.name)">{{ sound.title }}</h2>
+      </div>
     </div>
   </div>
 </template>
@@ -11,8 +13,7 @@ import axios from 'axios';
 
 export default {
   name: 'SoundBoard',
-  components: {
-  },
+  components: {},
   data() {
     return {
       sounds: [],
@@ -32,4 +33,14 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+#sound-list {
+  display: grid;
+  grid-template-columns: 33% 33% 33%;
+}
+
+.sound {
+  background: lightblue;
+  border: 1px solid black;
+}
+</style>