Fix styles in conversation view

koolhead17 · Nov 12, 2019 · b985085 · b985085
1 parent 6d8b6d4
commit b985085
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
@@ -1,12 +1,14 @@
 <template>
- <section class="conversation-wrap">
- <ChatMessage
- v-for="message in messages"
- :key="message.id"
- :message="message"
- />
+ <div class="conversation--container">
+ <div class="conversation-wrap">
+ <ChatMessage
+ v-for="message in messages"
+ :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>
diff --git a/app/javascript/widget/views/Home.vue b/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;
  }