Scrolling some and have a fixed header

src/ui/Attendees.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="attendees" v-if="attendees.length > 0">
     <h2>Deltakere ({{ attendees.length }})</h2>
-    <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
+    <div class="attendees-container" ref="attendees">
-      <span class="attendee-name">{{ attendee.name }}</span>
+      <div class="attendee" v-for="(attendee, index) in attendees" :key="index">
-      <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
+        <span class="attendee-name">{{ attendee.name }}</span>
-      <div class="blue-ballot ballot-element small">
+        <div class="red-ballot ballot-element small">{{ attendee.red }}</div>
-        {{ attendee.blue }}
+        <div class="blue-ballot ballot-element small">{{ attendee.blue }}</div>
-      </div>
+        <div class="green-ballot ballot-element small">{{ attendee.green }}</div>
-      <div class="green-ballot ballot-element small">
+        <div class="yellow-ballot ballot-element small">{{ attendee.yellow }}</div>
-        {{ attendee.green }}
-      </div>
-      <div class="yellow-ballot ballot-element small">
-        {{ attendee.yellow }}
       </div>
     </div>
   </div>
@@ -23,6 +19,16 @@ export default {
     attendees: {
       type: Array
     }
+  },
+  watch: {
+    attendees: {
+      deep: true,
+      handler() {
+        setTimeout(() => {
+          this.$refs.attendees.scrollTop = this.$refs.attendees.scrollHeight;
+        }, 50);
+      }
+    }
   }
 };
 </script>
@@ -53,6 +59,11 @@ export default {
   align-items: center;
   width: 65%;
   height: 100%;
+}
+
+.attendees-container {
+  width: 100%;
+  height: 100%;
   overflow-y: scroll;
 }
 

src/ui/Chat.vue

@@ -14,14 +14,9 @@
         </div>
       </div>
       <div class="input">
-        <input
+        <input @keyup.enter="sendMessage" type="text" v-model="message" placeholder="Melding.." />
-          @keyup.enter="sendMessage"
+        <button @click="sendMessage">Send</button>
-          type="text"
+        <button @click="removeUsername">Logg ut</button>
-          v-model="message"
-          placeholder="Melding.."
-        />
-        <button @click="sendMessage">Send</button
-        ><button @click="removeUsername">Logg ut</button>
       </div>
     </div>
     <div v-if="!usernameSet" class="username-dialog">
@@ -88,7 +83,7 @@ export default {
       if (date.getDate() == new Date().getDate()) {
         return timeString;
       }
-      return `${date.toLocaleDateString()} ${timeString}`
+      return `${date.toLocaleDateString()} ${timeString}`;
     },
     sendMessage: function() {
       this.$emit("message", this.message);
@@ -147,7 +142,7 @@ input {
 
 .chat-container,
 .chat-inner-container {
-  height: 100%;
+  height: 95%;
 }
 
 .history {