fix: demo banner zIndex, display on top (#5776)

This PR does 2 things:
- Fixes the `DemoBanner` zIndex to be the same as the sticky banners (no
longer displays on top of modals)
- Moves the `Demo` wrapper to `App` instead of `MainLayout`, always
displaying the demo banner before other banners


![image](https://github.com/Unleash/unleash/assets/14320932/b115ee7f-26e0-468f-91aa-1f82335a6538)

frontend/src/component/App.tsx

@@ -23,6 +23,7 @@ import { InitialRedirect } from './InitialRedirect';
 import { InternalBanners } from './banners/internalBanners/InternalBanners';
 import { ExternalBanners } from './banners/externalBanners/ExternalBanners';
 import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
+import { Demo } from './demo/Demo';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -59,6 +60,7 @@ export const App = () => {
                                 condition={!hasFetchedAuth}
                                 show={<Loader />}
                                 elseShow={
+                                    <Demo>
                                         <>
                                             <ConditionallyRender
                                                 condition={Boolean(
@@ -76,7 +78,9 @@ export const App = () => {
                                                         (route) => (
                                                             <Route
                                                                 key={route.path}
-                                                            path={route.path}
+                                                                path={
+                                                                    route.path
+                                                                }
                                                                 element={
                                                                     <LayoutPicker
                                                                         isStandalone={
@@ -111,6 +115,7 @@ export const App = () => {
                                                 <SplashPageRedirect />
                                             </StyledContainer>
                                         </>
+                                    </Demo>
                                 }
                             />
                         </Suspense>

frontend/src/component/demo/DemoBanner/DemoBanner.tsx

@@ -3,7 +3,7 @@ import { Sticky } from 'component/common/Sticky/Sticky';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledBanner = styled(Sticky)(({ theme }) => ({
-    zIndex: theme.zIndex.sticky,
+    zIndex: theme.zIndex.sticky - 100,
     display: 'flex',
     gap: theme.spacing(1),
     justifyContent: 'center',

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -14,7 +14,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
-import { Demo } from 'component/demo/Demo';
 import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IMainLayoutProps {
@@ -111,8 +110,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
         return (
             <>
                 <SkipNavLink />
-                <Demo>
-                    <>
                 <Header />
                 <SkipNavTarget />
                 <MainLayoutContainer>
@@ -122,18 +119,9 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                 projectId &&
                                     isChangeRequestConfiguredInAnyEnv(),
                             )}
-                                    show={
+                            show={<DraftBanner project={projectId || ''} />}
-                                        <DraftBanner
-                                            project={projectId || ''}
                         />
-                                    }
+                        <StyledMainLayoutContent item xs={12} sm={12} my={2}>
-                                />
-                                <StyledMainLayoutContent
-                                    item
-                                    xs={12}
-                                    sm={12}
-                                    my={2}
-                                >
                             <MainLayoutContentContainer ref={ref}>
                                 <BreadcrumbNav />
                                 <Proclamation toast={uiConfig.toast} />
@@ -159,8 +147,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                     <Footer />
                 </MainLayoutContainer>
             </>
-                </Demo>
-            </>
         );
     },
 );