From 997447364c5f02ae1c2f2cc2304e206dd7a8fc85 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 13 Apr 2021 22:58:54 +0530
Subject: [PATCH] fix: Responsive issue in activity message (#2090)

---
 .../assets/scss/widgets/_conversation-view.scss       | 11 +++++------
 .../components/widgets/conversation/Message.vue       |  4 ++++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index 730cbb9b0..56f75ab76 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
@@ -230,6 +230,10 @@
     }
   }
 
+  &.center {
+    justify-content: center;
+  }
+
   .wrap {
     @include margin($zero $space-normal);
     max-width: 69%;
@@ -258,17 +262,12 @@
     margin: var(--space-small) var(--space-normal);
     padding: var(--space-small) var(--space-normal);
 
-    @include breakpoint(xlarge up) {
-      margin: var(--space-small) auto;
-    }
-
     .is-text {
       display: inline-block;
       text-align: start;
 
-      @include breakpoint(xlarge up) {
+      @include breakpoint(xxxlarge up) {
         display: flex;
-        text-align: center;
       }
     }
   }
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index 7ad176568..2fa22471e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -143,6 +143,10 @@ export default {
       return `https://twitter.com/${screenName}`;
     },
     alignBubble() {
+      const { message_type: messageType } = this.data;
+      if (messageType === MESSAGE_TYPE.ACTIVITY) {
+        return 'center';
+      }
       return !this.data.message_type ? 'left' : 'right';
     },
     readableTime() {