Fix styles in conversation view

app/javascript/widget/components/ConversationWrap.vue

@@ -1,12 +1,14 @@
 <template>
-  <section class="conversation-wrap">
+  <div class="conversation--container">
-    <ChatMessage
+    <div class="conversation-wrap">
-      v-for="message in messages"
+      <ChatMessage
-      :key="message.id"
+        v-for="message in messages"
-      :message="message"
+        :key="message.id"
-    />
+        :message="message"
+      />
+    </div>
     <branding></branding>
-  </section>
+  </div>
 </template>
 
 <script>
@@ -39,3 +41,19 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+@import '~widget/assets/scss/woot.scss';
+
+.conversation--container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.conversation-wrap {
+  flex: 1;
+  padding: $space-large $space-small $zero $space-small;
+}
+</style>

app/javascript/widget/views/Home.vue

@@ -53,12 +53,6 @@ export default {
     flex-shrink: 0;
   }
 
-  .conversation-wrap {
-    flex: 1;
-    overflow-y: auto;
-    padding: $space-large $space-small $zero $space-small;
-  }
-
   .footer-wrap {
     flex-shrink: 0;
   }