From 1dd7cfc25db690c1524e03def69c0e910aecf512 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 22 Mar 2023 01:55:35 +0530
Subject: [PATCH] fix: Design issues after RTL changes (#6718)

---
 app/javascript/dashboard/components/ChatList.vue      |  8 ++------
 .../routes/dashboard/contacts/components/Header.vue   | 11 ++++++++++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index c7a65376d..32718ee23 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -45,7 +45,6 @@
             variant="smooth"
             color-scheme="alert"
             icon="delete"
-            class="delete-custom-view__button"
             @click="onClickOpenDeleteFoldersModal"
           />
         </div>
@@ -835,17 +834,14 @@ export default {
 .filter--actions {
   display: flex;
   align-items: center;
+  gap: var(--space-micro);
 }
 
 .filter__applied {
-  padding: 0 0 var(--space-slab) 0 !important;
+  padding-bottom: var(--space-slab) !important;
   border-bottom: 1px solid var(--color-border);
 }
 
-.delete-custom-view__button {
-  margin-right: var(--space-normal);
-}
-
 .tab--chat-type {
   padding: 0 var(--space-normal);
 
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
index e801bcc48..7e1141be2 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
@@ -3,7 +3,7 @@
     <div class="table-actions-wrap">
       <div class="left-aligned-wrap">
         <woot-sidemenu-icon />
-        <h1 class="page-title">
+        <h1 class="page-title header-title">
           {{ headerTitle }}
         </h1>
       </div>
@@ -167,6 +167,15 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  max-width: 100%;
+  min-width: var(--space-mega);
+
+  .header-title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 var(--space-small);
+  }
 }
 
 .right-aligned-wrap {