From 9d385b92550776b595f6fb37c48fdb61d538778f Mon Sep 17 00:00:00 2001
From: TkDodo <dominik.dorfmeister@sentry.io>
Date: Fri, 21 Nov 2025 17:27:32 +0100
Subject: [PATCH] fix(ui2): align OperationDot

---
 .../performance/transactionSummary/filter.tsx | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/static/app/views/performance/transactionSummary/filter.tsx b/static/app/views/performance/transactionSummary/filter.tsx
index 0a164746bcfc3a..eb5b3b6e1b6dd6 100644
--- a/static/app/views/performance/transactionSummary/filter.tsx
+++ b/static/app/views/performance/transactionSummary/filter.tsx
@@ -1,17 +1,18 @@
 import type {Theme} from '@emotion/react';
 import {useTheme} from '@emotion/react';
-import styled from '@emotion/styled';
 import type {Location} from 'history';
 
+import {Container} from '@sentry/scraps/layout';
+
 import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import {CompactSelect} from 'sentry/components/core/compactSelect';
 import {pickBarColor} from 'sentry/components/performance/waterfall/utils';
 import {IconFilter} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {OrganizationSummary} from 'sentry/types/organization';
 import {SpanOpBreakdown} from 'sentry/utils/fields';
 import {decodeScalar} from 'sentry/utils/queryString';
+import {isChonkTheme} from 'sentry/utils/theme/withChonk';
 
 import {decodeHistogramZoom} from './transactionOverview/latencyChart/utils';
 
@@ -79,13 +80,20 @@ function Filter(props: Props) {
   );
 }
 
-const OperationDot = styled('div')<{backgroundColor: string}>`
-  display: block;
-  width: ${space(1)};
-  height: ${space(1)};
-  border-radius: 100%;
-  background-color: ${p => p.backgroundColor};
-`;
+function OperationDot({backgroundColor}: {backgroundColor: string}) {
+  const theme = useTheme();
+  return (
+    <Container
+      width={theme.space.md}
+      height={theme.space.md}
+      alignSelf="center"
+      style={{
+        borderRadius: isChonkTheme(theme) ? theme.radius.full : '100%',
+        backgroundColor,
+      }}
+    />
+  );
+}
 
 export function filterToField(option: SpanOperationBreakdownFilter) {
   switch (option) {