Dashboard: Overflow and z-index adjustments #75597
Conversation
leeoniya
requested review from
tskarhed and
ashharrison90
and removed request for
a team
| // matches .react-grid-item styles in _dashboard_grid.scss to ensure any contained tooltips occlude adjacent panels | ||
| '&:hover, &:active, &:focus': { | ||
| zIndex: 999, | ||
| }, |
There was a problem hiding this comment.
this handles the case then the panel is not in a grid, such as via PanelRenderer. logically matches the changes in https://github.com/grafana/grafana/pull/75382/files
There was a problem hiding this comment.
🤔 it seems this change conflicts with the ability to resize the panel using drag a drop.
NotPossibleToResize.mp4
There was a problem hiding this comment.
ah, good catch. i wonder what the z-index is of that drag handle 🤔
| '> *': { | ||
| zIndex: 0, | ||
| }, |
There was a problem hiding this comment.
this prevents tooltips (even with zIndex of 1040) from going under things like RadioButtonGroup such as those in the Explore graph header, where the options have explicit z-index of 1 or 3. we also have explicit z-index on form Input elements which makes them render over the tooltip when it overlaps an adjacent panel.
here's the problem this solves (this is with the new tooltip approach which is portalled into the panel content or the viz itself instead of the global portal):
| @@ -141,6 +142,9 @@ const getStyles = (theme: GrafanaTheme2, hasSplit: boolean) => { | |||
| `; | |||
|
|
|||
| return { | |||
| splitPane: css` | |||
| overflow: visible !important; | |||
There was a problem hiding this comment.
in panel edit, this allows the tooltip to exit the viz SplitPane and render on top of the options sidebar.
i have not found this to have any adverse effects, but could use another pair of 👀
without this change:
😢 unfortunately, it doesnt have the desired effect in Explore due to the additional layers of various overflow: hidden/scroll/auto rules from react-custom-scrollbars. this will be solved differently in another PR
leeoniya
added
no-backport
|
to me this works also in Explore (Chrome, FF - mac), is #75597 (comment) still relevant? Screen.Recording.2023-10-05.at.12.17.01.movthe only "weird" thing is the scrollbar appearing above the tooltip (which doesn't happen in main). |
There was a problem hiding this comment.
Hey @leeoniya 👋🏾 ,
I double-checked the issue regarding drag and drop and did additional testing. Besides Gio's comment, I could not find anything else 🏅
P.S I left a minor comment :)
| @@ -13,6 +13,8 @@ | |||
| &:hover { | |||
| .react-resizable-handle { | |||
| visibility: visible; | |||
| // above other panels, but below lowest pre-defined index in zIndex.ts | |||
| z-index: 999; | |||
There was a problem hiding this comment.
Do you think we would benefit from defining this z-index value in zIndex.ts? It seems that the value is context-dependent, and I am concerned that if that file changes its values, this element will no longer be below the lowest pre-defined index.
There was a problem hiding this comment.
i wanted to put it there, but how do we import it into scss files? 🤔
There was a problem hiding this comment.
🤔 that's a great question, it seems we already do that in other places https://github.com/grafana/grafana/blob/main/public/sass/components/_dashboard_settings.scss#L9, we are mapping them here, but tbh I am not very familiar with the whole themes
There was a problem hiding this comment.
ah, nice. i'll do that then 👍
@Elfo404 yes it's still relevant (though i cannot repro it in Linux/Chrome). unfortunately i dont think this can be fixed easily without touching the way we'll aim to solve this in a future PR (once we portal tooltips into panels) is to treat any btw, did you have to manually switch out the hardcoded tooltip mode to |
|
@leeoniya yep, there's no hidden setting :) |
this extracts some needed adjustments from the tooltips PR: #70872
the main thing we need to verify is that it doesn't break existing stuff. primarily overflow in things that which SplitPane and/or SplitPaneWrapper, such as Explore and Panel Edit.
specifically, this undoes the
overflow: hiddenstyle of the externalSplitPanecomponent. this allows a tooltip portalled into a panel within the SplitPane to render over the panel edit sidebar or into the adjacent (right) split pane in Explore.previous/related changes:
#75499
#75382
#75328