diff --git a/app/components/projects/settings/project_custom_field_sections/index_component.sass b/app/components/projects/settings/project_custom_field_sections/index_component.sass
index c91546101fe3..233f3fa8527e 100644
--- a/app/components/projects/settings/project_custom_field_sections/index_component.sass
+++ b/app/components/projects/settings/project_custom_field_sections/index_component.sass
@@ -1,3 +1,3 @@
-.Box-row
-  &.hidden-by-filter
+.Box
+  .hidden-by-filter
     display: none
\ No newline at end of file
diff --git a/frontend/src/stimulus/controllers/dynamic/projects/settings/project-custom-fields-mapping-filter.controller.ts b/frontend/src/stimulus/controllers/dynamic/projects/settings/project-custom-fields-mapping-filter.controller.ts
index 54a5a520bf1e..2cf7982df6ba 100644
--- a/frontend/src/stimulus/controllers/dynamic/projects/settings/project-custom-fields-mapping-filter.controller.ts
+++ b/frontend/src/stimulus/controllers/dynamic/projects/settings/project-custom-fields-mapping-filter.controller.ts
@@ -77,19 +77,19 @@ export default class ProjectCustomFieldsMappingFilterController extends Controll
     this.showBulkActionContainers();
 
     this.searchItemTargets.forEach((item) => {
-      (item as HTMLElement).style.display = 'block';
+      (item as HTMLElement).classList.remove('hidden-by-filter');
     });
   }
 
   hideBulkActionContainers() {
     this.bulkActionContainerTargets.forEach((item) => {
-      (item as HTMLElement).style.display = 'none';
+      (item as HTMLElement).classList.add('hidden-by-filter');
     });
   }
 
   showBulkActionContainers() {
     this.bulkActionContainerTargets.forEach((item) => {
-      (item as HTMLElement).style.display = 'block';
+      (item as HTMLElement).classList.remove('hidden-by-filter');
     });
   }
 }