From c0d28d9ed7b7a2f6ea0487c48e4d22ecef32cd36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 30 Apr 2021 12:08:02 +0200
Subject: [PATCH] PageLayout: Fixes max-width breakpoint so that it triggers
 only when there is room for margin+ (#33558)

---
 packages/grafana-data/src/themes/createComponents.ts | 6 ++++++
 packages/grafana-ui/src/themes/GlobalStyles/page.ts  | 5 ++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index ea3cb1584f6..b9a7c60fc5e 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@@ -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,
+    },
   };
 }
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/page.ts b/packages/grafana-ui/src/themes/GlobalStyles/page.ts
index 9b0e5ee7663..b620d556d90 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/page.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/page.ts
@@ -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;