IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PageLayout: Fixes max-width breakpoint so that it triggers only when there is room for margin+ (#33558)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-04-30 12:08:02 +02:00 committed by GitHub
parent 696a6ecd1e
commit c0d28d9ed7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-data/src/themes/createComponents.ts
View File

@ -36,6 +36,9 @@ export interface ThemeComponents {
background: string;
padding: number;
};
sidemenu: {
width: number;
};
}
export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@ -76,5 +79,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
overlay: {
background: colors.mode === 'dark' ? 'rgba(0, 0, 0, 0.45)' : 'rgba(208, 209, 211, 0.24)',
},
sidemenu: {
width: 60,
},
};
}

5
packages/grafana-ui/src/themes/GlobalStyles/page.ts
View File

@ -2,6 +2,9 @@ import { css } from '@emotion/react';
import { GrafanaThemeV2 } from '@grafana/data';
export function getPageStyles(theme: GrafanaThemeV2) {
const maxWidthBreakpoint =
theme.breakpoints.values.xxl + theme.spacing.gridSize * 2 + theme.components.sidemenu.width;
return css`
.grafana-app {
display: flex;
@ -47,7 +50,7 @@ export function getPageStyles(theme: GrafanaThemeV2) {
margin: ${theme.spacing(0, 2)};
}
@media (min-width: ${theme.breakpoints.values.xxl + theme.spacing.gridSize * 2}px) {
@media (min-width: ${maxWidthBreakpoint}px) {
max-width: ${theme.breakpoints.values.xxl}px;
margin-left: auto;
margin-right: auto;