Fix: Alignment issue in activity message (#2057)

* Fixes alignment issue in activity message

* Codeclimate fixes

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -249,17 +249,27 @@
   }
 
   .activity-wrap {
-    @include flex;
+    background: var(--s-50);
-    @include margin($space-small auto);
+    border: 1px solid var(--s-100);
-    @include padding($space-small $space-normal);
+    border-radius: var(--border-radius-medium);
-    @include flex-align($x: center, $y: null);
+    display: flex;
-    background: lighten($warning-color, 32%);
+    font-size: var(--font-size-small);
-    border: 1px solid lighten($warning-color, 22%);
+    justify-content: center;
-    border-radius: $space-smaller;
+    margin: var(--space-small) var(--space-normal);
-    font-size: $font-size-small;
+    padding: var(--space-small) var(--space-normal);
 
-    .message-text__wrap {
+    @include breakpoint(xlarge up) {
+      margin: var(--space-small) auto;
+    }
+
+    .is-text {
       display: inline-block;
+      text-align: start;
+
+      @include breakpoint(xlarge up) {
+        display: flex;
+        text-align: center;
+      }
     }
   }
 }

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -95,6 +95,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '~dashboard/assets/scss/app.scss';
+
 .right {
   .message-text--metadata {
     .time {
@@ -136,12 +138,16 @@ export default {
 
 .activity-wrap {
   .message-text--metadata {
-    display: inline-block;
-
     .time {
       color: var(--s-300);
+      display: flex;
+      text-align: center;
       font-size: var(--font-size-micro);
-      margin-left: var(--space-small);
+      margin-left: 0;
+
+      @include breakpoint(xlarge up) {
+        margin-left: var(--space-small);
+      }
     }
   }
 }