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; background: string;
padding: number; padding: number;
}; };
sidemenu: {
width: number;
};
} }
export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents { export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
@ -76,5 +79,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
overlay: { overlay: {
background: colors.mode === 'dark' ? 'rgba(0, 0, 0, 0.45)' : 'rgba(208, 209, 211, 0.24)', 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'; import { GrafanaThemeV2 } from '@grafana/data';
export function getPageStyles(theme: GrafanaThemeV2) { export function getPageStyles(theme: GrafanaThemeV2) {
const maxWidthBreakpoint =
theme.breakpoints.values.xxl + theme.spacing.gridSize * 2 + theme.components.sidemenu.width;
return css` return css`
.grafana-app { .grafana-app {
display: flex; display: flex;
@ -47,7 +50,7 @@ export function getPageStyles(theme: GrafanaThemeV2) {
margin: ${theme.spacing(0, 2)}; 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; max-width: ${theme.breakpoints.values.xxl}px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;