fix(starfish): Change select component for span op filter (#60676)

Make the device.class & span.op select components consistent
<img width="273" alt="Screenshot 2023-11-27 at 9 08 17 PM"
src="https://github.com/getsentry/sentry/assets/63818634/b0b61f6d-dab2-48ce-8e1e-e5dc3c788804">

static/app/views/starfish/views/screens/screenLoadSpans/spanOpSelector.tsx

@@ -1,7 +1,7 @@
 import {browserHistory} from 'react-router';
 import styled from '@emotion/styled';
 
-import SelectControl from 'sentry/components/forms/controls/selectControl';
+import {CompactSelect} from 'sentry/components/compactSelect';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {NewQuery} from 'sentry/types';
@@ -69,8 +69,8 @@ export function SpanOpSelector({transaction, primaryRelease, secondaryRelease}:
   ];
 
   return (
-    <StyledSelectControl
-      inFieldLabel={t('Operation:')}
+    <StyledCompactSelect
+      triggerProps={{prefix: t('Operation'), size: 'xs'}}
       value={value}
       options={options ?? []}
       onChange={newValue => {
@@ -86,7 +86,6 @@ export function SpanOpSelector({transaction, primaryRelease, secondaryRelease}:
   );
 }
 
-const StyledSelectControl = styled(SelectControl)`
+const StyledCompactSelect = styled(CompactSelect)`
   margin-bottom: ${space(1)};
-  width: 180px;
 `;