From 05c16b49dd98ce35530066b32af8a80e28bc67d5 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 20 Jan 2025 14:34:33 +0530
Subject: [PATCH] fix: Vite dev build fails due to sass (#10716)

# Pull Request Template

## Description

Fixes
https://linear.app/chatwoot/issue/CW-3853/vite-dev-build-fails-due-to-dart-sass

**Other issue**

| First Header  | Second Header |
| ------------- | ------------- |
|
![image](https://github.com/user-attachments/assets/e99ac2bc-0b8a-44d1-aa58-9e10e00b5ad5)
|
![image](https://github.com/user-attachments/assets/c987f70c-f5f5-4606-a498-00a6fe6b6525)
|



## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../reports/components/Filters/Labels.vue     | 15 ++++------
 .../reports/components/ReportFilters.vue      | 28 ++++++++-----------
 .../reports/components/ReportsWrapper.vue     |  8 +++---
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
index 655e82f7b..68cc4baf2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue
@@ -39,15 +39,13 @@ export default {
       @update:model-value="handleInput"
     >
       <template #singleLabel="props">
-        <div class="flex items-center gap-2">
+        <div class="flex items-center min-w-0 gap-2">
           <div
             :style="{ backgroundColor: props.option.color }"
             class="w-5 h-5 rounded-full"
           />
-          <span class="reports-option__desc">
-            <span class="my-0 text-slate-800 dark:text-slate-75">
-              {{ props.option.title }}
-            </span>
+          <span class="my-0 text-slate-800 dark:text-slate-75">
+            {{ props.option.title }}
           </span>
         </div>
       </template>
@@ -57,10 +55,9 @@ export default {
             :style="{ backgroundColor: props.option.color }"
             class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
           />
-          <span class="reports-option__desc">
-            <span class="my-0 text-slate-800 dark:text-slate-75">
-              {{ props.option.title }}
-            </span>
+
+          <span class="my-0 text-slate-800 truncate min-w-0 dark:text-slate-75">
+            {{ props.option.title }}
           </span>
         </div>
       </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
index b41851180..053ae7cd7 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue
@@ -179,18 +179,16 @@ export default {
           @update:model-value="changeFilterSelection"
         >
           <template #singleLabel="props">
-            <div class="flex items-center gap-2">
+            <div class="flex min-w-0 items-center gap-2">
               <Thumbnail
                 :src="props.option.thumbnail"
                 :status="props.option.availability_status"
                 :username="props.option.name"
                 size="22px"
               />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">{{
-                  props.option.name
-                }}</span>
-              </span>
+              <span class="my-0 text-slate-800 truncate dark:text-slate-75">{{
+                props.option.name
+              }}</span>
             </div>
           </template>
           <template #options="props">
@@ -226,28 +224,26 @@ export default {
           @update:model-value="changeFilterSelection"
         >
           <template #singleLabel="props">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center min-w-0 gap-2">
               <div
                 :style="{ backgroundColor: props.option.color }"
                 class="w-5 h-5 rounded-full"
               />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">
-                  {{ props.option.title }}
-                </span>
+
+              <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+                {{ props.option.title }}
               </span>
             </div>
           </template>
           <template #option="props">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center min-w-0 gap-2">
               <div
                 :style="{ backgroundColor: props.option.color }"
                 class="flex-shrink-0 w-5 h-5 border border-solid rounded-full border-slate-100 dark:border-slate-800"
               />
-              <span class="reports-option__desc">
-                <span class="my-0 text-slate-800 dark:text-slate-75">
-                  {{ props.option.title }}
-                </span>
+
+              <span class="my-0 text-slate-800 truncate dark:text-slate-75">
+                {{ props.option.title }}
               </span>
             </div>
           </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
index 2be08487d..7d522f53a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportsWrapper.vue
@@ -10,7 +10,7 @@
 
 <style scoped lang="scss">
 .reports--wrapper {
-  ::v-deep {
+  :deep() {
     .multiselect--disabled {
       @apply opacity-50 border border-n-weak rounded-md cursor-not-allowed;
     }
@@ -23,7 +23,7 @@
       @apply bg-n-slate-1 border border-n-weak m-0 min-h-[2.875rem] pt-0;
 
       input[type='text'] {
-        @apply bg-n-alpha-3 border-n-weak !min-h-[2.375rem] !h-[2.375rem] !ps-0.5 !py-0 !text-sm;
+        @apply bg-n-alpha-3 border-n-weak placeholder:text-n-slate-11 min-h-[2.375rem] h-[2.375rem] px-0.5 py-0 text-sm;
       }
     }
 
@@ -40,7 +40,7 @@
     }
 
     .multiselect__input {
-      @apply text-sm !h-[2.375rem] mb-0 !py-0;
+      @apply text-sm h-[2.375rem] mb-0 py-0;
     }
 
     .multiselect__tags,
@@ -50,7 +50,7 @@
     }
 
     .mx-input-wrapper {
-      @apply bg-n-alpha-3 !border-n-weak text-n-slate-12 rounded-lg text-sm;
+      @apply bg-n-alpha-3 border-n-weak text-n-slate-12 rounded-lg text-sm;
 
       input {
         @apply border-n-weak text-sm;