fix(ui2): align OperationDot (#103819)

| before | after |
|--------|--------|
| <img width="488" height="579" alt="Screenshot 2025-11-21 at 17 24 16"
src="https://github.com/user-attachments/assets/fbe0d6f0-3c1e-46c1-865d-93f55c46e8e6"
/> | <img width="439" height="585" alt="Screenshot 2025-11-21 at 17 23
54"
src="https://github.com/user-attachments/assets/c6708bca-117d-4a06-bfab-e79634819f41"
/> |
| <img width="398" height="579" alt="Screenshot 2025-11-21 at 17 24 34"
src="https://github.com/user-attachments/assets/7d6c3c29-743a-4fa2-8377-474a2c9a28d2"
/> | <img width="451" height="576" alt="Screenshot 2025-11-21 at 17 23
49"
src="https://github.com/user-attachments/assets/281f72c8-9259-419e-bcf5-52c1c9700acd"
/> |

Author: TkDodo

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) {