chore: Improves styling for conversation header (#1167)

Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -69,3 +69,11 @@ select {
     border-top-left-radius: 0 !important;
   }
 }
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,3 +1,4 @@
+@import '~dashboard/assets/scss/variables';
 @import '~widget/assets/scss/mixins';
 
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
@@ -235,12 +236,3 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-
-.justify-space-between {
-  justify-content: space-between;
-}
-
-.w-100 {
-  width: 100%;
-}

app/javascript/dashboard/assets/scss/widgets/_conv-header.scss

@@ -41,6 +41,10 @@
     @include flex;
     @include flex-align($x: center, $y: middle);
 
+    &.hide {
+      visibility: hidden;
+    }
+
     .user--name {
       @include margin(0);
       font-size: $font-size-medium;
@@ -83,3 +87,15 @@
     }
   }
 }
+
+
+.header-actions-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: flex-end;
+
+  &.has-open-sidebar {
+    justify-content: flex-end;
+  }
+}