2 files changed, 11 insertions, 6 deletions
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index e175e90c..d7238641 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,6 +1,7 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const chatPanel = {
+  props: [ 'floating' ],
   data () {
     return {
       currentMessage: '',
@@ -22,7 +23,7 @@ const chatPanel = {
       this.collapsed = !this.collapsed
     },
     userProfileLink (user) {
-      return generateProfileLink(user.id, user.screen_name)
+      return generateProfileLink(user.id, user.username)
     }
   }
 }
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 1b9c63ff..bf65efc5 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="chat-panel" v-if="!this.collapsed">
+  <div class="chat-panel" v-if="!this.collapsed || !this.floating">
     <div class="panel panel-default">
-      <div class="panel-heading timeline-heading chat-heading" @click.stop.prevent="togglePanel">
+      <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
         <div class="title">
           {{$t('chat.title')}}
-          <i class="icon-cancel" style="float: right;"></i>
+          <i class="icon-cancel" style="float: right;" v-if="floating"></i>
         </div>
       </div>
       <div class="chat-window" v-chat-scroll>
@@ -52,6 +52,7 @@
   right: 0px;
   bottom: 0px;
   z-index: 1000;
+  max-width: 25em;
 }
 
 .chat-heading {
@@ -63,10 +64,13 @@
 }
 
 .chat-window {
-  width: 345px;
-  max-height: 40vh;
   overflow-y: auto;
   overflow-x: hidden;
+  max-height: 20em;
+}
+
+.chat-window-container {
+  height: 100%;
 }
 
 .chat-message {