From c2dd44bc5aa4ebda8636ad04f1a671b1356c1045 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Thu, 6 Jun 2024 15:34:28 +0100
Subject: [PATCH] AppChrome: Add display flex to prevent multiple scrollbars
 (#88512)

---
 public/app/AppWrapper.tsx                          | 12 +++++++-----
 public/app/core/components/AppChrome/AppChrome.tsx |  2 ++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx
index 6a527baa769..1e785c2cd4a 100644
--- a/public/app/AppWrapper.tsx
+++ b/public/app/AppWrapper.tsx
@@ -5,7 +5,7 @@ import { Router, Redirect, Switch, RouteComponentProps } from 'react-router-dom'
 import { CompatRouter, CompatRoute } from 'react-router-dom-v5-compat';
 
 import { config, locationService, navigationLogger, reportInteraction } from '@grafana/runtime';
-import { ErrorBoundaryAlert, GlobalStyles, ModalRoot, PortalContainer } from '@grafana/ui';
+import { ErrorBoundaryAlert, GlobalStyles, ModalRoot, PortalContainer, Stack } from '@grafana/ui';
 import { getAppRoutes } from 'app/routes/routes';
 import { store } from 'app/store/store';
 
@@ -109,12 +109,14 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                       <GlobalStyles />
                       <div className="grafana-app">
                         <AppChrome>
-                          {pageBanners.map((Banner, index) => (
-                            <Banner key={index.toString()} />
-                          ))}
                           <AngularRoot />
                           <AppNotificationList />
-                          {ready && this.renderRoutes()}
+                          <Stack gap={0} grow={1} direction="column">
+                            {pageBanners.map((Banner, index) => (
+                              <Banner key={index.toString()} />
+                            ))}
+                            {ready && this.renderRoutes()}
+                          </Stack>
                           {bodyRenderHooks.map((Hook, index) => (
                             <Hook key={index.toString()} />
                           ))}
diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index 6dcfe645b03..617b56cdae8 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -167,6 +167,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     pageContainer: css({
       label: 'page-container',
+      display: 'flex',
+      flexDirection: 'column',
       flexGrow: 1,
       minHeight: 0,
       minWidth: 0,