[ui] Fix layout for global banner (#18817)

## Summary & Motivation

The global banner some users are seeing in Cloud is breaking the layout.
This is because the banner pushes the main content down below the edge
of the viewport.

To resolve this, modify the core layout component to accommodate the
banner by passing it as a prop.

## How I Tested These Changes

Force a banner to appear on the page. Click around throughout the app,
verify that pages render correctly and can be scrolled correctly as
well, including pages with virtualized tables and DAG views.

(cherry picked from commit c1eafcc)

js_modules/dagster-ui/packages/ui-core/src/app/App.tsx

@@ -5,7 +5,12 @@ import {LeftNav, LEFT_NAV_WIDTH} from '../nav/LeftNav';
 
 import {LayoutContext} from './LayoutProvider';
 
-export const App = (props: {children: React.ReactNode}) => {
+interface Props {
+  banner?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const App = ({banner, children}: Props) => {
   const {nav} = React.useContext(LayoutContext);
 
   const onClickMain = React.useCallback(() => {
@@ -18,7 +23,8 @@ export const App = (props: {children: React.ReactNode}) => {
     <Container>
       <LeftNav />
       <Main $smallScreen={nav.isSmallScreen} $navOpen={nav.isOpen} onClick={onClickMain}>
-        {props.children}
+        <div>{banner}</div>
+        <ChildContainer>{children}</ChildContainer>
       </Main>
     </Container>
   );
@@ -27,6 +33,8 @@ export const App = (props: {children: React.ReactNode}) => {
 const Main = styled.div<{$smallScreen: boolean; $navOpen: boolean}>`
   height: 100%;
   z-index: 1;
+  display: flex;
+  flex-direction: column;
 
   ${({$navOpen, $smallScreen}) => {
     if ($smallScreen || !$navOpen) {
@@ -47,3 +55,8 @@ const Container = styled.div`
   display: flex;
   height: calc(100% - 64px);
 `;
+
+const ChildContainer = styled.div`
+  height: 100%;
+  overflow: hidden;
+`;