diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index 3c5cd5884..b032e1512 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -174,19 +174,19 @@ const buttonText = computed<string>(() => {
 <style lang="scss" scoped>
 .datepicker-with-range-container {
 	position: relative;
+}
 
-	:deep(.popup) {
-		z-index: 10;
-		margin-top: 1rem;
-		border-radius: $radius;
-		border: 1px solid var(--grey-200);
-		background-color: var(--white);
-		box-shadow: $shadow;
+:deep(.popup) {
+	z-index: 10;
+	margin-top: 1rem;
+	border-radius: $radius;
+	border: 1px solid var(--grey-200);
+	background-color: var(--white);
+	box-shadow: $shadow;
 
-		&.is-open {
-			width: 500px;
-			height: 320px;
-		}
+	&.is-open {
+		width: 500px;
+		height: 320px;
 	}
 }
 
diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index a3dc6f5c9..aefd331b5 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -588,7 +588,7 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .single-value-control {
 	display: flex;
 	align-items: center;
@@ -598,7 +598,7 @@ export default {
 	}
 }
 
-.datepicker-with-range-container .popup {
+:deep(.datepicker-with-range-container .popup) {
 	right: 0;
 }
 </style>