Adjust space between message bubbles in widget (#309)

app/javascript/widget/assets/scss/woot.scss

@@ -1,8 +1,8 @@
+@import 'reset';
 @import 'variables';
 @import 'buttons';
 @import 'mixins';
 @import 'forms';
-@import 'reset';
 
 html,
 body {

app/javascript/widget/components/AgentMessage.vue

@@ -31,18 +31,19 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
+<style lang="scss">
 @import '~widget/assets/scss/variables.scss';
-
+.conversation-wrap {
   .agent-message {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-end;
     margin: 0 0 $space-micro $space-small;
+    max-width: 88%;
 
     & + .agent-message {
-    margin-bottom: $space-micro;
+      margin-bottom: $space-smaller;
 
       .chat-bubble {
         border-top-left-radius: $space-smaller;
@@ -58,7 +59,7 @@ export default {
     }
 
     & + .user-message {
-    margin-bottom: $space-normal;
+      margin-top: $space-normal;
     }
 
     .avatar-wrap {
@@ -80,4 +81,5 @@ export default {
       }
     }
   }
+}
 </style>

app/javascript/widget/components/UserMessage.vue

@@ -22,15 +22,16 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
+<style lang="scss">
 @import '~widget/assets/scss/variables.scss';
-
+.conversation-wrap {
   .user-message {
     align-items: flex-end;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     margin: 0 $space-smaller $space-micro auto;
+    max-width: 85%;
     text-align: right;
 
     & + .user-message {
@@ -46,10 +47,11 @@ export default {
       }
     }
     & + .agent-message {
-    margin-bottom: $space-normal;
+      margin-top: $space-normal;
     }
     .message-wrap {
       margin-right: $space-small;
     }
   }
+}
 </style>