feat(breadcrumbs): Fix breadcrumbs styles + navigation

[leeandher]

Adds a design approved sticky header to the breadcrumb drawer:

After chatting with Vu also made some changes so align the drawer header and sticky header in the new UI:

(This involved updating some border colors and spacing)

Lastly a few more bug fixes for breadcrumbs:

Applying meta for HTTP and Exception crumbs:

Wrapping unformatted SQL

• Fixed virtualization and moved scrollbar to the left side to avoid double scroll issues.

fixed.virtualization.mov

[codecov]

❌ 8 Tests Failed:

Tests completed	Failed	Passed	Skipped
7656	8	7648	0

View the top 3 failed tests by shortest run time

BreadcrumbsDataSection can switch between display time formats�BreadcrumbsDataSection can switch between display time formats

Stack Traces | 0.025s run time

TestingLibraryElementError: Unable to find an element with the text: 06:01:48.762. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../events/breadcrumbs/breadcrumbsDataSection.spec.tsx:83:40)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)

BreadcrumbsDataSection renders a summary of breadcrumbs with a button to view them all�BreadcrumbsDataSection renders a summary of breadcrumbs with a button to view them all

Stack Traces | 0.077s run time

TestingLibraryElementError: Unable to find an element with the text: Exception. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../events/breadcrumbs/breadcrumbsDataSection.spec.tsx:31:42)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)

BreadcrumbsDrawer allows sort dropdown to affect displayed crumbs�BreadcrumbsDrawer allows sort dropdown to affect displayed crumbs

Stack Traces | 0.151s run time

TestingLibraryElementError: Unable to find an element with the text: Warning Category. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
...
    at Object.getElementError (.../sentry/sentry/node_modules/@.../dom/dist/config.js:37:19)
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:76:38
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:52:17
    at .../sentry/sentry/node_modules/@.../dom/dist/query-helpers.js:95:19
    at Object.<anonymous> (.../events/breadcrumbs/breadcrumbsDrawer.spec.tsx:122:25)

To view individual test run time comparison to the main branch, go to the Test Analytics Dashboard