diff --git a/frontend/src/pages/AlertDetails/AlertDetails.styles.scss b/frontend/src/pages/AlertDetails/AlertDetails.styles.scss
index 48aa18d7604..275319eb82a 100644
--- a/frontend/src/pages/AlertDetails/AlertDetails.styles.scss
+++ b/frontend/src/pages/AlertDetails/AlertDetails.styles.scss
@@ -41,9 +41,9 @@
}
.alert-details {
- .divider {
- border-color: var(--l1-border);
- margin: 16px 0;
+ &__divider {
+ --divider-color: var(--l1-border);
+ --divider-margin: 16px 0;
}
.breadcrumb-divider {
margin-top: 10px;
diff --git a/frontend/src/pages/AlertDetails/AlertDetails.tsx b/frontend/src/pages/AlertDetails/AlertDetails.tsx
index 7595e1fcb0e..ed708027e69 100644
--- a/frontend/src/pages/AlertDetails/AlertDetails.tsx
+++ b/frontend/src/pages/AlertDetails/AlertDetails.tsx
@@ -104,7 +104,7 @@ function AlertDetails(): JSX.Element {
/>
{alertRuleDetails &&
}
-
+
-
+
diff --git a/frontend/src/pages/TracesExplorer/Filter/Filter.styles.scss b/frontend/src/pages/TracesExplorer/Filter/Filter.styles.scss
index dc14c157997..4f7f88ca326 100644
--- a/frontend/src/pages/TracesExplorer/Filter/Filter.styles.scss
+++ b/frontend/src/pages/TracesExplorer/Filter/Filter.styles.scss
@@ -47,10 +47,9 @@
}
}
-.divider {
- background-color: var(--l1-border);
- margin: 0;
- border-color: var(--l1-border);
+.section-body__divider {
+ --divider-color: var(--l1-border);
+ --divider-margin: 0;
}
.filter-header {
diff --git a/frontend/src/pages/TracesExplorer/Filter/Section.tsx b/frontend/src/pages/TracesExplorer/Filter/Section.tsx
index 1cc1b00be29..e7afb778f7e 100644
--- a/frontend/src/pages/TracesExplorer/Filter/Section.tsx
+++ b/frontend/src/pages/TracesExplorer/Filter/Section.tsx
@@ -65,7 +65,7 @@ export function Section(props: SectionProps): JSX.Element {
return (