feat(new-trace): Using new issues tags component in traceDrawer. (#67792)

<img width="1279" alt="Screenshot 2024-03-27 at 12 47 52 PM"
src="https://github.com/getsentry/sentry/assets/60121741/ed072960-6600-4130-8978-c7a9a44a4aff">

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -597,8 +597,6 @@ export const SpanDetailContainer = styled('div')`
 `;
 
 export const SpanDetails = styled('div')`
-  padding: ${space(2)};
-
   table.table.key-value td.key {
     max-width: 280px;
   }

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

@@ -19,6 +19,7 @@ import {EventExtraData} from 'sentry/components/events/eventExtraData';
 import {REPLAY_CLIP_OFFSETS} from 'sentry/components/events/eventReplay';
 import ReplayClipPreview from 'sentry/components/events/eventReplay/replayClipPreview';
 import {EventSdk} from 'sentry/components/events/eventSdk';
+import Tags from 'sentry/components/events/eventTagsAndScreenshot/tags';
 import {EventViewHierarchy} from 'sentry/components/events/eventViewHierarchy';
 import {Breadcrumbs} from 'sentry/components/events/interfaces/breadcrumbs';
 import {getFormattedTimeRangeWithLeadingAndTrailingZero} from 'sentry/components/events/interfaces/spans/utils';
@@ -55,7 +56,7 @@ import {isCustomMeasurement} from 'sentry/views/dashboards/utils';
 import {CustomMetricsEventData} from 'sentry/views/ddm/customMetricsEventData';
 import {getTraceTabTitle} from 'sentry/views/performance/newTraceDetails/traceTabs';
 import type {VirtualizedViewManager} from 'sentry/views/performance/newTraceDetails/virtualizedViewManager';
-import {Row, Tags} from 'sentry/views/performance/traceDetails/styles';
+import {Row} from 'sentry/views/performance/traceDetails/styles';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 
 import type {TraceTree, TraceTreeNode} from '../../traceTree';
@@ -408,14 +409,6 @@ export function TransactionNodeDetails({
             </Fragment>
           )}
 
-          <Tags
-            enableHiding
-            location={location}
-            organization={organization}
-            tags={event.tags}
-            event={node.value}
-          />
-
           {measurementNames.length > 0 && (
             <tr>
               <td className="key">{t('Measurements')}</td>
@@ -442,6 +435,9 @@ export function TransactionNodeDetails({
           )}
         </tbody>
       </TraceDrawerComponents.Table>
+      <TagsWrapper>
+        <Tags event={event} projectSlug={node.value.project_slug} />
+      </TagsWrapper>
       {project ? <EventEvidence event={event} project={project} /> : null}
       <ReplaySection event={event} organization={organization} />
       {event.projectSlug ? (
@@ -516,3 +512,9 @@ const Measurements = styled('div')`
   gap: ${space(1)};
   padding-top: 10px;
 `;
+
+const TagsWrapper = styled('div')`
+  h3 {
+    color: ${p => p.theme.textColor};
+  }
+`;