dillon1000/react

[DevTools] Fix WhatChanged scrolling out of view in profiler sidebar (#36244)

## Summary
Previously, WhatChanged and InspectedElementBadges were rendered inside
the same scrollable [Content
div](https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js#L130-L147)
as the commit list. When a component had many render timestamps,
scrolling down to pick one caused the "what changed" context to scroll
out of view, requiring the user to scroll back up to see it.

While the profiler already exposes render details via hover tooltips on
fibers, those are transient and pointer-dependent. This change
introduces a sticky header section at the top of the Content div that
holds the current commit summary, badges, and WhatChanged. The section
is collapsible (click or Enter/Space) so users can reclaim vertical
space for the commit list when needed. The commit list now sits below
the sticky header as a sibling, so it scrolls independently while the
summary remains always visible.

Closes #36525 

---
### Current Behavior

https://github.com/user-attachments/assets/05f2889a-4e0d-4464-965a-2821c63c2d30

### Proposed UI
Apologies on this one. I had to [upload it on
YouTube](https://youtu.be/g3KMaqn33G0) since the video is quite big.

---

## How did you test this change?

### Manual Testing
| Case  | Screenshot |
| ------------- | ------------- |
| Expanded simple | <img width="1512" height="948"
alt="expanded-default"
src="https://github.com/user-attachments/assets/00d3bf11-ef98-463e-96ec-c918e58147ff"
/> |
| Collapsed Simple | <img width="1512" height="948"
alt="collapsed-default"
src="https://github.com/user-attachments/assets/75d0ae79-c96f-4c55-9dc1-538ba65037b8"
/> |
| Focused using tab navigation while expanded | <img width="1512"
height="948" alt="expanded-tab-focused-simple"
src="https://github.com/user-attachments/assets/c4098f2d-1c43-4b04-ab69-1e646e79bc8e"
/> |
| Focused using tab navigation while collapsed | <img width="1512"
height="948" alt="collapsed-tab-focused-simple"
src="https://github.com/user-attachments/assets/75840812-b700-44dd-b82d-51d5a867f501"
/> |
| Long render info( expanded ) | <img width="1512" height="948"
alt="long-desc-expanded"
src="https://github.com/user-attachments/assets/53c4d776-55d5-4bb0-818d-a70e032e57d7"
/> |
| Long render info( collapsed ) | <img width="1512" height="948"
alt="long-desc-collapsed"
src="https://github.com/user-attachments/assets/45eb7f6f-fcc6-4f7b-88e7-e3ece9e59d19"
/> |

#### Hover (expanded)

https://github.com/user-attachments/assets/d04668d3-1e0e-44c7-af7e-087d246ec07d

#### Hover (collapsed)

https://github.com/user-attachments/assets/86638b8d-60c2-4cfa-b357-c1104e76767e

---

## Why this matters

This is more than a visual polish issue:

* The Profiler is fundamentally a context-driven debugging tool
* Losing the “why did this render?” explanation during navigation
interrupts analysis flow
* The issue becomes progressively worse on large applications or heavily
interactive surfaces
* Hover tooltips are not an adequate replacement because they are
transient and pointer-dependent
* Keyboard users are disproportionately affected due to repeated
navigation and scrolling

In practice, this increases cognitive load during performance debugging
and makes long profiling sessions unnecessarily cumbersome.