PanelEdit: Fixes resize pane border and spacing issues #56190
Conversation
torkelo
requested review from
a team,
axelavargas and
kaydelaney
and removed request for
a team
|
Drone build failed: https://drone.grafana.net/grafana/grafana-enterprise/35922 |
| resizerV: cx( | ||
| resizer, | ||
| css` | ||
| cursor: col-resize; | ||
| width: ${paneSpacing}; | ||
|
|
||
| &::before { | ||
| border-right: 1px solid transparent; | ||
| height: 100%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| } | ||
|
|
||
| &::after { | ||
| height: 200px; | ||
| width: 4px; | ||
| } | ||
| ` | ||
| ), |
There was a problem hiding this comment.
I think adding this back and removing SplitView and figuring out how to make SplitPaneWrapper more generic might be one path forward? or creating a standalone VerticalSplitView for explore
There was a problem hiding this comment.
Ox's thought was that a vertical split view was the core component, and dashboard edit which has vertical and horizontal would be in features/dashboard. Then both explore and dashboards use the core vertical split view.
| @@ -83,7 +83,6 @@ export const SplitView = ({ uiState: { rightPaneSize }, children, minSize = 200, | |||
| minSize={minSize} | |||
| maxSize={width - minSize} | |||
| resizerClassName={useStyles2(getResizerStyles(hasSplit))} | |||
| paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column', overflowY: 'scroll' }} | |||
There was a problem hiding this comment.
this overflowY is causing double right side spacing in Explore as well (and a lot of unnecessary scroll containers, as Explore.tsx already has overflow: scroll in it's container style)
Example of explore right side padding is 2x what it should be
There was a problem hiding this comment.
Created #56213 to work on this
There was a problem hiding this comment.
@gelicia please help in this PR, needs to be fixed asap so we can backport this in 9.2 stable to we don't ship 9.2 with these bugs in panel edit and explore
There was a problem hiding this comment.
@torkelo The team discussed this and decided the best bet is to revert the split resize PRs so we can work on this outside of the release. We will be doing that shortly.
torkelo
changed the title
#54420 broke 3 things in panel edit (2 fixed so far in this PR) it also duplicated the resizer styling and the callbacks so that it's now something we have to maintain in two places (SplitView and SplitViewWrapper), that does not feel ideal.
Below you see the border (should not be there), and the left side space is not equal to right side (should be 16px spacing between panes but it's 24)
