trace: fix buttons in chonk (#91878)

Fixes chonk buttons in trace view

Before
![CleanShot 2025-05-19 at 13 15
12@2x](https://github.com/user-attachments/assets/e0c424f8-db7b-4d42-975d-ff92df19aa0f)

After
![CleanShot 2025-05-19 at 13 15
38@2x](https://github.com/user-attachments/assets/2244f5f1-0cb4-45a3-adef-9a156bbee7dc)


Fixes DE-49

Author: JonasBa

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -1156,7 +1156,7 @@ const ActionWrapper = styled('div')`
   overflow: visible;
   display: flex;
   align-items: center;
-  gap: ${space(0.25)};
+  gap: ${space(0.5)};
 `;
 
 function EventTags({projectSlug, event}: {event: Event; projectSlug: string}) {

static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx

@@ -700,26 +700,23 @@ function TabPinButton(props: {
   pinned: boolean;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }) {
+  const theme = useTheme();
   return (
-    <PinButton
-      size="zero"
+    <StyledButton
       data-test-id="trace-drawer-tab-pin-button"
+      size="zero"
       onClick={props.onClick}
-    >
-      <StyledIconPin size="xs" isSolid={props.pinned} />
-    </PinButton>
+      // @ts-expect-error transparent is not supported in legacy button
+      priority={theme.isChonk ? 'transparent' : 'default'}
+      aria-label={props.pinned ? t('Unpin Tab') : t('Pin Tab')}
+      icon={<StyledIconPin size="xs" isSolid={props.pinned} />}
+    />
   );
 }
 
-const PinButton = styled(Button)`
-  padding: ${space(0.5)};
-  margin: 0;
-  background-color: transparent;
+const StyledButton = styled(Button)`
   border: none;
-
-  &:hover {
-    background-color: transparent;
-  }
+  box-shadow: none;
 `;
 
 const StyledIconPin = styled(IconPin)`