Explore: Fixes explore page height and margin issues (#59865)

This commit is contained in:
Torkel Ödegaard 2022-12-13 08:22:33 +01:00 committed by GitHub
parent ef46761b9a
commit ac19b920f1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 31 deletions

View File

@ -37,7 +37,7 @@ const getStyles = (theme: GrafanaTheme2) => {
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: scroll;
overflow: hidden;
min-width: 600px;
& + & {
border-left: 1px dotted ${theme.colors.border.medium};

View File

@ -26,10 +26,8 @@ const styles = {
width: 100%;
flex-grow: 1;
min-height: 0;
`,
exploreWrapper: css`
display: flex;
height: 100%;
position: relative;
`,
};
@ -135,35 +133,34 @@ function Wrapper(props: GrafanaRouteComponentProps<{}, ExploreQueryParams>) {
return (
<div className={styles.pageScrollbarWrapper}>
<ExploreActions exploreIdLeft={ExploreId.left} exploreIdRight={ExploreId.right} />
<div className={styles.exploreWrapper}>
<SplitPaneWrapper
splitOrientation="vertical"
paneSize={widthCalc}
minSize={minWidth}
maxSize={minWidth * -1}
primary="second"
splitVisible={hasSplit}
paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column', overflowY: 'scroll' }}
onDragFinished={(size) => {
if (size) {
updateSplitSize(size);
}
}}
>
<SplitPaneWrapper
splitOrientation="vertical"
paneSize={widthCalc}
minSize={minWidth}
maxSize={minWidth * -1}
primary="second"
splitVisible={hasSplit}
paneStyle={{ overflow: 'auto', display: 'flex', flexDirection: 'column', overflowY: 'scroll' }}
onDragFinished={(size) => {
if (size) {
updateSplitSize(size);
}
}}
>
<ErrorBoundaryAlert style="page">
<ExplorePaneContainer exploreId={ExploreId.left} urlQuery={queryParams.left} eventBus={eventBus.current} />
</ErrorBoundaryAlert>
{hasSplit && (
<ErrorBoundaryAlert style="page">
<ExplorePaneContainer exploreId={ExploreId.left} urlQuery={queryParams.left} eventBus={eventBus.current} />
<ExplorePaneContainer
exploreId={ExploreId.right}
urlQuery={queryParams.right}
eventBus={eventBus.current}
/>
</ErrorBoundaryAlert>
{hasSplit && (
<ErrorBoundaryAlert style="page">
<ExplorePaneContainer
exploreId={ExploreId.right}
urlQuery={queryParams.right}
eventBus={eventBus.current}
/>
</ErrorBoundaryAlert>
)}
</SplitPaneWrapper>
</div>
)}
</SplitPaneWrapper>
</div>
);
}