Dashboard: Reduce scope of contain: strict to TextPanel

[leeoniya]

placeholder for attempt number 3 of #75329

here we will add additional changes to PanelChrome that prevent unwanted overflow/regressions shown in #75466

also, will explore keeping some performance benefits of contain: strict, probably by relaxing to contain: layout size, which omits paint that is part of the strict shorthand: https://css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/

[leeoniya]

looks like switching to contain: size layout was all that was needed to fix the overflow issues. can't say i fully understand why, though 😅

[ryantxu]

works as expected...

also do not understand it 🤷🏻

[dprokop]

Tested a couple of dev dashboards and haven't noticed any regressions.

But, I've managed to see the problem mentioned by @gtk-grafana that's happening in Explore:

Switching back to main - this problem is not there, so seems like this must be caused by the contain: strict change.

UPDATE: Seems like this happens when the Show more lines .... is shown:

UPDATE2: Actually it's broken on main too, but in a different way:

contain: strict clips it, but one can not scroll to the bottom of the legend anyways. The problem is here https://github.com/grafana/grafana/blob/main/public/app/features/explore/Graph/ExploreGraph.tsx#L215 - the height of the PanelRenderer does not take into account the Show more lines... being present so basically the DOM element for the panel is pushed outside of the panel container. cc @grafana/explore-squad

Can we just make the Show more lines... fixed height since it's not responsive or anything? And then just subtract that value from the panel height when it's shown.

[leeoniya]

cc @gelicia ^^

[leeoniya]

@grafana/explore-squad has been kind enough to fix the Explore snafu for us in #75587 🎉 , so let's see if this PR sticks this time 😅