From 43753bc74a1d596ce8e55326792832177d7999a7 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 14 Feb 2025 02:12:28 +0530
Subject: [PATCH] fix: UI issue with `pt-Br` locale (#10897)

Fixes https://linear.app/chatwoot/issue/CW-4041/issues-with-pt-br-locale
---
 .../inbox/components/InboxDisplayMenu.vue      | 18 +++++++++---------
 .../inbox/components/InboxListHeader.vue       |  2 +-
 .../inbox/components/InboxOptionMenu.vue       |  2 +-
 .../dashboard/inbox/components/MenuItem.vue    |  6 ++++--
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
index ff61b01aa..71e506294 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxDisplayMenu.vue
@@ -115,12 +115,12 @@ export default {
 
 <template>
   <div
-    class="flex flex-col bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container shadow-lg z-50 w-[170px] rounded-xl divide-y divide-n-weak dark:divide-n-strong"
+    class="flex flex-col bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container shadow-lg z-50 max-w-64 min-w-[170px] w-fit rounded-xl divide-y divide-n-weak dark:divide-n-strong"
   >
-    <div class="flex items-center justify-between p-3 rounded-t-lg h-11">
-      <div class="flex gap-1.5">
+    <div class="flex items-center gap-2 justify-between p-3 rounded-t-lg h-11">
+      <div class="flex gap-1.5 min-w-0">
         <span class="i-lucide-arrow-down-up size-3.5 text-n-slate-12" />
-        <span class="text-xs font-medium text-n-slate-12">
+        <span class="text-xs font-medium text-n-slate-12 truncate min-w-0">
           {{ $t('INBOX.DISPLAY_MENU.SORT') }}
         </span>
       </div>
@@ -132,25 +132,25 @@ export default {
           trailing-icon
           xs
           outline
-          class="w-20"
+          class="w-fit min-w-20 max-w-32"
           @click="openSortMenu"
         />
         <div
           v-if="showSortMenu"
-          class="absolute flex flex-col gap-0.5 bg-n-alpha-3 backdrop-blur-[100px] z-60 rounded-lg p-0.5 w-20 top-px outline outline-1 outline-n-container dark:outline-n-strong"
+          class="absolute flex flex-col gap-0.5 bg-n-alpha-3 backdrop-blur-[100px] z-60 rounded-lg p-0.5 w-fit min-w-20 max-w-32 top-px outline outline-1 outline-n-container dark:outline-n-strong"
         >
           <div
             v-for="option in sortOptions"
             :key="option.key"
             role="button"
-            class="flex rounded-md h-5 w-full items-center justify-between px-1.5 py-0.5 gap-1"
+            class="flex rounded-md h-5 w-full items-center justify-between px-1.5 py-0.5 gap-2 whitespace-nowrap"
             :class="{
               'bg-n-brand/10 dark:bg-n-brand/10': activeSort === option.key,
             }"
             @click.stop="onSortOptionClick(option)"
           >
             <span
-              class="text-xs font-medium hover:text-n-brand dark:hover:text-n-brand"
+              class="text-xs font-medium hover:text-n-brand truncate min-w-0 dark:hover:text-n-brand"
               :class="{
                 'text-n-blue-text dark:text-n-blue-text':
                   activeSort === option.key,
@@ -161,7 +161,7 @@ export default {
             </span>
             <span
               v-if="activeSort === option.key"
-              class="i-lucide-check size-2.5 text-n-blue-text"
+              class="i-lucide-check size-2.5 flex-shrink-0 text-n-blue-text"
             />
           </div>
         </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
index aa981eba5..7694bec2f 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue
@@ -113,7 +113,7 @@ export default {
       <InboxOptionMenu
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
-        class="absolute top-full mt-1 ltr:right-0 ltr:lg:right-[unset] rtl:left-0 rtl:md:left-[unset]"
+        class="absolute top-full mt-1 ltr:right-0 ltr:lg:right-[unset] rtl:left-0 rtl:lg:left-[unset]"
         @option-click="onInboxOptionMenuClick"
       />
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
index 228730d74..024b1f69a 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue
@@ -33,7 +33,7 @@ export default {
 
 <template>
   <div
-    class="z-50 flex flex-col w-40 gap-1 bg-n-alpha-3 backdrop-blur-[100px] divide-y py-2 px-2 outline outline-1 outline-n-container shadow-lg rounded-xl divide-n-weak dark:divide-n-strong"
+    class="z-50 flex flex-col max-w-64 min-w-40 gap-1 bg-n-alpha-3 backdrop-blur-[100px] divide-y py-2 px-2 outline outline-1 outline-n-container shadow-lg rounded-xl divide-n-weak dark:divide-n-strong"
   >
     <div class="flex flex-col">
       <MenuItem
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
index f10b7d7b7..fa515fdaa 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
@@ -10,8 +10,10 @@ defineProps({
 <template>
   <div
     role="button"
-    class="flex items-center w-full h-8 px-2 py-1 overflow-hidden text-xs font-medium rounded-md cursor-pointer text-n-slate-12 whitespace-nowrap text-ellipsis hover:text-n-blue-text"
+    class="flex items-center w-full h-8 px-2 py-1 rounded-md cursor-pointer hover:text-n-blue-text min-w-0"
   >
-    {{ label }}
+    <span class="text-xs font-medium truncate text-n-slate-12">
+      {{ label }}
+    </span>
   </div>
 </template>