From 1bffc1f4ad5c3aa23d7c3a27b4b4fab2aa7d306c Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 19 Apr 2022 04:49:03 -0500
Subject: [PATCH] prevent horizontal scrollbar on firefox during expand
 animation (#47758) (#47869)

(cherry picked from commit bb5f77703ca8682ec6261cc127dc515436816da0)

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 public/app/core/components/NavBar/Next/NavBarMenu.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index 224e32ff66e..00e40a6e5f1 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -147,6 +147,10 @@ const getAnimStyles = (theme: GrafanaTheme2, animationDuration: number) => {
   const overlayTransition = {
     ...commonTransition,
     transitionProperty: 'background-color, box-shadow, width',
+    // this is needed to prevent a horizontal scrollbar during the animation on firefox
+    '.scrollbar-view': {
+      overflow: 'hidden !important',
+    },
   };
 
   const backdropTransition = {