diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 23ec8280..d532a8e0 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -38,7 +38,7 @@
     .avatar-wrapper {
       margin-right: 10px;
       // margin-top: 13px;
-      top: 5px;
+      // top: 5px;
       width: 32px;
       position: relative;
 
@@ -60,6 +60,7 @@
       flex-direction: column;
       align-items: flex-start;
       max-width: 80%;
+      width: 100%;
       position: relative;
       float: right;
       min-width: 10rem;
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 7aeec30b..07e45fb0 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -26,17 +26,19 @@
         </router-link>
       </div>
       <div class="direct-conversation-inner">
-        <div class="media status">
-          <StatusContent
-            :status="messageForStatusContent"
-            :full-content="true">
-            <span
-              slot="footer"
-              class="created-at"
-            >
-              {{ createdAt }}
-            </span>
-          </StatusContent>
+        <div class="status-body" :style="{ 'min-width': message.attachment ? '80%' : '' }">
+          <div class="media status">
+            <StatusContent
+              :status="messageForStatusContent"
+              :full-content="true">
+              <span
+                slot="footer"
+                class="created-at"
+              >
+                {{ createdAt }}
+              </span>
+            </StatusContent>
+          </div>
         </div>
       </div>
     </div>