Fix playground diagnostics scrollbars (#25642)
## Summary
This PR fixes the diagnostics panels' issues list in both playgrounds
not being scrollable.
The issue stems from when the diagnostics panel was made resizable. For
an element to be `overflow: scroll`, it must have an exact size. Because
of the resizability of the panel, the issue list was acting as
`overflow: hidden` instead of `scroll`
To fix this, I found a workaround: By making the top level panel a
`container-type: size`, you can then use it's size in future `css`
`calc`s. Through some manual testing, I found the correct `max-height`
for the list is `calc(100cqh - 52px)`. Here the `cqh` refers to the
parent containers' height. The shrinking of `52px` is needed because of
the title bar. In my testing I found that was how large it was, and it
works for me on all zoom levels and panel sizes.
I added the `container-type: size` via a class on the `css` style sheet
instead of directly on the `Panel` elements because I wasn't sure if it
might cause some conflicts with the default styles that get added by the
`Panel`.
## Test Plan
I tested this by making the changes locally on both playgrounds. I have
not tested a full build from source after these changes as I can't build
ruff/ty from source, which would be required. It would be nice (and
probably a good idea) if someone who can build ruff/ty from source could
test this out locally to make sure it works from my porting into the
github.
Note: Based on the [mozilla
docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type)
`container-type: size` should be available on all platforms.
---------
Co-authored-by: Micha Reiser <micha@reiser.io>
