Navigation: Fix browse dashboards/scenes dashboards when bodyScrolling is enabled (#91479)

set explicit height (not min-height) so everything works in safari
This commit is contained in:
Ashley Harrison 2024-08-06 10:51:31 +02:00 committed by GitHub
parent 9300c1bbea
commit 2e3f48a49d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 12 deletions

View File

@ -12,7 +12,7 @@ export function getPageStyles(theme: GrafanaTheme2) {
? { ? {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
minHeight: '100vh', height: '100vh',
} }
: { : {
display: 'flex', display: 'flex',

View File

@ -4,6 +4,7 @@ import { useMedia } from 'react-use';
import { GrafanaTheme2, PageLayoutType } from '@grafana/data'; import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { config } from '@grafana/runtime';
import { SceneComponentProps } from '@grafana/scenes'; import { SceneComponentProps } from '@grafana/scenes';
import { CustomScrollbar, useStyles2, useTheme2 } from '@grafana/ui'; import { CustomScrollbar, useStyles2, useTheme2 } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page'; import { Page } from 'app/core/components/Page/Page';
@ -93,18 +94,24 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
pageContainer: css({ pageContainer: css(
display: 'grid', {
gridTemplateAreas: ` display: 'grid',
"panels"`, gridTemplateAreas: `
gridTemplateColumns: `1fr`, "panels"`,
gridTemplateRows: '1fr', gridTemplateColumns: `1fr`,
height: '100%', gridTemplateRows: '1fr',
[theme.breakpoints.down('sm')]: { height: '100%',
display: 'flex', [theme.breakpoints.down('sm')]: {
flexDirection: 'column', display: 'flex',
flexDirection: 'column',
},
}, },
}), config.featureToggles.bodyScrolling && {
position: 'absolute',
width: '100%',
}
),
pageContainerWithControls: css({ pageContainerWithControls: css({
gridTemplateAreas: ` gridTemplateAreas: `
"controls" "controls"