chore(3000): remove main-app-content

frontend/src/layout/ErrorBoundary/ErrorBoundary.scss

@@ -6,10 +6,6 @@
     background: var(--danger-highlight);
     border-radius: var(--radius);
 
-    .main-app-content > & {
-        margin: 1.5rem 0;
-    }
-
     h2 {
         margin-bottom: 0.75rem;
         font-weight: 600;

frontend/src/layout/navigation/Navigation.tsx

@@ -1,37 +1,9 @@
-import clsx from 'clsx'
-import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
-import { ReactNode } from 'react'
-import { SceneConfig } from 'scenes/sceneTypes'
-
-import { ProjectNotice } from './ProjectNotice'
 import { SideBar } from './SideBar/SideBar'
 
-export function Navigation({
-    children,
-    sceneConfig,
-}: {
-    children: ReactNode
-    sceneConfig: SceneConfig | null
-}): JSX.Element {
+export function Navigation(): JSX.Element {
     return (
-        <div className="h-screen flex flex-col">
-            <SideBar>
-                <div
-                    className={clsx(
-                        'main-app-content',
-                        sceneConfig?.layout === 'plain' && 'main-app-content--plain',
-                        sceneConfig?.layout === 'app-container' && 'main-app-content--container'
-                    )}
-                >
-                    {sceneConfig?.layout !== 'plain' && (
-                        <>
-                            <BillingAlertsV2 />
-                            {!sceneConfig?.hideProjectNotice && <ProjectNotice />}
-                        </>
-                    )}
-                    {children}
-                </div>
-            </SideBar>
-        </div>
+        <SideBar>
+            <div />
+        </SideBar>
     )
 }

frontend/src/styles/global.scss

@@ -452,36 +452,6 @@ input::-ms-clear {
     }
 }
 
-.main-app-content {
-    position: relative; // So that scene-level <SpinnerOverlay /> is positioned correctly.
-    flex: 1;
-    width: 100%;
-    min-width: 0;
-    padding: 0 1rem 1rem;
-    background-color: var(--bg-light);
-
-    &.main-app-content--plain {
-        padding: 0;
-    }
-
-    &.main-app-content--container {
-        align-self: center;
-        max-width: 72rem;
-
-        @include screen($xxl) {
-            max-width: 108rem;
-        }
-    }
-
-    @include screen($sm) {
-        padding: 0 1rem 2rem;
-    }
-
-    @include screen($lg) {
-        padding: 0 2rem 4rem;
-    }
-}
-
 // AntD overrrides, placed inside `body` to increase specifity (nicely avoiding the need for !important)
 body {
     // Until we have 3000 rolled out we fallback to standard colors

playwright/e2e-vrt/README.md

@@ -35,7 +35,7 @@ We're using Playwright to run visual regression tests against Storybook. To crea
 
     - Suggested Storybook container elements:
         - `#root` for components and
-        - `.main-app-content` for scenes
+        - `main` for scenes
 
 3. Generate the reference images (you need to have Storybook running locally, i.e. on the Docker host machine):
 

playwright/pages/storybook.ts

@@ -19,12 +19,10 @@ type ComponentScreenshotConfig = {
 
 export class StorybookStoryPage {
     readonly page: Page
-    readonly mainAppContent: Locator
     readonly storyRoot: Locator
 
     constructor(page: Page) {
         this.page = page
-        this.mainAppContent = page.locator('.main-app-content')
         this.storyRoot = page.locator('#storybook-root')
     }
 
@@ -41,10 +39,6 @@ export class StorybookStoryPage {
         await expect(this.page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 })
     }
 
-    async expectSceneScreenshot(): Promise<void> {
-        await expect(this.mainAppContent).toHaveScreenshot({ maxDiffPixelRatio: 0.01 })
-    }
-
     async expectComponentScreenshot({ pseudo } = {} as ComponentScreenshotConfig): Promise<void> {
         const pseudoClasses = Object.entries(pseudo || {}).flatMap(([state, enabled]) => {
             return enabled ? `pseudo-${PSEUDO_STATES[state]}` : []