From 5ce93248010cfe01d3d472d7f9184ef5e9f35724 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 19 Aug 2024 16:59:46 +0100
Subject: [PATCH] fix nav border when bodyscrolling with sticky variables
 (#92087)

* fix nav border when bodyscrolling with sticky variables

* better fix
---
 public/app/core/components/AppChrome/AppChrome.tsx     | 1 +
 public/app/core/components/AppChrome/AppChromeMenu.tsx | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index b23be388515..de24b3fd5be 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -161,6 +161,7 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden: boolean) => {
         background: theme.colors.background.primary,
         borderRight: `1px solid ${theme.colors.border.weak}`,
         display: 'none',
+        width: MENU_WIDTH,
 
         [theme.breakpoints.up('xl')]: {
           display: 'block',
diff --git a/public/app/core/components/AppChrome/AppChromeMenu.tsx b/public/app/core/components/AppChrome/AppChromeMenu.tsx
index 8c3f456193b..fb670aff321 100644
--- a/public/app/core/components/AppChrome/AppChromeMenu.tsx
+++ b/public/app/core/components/AppChrome/AppChromeMenu.tsx
@@ -104,12 +104,10 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
       position: 'fixed',
       top: searchBarHidden ? 0 : TOP_BAR_LEVEL_HEIGHT,
       backgroundColor: theme.colors.background.primary,
-      boxSizing: 'content-box',
       flex: '1 1 0',
 
       [theme.breakpoints.up('md')]: {
         right: 'unset',
-        borderRight: `1px solid ${theme.colors.border.weak}`,
         top: topPosition,
       },
     }),
@@ -151,6 +149,7 @@ const getAnimStyles = (theme: GrafanaTheme2, animationDuration: number) => {
   const overlayOpen = {
     width: '100%',
     [theme.breakpoints.up('md')]: {
+      borderRight: `1px solid ${theme.colors.border.weak}`,
       boxShadow: theme.shadows.z3,
       width: MENU_WIDTH,
     },