Need to export more controls for panels/UI components

[kmaharshi213]

Hello! I have a somewhat generic question with specific examples. Apologies if it is too obvious, since I am new to UI development.

Background: In several places it seems that the only non-hacky way to update a certain style option for a UI component would be to make a child class of that component, create a new renderer with new CSS and then use that new class. Would it be possible expose a way to more easily override style? Or maybe I am missing something - what is the recommended way for overriding the CSS styling of a container within a Scenes component?

Examples:

0. I would like to remove the header padding of a stat/gauge when there is no title set. Otherwise it seems to take up white space. I found the PanelTimeRange class mimics the "Hide Time Info" setting in Grafana. Could such functionality be exposed as part of a package?

1. A div element with class="css-<....>-page-content" is generated for my main SceneAppPage. I want to change the background-color of this div element in particular. This is what the style for my main page looks like:

const getStyles = (theme: GrafanaTheme2) => ({ container: css display: flex; flex-grow: 1; height: 100%; , });

2. I have a VariableValueSelector dropdown. I want the dropdown list's boxes to grow around the text instead of cutting off long strings. I believe this component is using the react-select-2-listbox. How could I override the styling to set the field size to stretch?

[torkelo]

@kmaharshi213

A div element with class="css-<....>-page-content" is generated for my main SceneAppPage. I want to change the background-color of this div element in particular. This is what the style for my main page looks like:

this would break the design system so we do not allow that.

I have a VariableValueSelector dropdown. I want the dropdown list's boxes to grow around the text instead of cutting off long strings

This Select component is in the main Grafana repo, we are happy to take contributions.

You could try to disable virtualized list, it could help with the auto sizing but not sure

[torkelo]

@kmaharshi213

I would like to remove the header padding of a stat/gauge when there is no title set

set hoverHeader to true, then there will not be any header space

[kmaharshi213]

this would break the design system so we do not allow that.

Thanks @torkelo! Those comments really help. And fair, that makes sense. Do you happen to then have any tips or tricks for how I could fix this issue below? The background-color issue is small but really breaks the visual experience:

Basically, we have a long page with a bunch of panels. However, it looks like the main SceneAppPage has a fixed height for the background and a fixed color. So it shows up like so behind some of the panels.

How could I make the "Scene App Page Background" blend in OR make it flexibly adapt and grow to the overall panels' height?

Thanks a lot again!

[sblack79]

Looking for a resolution for this same issue

[sblack79]

@torkelo if you could take another look at this I would be appreciative