💄 Update docs again for new design

docs/product/issues/issue-details/breadcrumbs/index.mdx

@@ -14,13 +14,13 @@ If an error event provides a trail, you'll see the breadcrumbs on the **Issue De
 
 ## Breadcrumbs Display
 
-You'll see a few of the breadcrumbs that may be available for the event in the issue "Details" tab. To access the rest of them, click the "View All" button at the bottom of the section. This will open a slide out drawer where you can search, filter, sort, and change the time display for all available breadcrumbs. 
+You'll see a few of the breadcrumbs that may be available for the event in the issue "Details" tab. To access the rest of them, click the "View All" button at the bottom of the section. This will open a slide out drawer where you can search, filter, sort, and change the time display for all available breadcrumbs.
 
 Here are all the ways you can narrow down what you see:
 - **Search**: Shows only breadcrumbs that match the query. Matches can occur on `type`, `category`, `message` and `data`.
 - **Filter**:  Filters by the associated `type`.
 - **Sort**: Determines whether breadcrumbs are shown by Newest or Oldest first. (Your sort preference will be saved to the browser.)
-- **Time Display:** Determines how breadcrumb timestamps are displayed, either as absolute timestamps (respecting user preferences for a 24-hour clocks/timezone), or relative to the first breadcrumb in the list. If a relative timestamp looks negative, it means that it took place before the event's first breadcrumb. (Your time display preference will be saved to the browser.)
+- **Time Display:** Determines how breadcrumb timestamps are displayed, either as absolute timestamps (respecting user preferences for a 24-hour clocks/timezone), or relative to the first breadcrumb in the list. If a relative timestamp appear negative, it means that it took place before the top-most breadcrumb in the list. (Your time display preference will be saved to the browser.)
 
 ![Breadcrumbs drawer](./img/breadcrumbs-drawer.png)
 
@@ -31,7 +31,7 @@ Each breadcrumb is composed of the following:
 
 - **Type**: `type` is a semi-internal attribute that controls how breadcrumbs are categorized. If left unchanged, all breadcrumbs are recorded as `default`, but Sentry provides other [types](https://develop.sentry.dev/sdk/event-payloads/breadcrumbs/#breadcrumb-types) that each have their own color/icon in the UI.
 
-- **Category**: The event category. This data is similar to a logger name and helps you understand where an event took place, such as `auth`. In the UI, period characters are replaced with space (for example, `ui.click` becomes `UI Click`)
+- **Category**: The event category. This data is similar to a logger name and helps you understand where an event took place, such as `auth`.
 
 - **Message**: A string describing the event, rendered as text with all whitespace preserved. It's often used as a drop-in for a traditional log message.
 

docs/product/issues/issue-details/index.mdx

@@ -97,15 +97,20 @@ The Stack Trace section of the page shows you the line of code that the event er
 
 It's the most important piece of information that the Sentry grouping algorithm uses to group events into one issue. You can also customize how events are grouped. Learn more about customized grouping in [Issue Grouping](/concepts/data-management/event-grouping/).
 
+## Session Replay
+If you’ve enabled [Session Replay](/product/explore/session-replay/), you’ll have access to a replay preview on the page (if there’s one associated with the event). Replays can be associated with both frontend and [backend errors](/product/explore/session-replay/getting-started#replays-for-backend-errors), as long as distributed tracing is set up. From here you can navigate to the rest of the replays recorded for this issue, or inspect this replay on the [Replay Details](/product/explore/session-replay/replay-details/) page.
+
+![Session Replay](./img/issue-replay.png)
+
 ## Breadcrumbs
 
+![Breadcrumbs](./img/issue-breadcrumbs.png)
+
 [Breadcrumbs](/product/issues/issue-details/breadcrumbs/) provide a history and timeline leading up to the error event. These can include things like HTTP requests, log statements from the console or server, and DOM (document object model) events in JavaScript.
 
-![Breadcrumbs](./img/issue-breadcrumbs.png)
+You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging
 
-You can set your own <PlatformLink to="/enriching-events/breadcrumbs/">breadcrumbs</PlatformLink> to make them more useful for debugging.
 
-If you’ve enabled [Session Replay](/product/explore/session-replay/), you’ll see a replay preview under Breadcrumbs if there’s one associated with the event you’re viewing. Replays can be associated with both frontend and [backend errors](/product/explore/session-replay/getting-started#replays-for-backend-errors) (as long as distrubted tracing is set up). Clicking on the replay preview will lead you to the [Replay Details](/product/explore/session-replay/replay-details/) page.
 
 ## Tags