AppChrome: Add display flex to prevent multiple scrollbars (#88512)

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()} />
                           ))}

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,