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

app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Labels.vue

@@ -39,16 +39,14 @@ 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>
         </div>
       </template>
       <template #option="props">
@@ -57,11 +55,10 @@ 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">
+          <span class="my-0 text-slate-800 truncate min-w-0 dark:text-slate-75">
             {{ props.option.title }}
           </span>
-          </span>
         </div>
       </template>
     </multiselect>

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 truncate dark:text-slate-75">{{
-                <span class="my-0 text-slate-800 dark:text-slate-75">{{
                 props.option.name
               }}</span>
-              </span>
             </div>
           </template>
           <template #options="props">
@@ -226,29 +224,27 @@ 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">
+              <span class="my-0 text-slate-800 truncate dark:text-slate-75">
                 {{ props.option.title }}
               </span>
-              </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">
+              <span class="my-0 text-slate-800 truncate dark:text-slate-75">
                 {{ props.option.title }}
               </span>
-              </span>
             </div>
           </template>
         </multiselect>

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;