From a9d42e8c7e207eef40647608b629a87d9dff82c7 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 4 Mar 2024 21:58:47 +0530
Subject: [PATCH] fix: Update the broken styles in help center insert modal
 (#9062)

---
 .../ArticleSearch/ArticleSearchResultItem.vue          |  4 ++--
 .../helpcenter/components/ArticleSearch/Header.vue     | 10 ++++++----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
index 8ecff430a..836f77250 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -4,14 +4,14 @@
     @click="handlePreview"
   >
     <h4
-      class="text-sm text-left mb-0 text-slate-900 dark:text-slate-25 px-1 -mx-1 rounded-sm width-auto hover:underline group-hover:underline"
+      class="text-sm ltr:text-left rtl:text-right w-full mb-0 text-slate-900 dark:text-slate-25 -mx-1 rounded-sm hover:underline group-hover:underline"
     >
       {{ title }}
     </h4>
 
     <div class="flex content-between items-center gap-0.5 w-full">
       <p
-        class="text-sm text-left text-slate-600 dark:text-slate-300 mb-0 w-full"
+        class="text-sm ltr:text-left rtl:text-right text-slate-600 dark:text-slate-300 mb-0 w-full"
       >
         {{ locale }}
         {{ ` / ` }}
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
index a15159d3c..3074f5eec 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col py-1">
-    <div class="flex align-middle align-justify py-2">
+    <div class="flex items-center justify-between py-2 mb-1">
       <h3 class="text-base text-slate-900 dark:text-slate-25">
         {{ title }}
       </h3>
@@ -14,14 +14,16 @@
     </div>
 
     <div class="relative">
-      <div class="absolute left-0 w-8 h-8 flex justify-center items-center">
-        <fluent-icon icon="search" class="" size="16" />
+      <div
+        class="absolute ltr:left-0 rtl:right-0 w-8 top-0.5 h-8 flex justify-center items-center"
+      >
+        <fluent-icon icon="search" class="" size="18" />
       </div>
       <input
         ref="searchInput"
         type="text"
         :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
-        class="block w-full pl-8 h-8 text-sm dark:bg-slate-700 bg-slate-25 rounded-md leading-8 py-1 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
+        class="block w-full !h-9 ltr:!pl-8 rtl:!pr-8 dark:!bg-slate-700 !bg-slate-25 text-sm rounded-md leading-8 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-woot-200 !mb-0 focus:bg-slate-25 dark:focus:bg-slate-700 dark:focus:ring-woot-700"
         :value="searchQuery"
         @focus="onFocus"
         @blur="onBlur"