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;