fix: banner paddings

frontend/src/layout/navigation-3000/Navigation.scss

@@ -62,14 +62,6 @@
         flex-direction: column;
         height: 100vh;
     }
-
-    &.Navigation3000__scene--canvas {
-        --scene-padding: 0px;
-
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
 }
 
 // Navbar

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -54,8 +54,7 @@ export function Navigation({
                         'Navigation3000__scene',
                         // Hack - once we only have 3000 the "minimal" scenes should become "app-raw"
                         sceneConfig?.layout === 'app-raw' && 'Navigation3000__scene--raw',
-                        sceneConfig?.layout === 'app-raw-no-header' && 'Navigation3000__scene--raw-no-header',
-                        sceneConfig?.layout === 'app-canvas' && 'Navigation3000__scene--canvas'
+                        sceneConfig?.layout === 'app-raw-no-header' && 'Navigation3000__scene--raw-no-header'
                     )}
                 >
                     {!sceneConfig?.hideBillingNotice && <BillingAlertsV2 />}

frontend/src/layout/navigation/ProjectNotice.tsx

@@ -1,5 +1,6 @@
 import { IconGear, IconPlus } from '@posthog/icons'
 import { Spinner } from '@posthog/lemon-ui'
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { dayjs } from 'lib/dayjs'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
@@ -8,6 +9,7 @@ import { Link } from 'lib/lemon-ui/Link'
 import { useEffect, useState } from 'react'
 import { verifyEmailLogic } from 'scenes/authentication/signup/verify-email/verifyEmailLogic'
 import { organizationLogic } from 'scenes/organizationLogic'
+import { sceneLogic } from 'scenes/sceneLogic'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
@@ -58,6 +60,7 @@ export function ProjectNotice(): JSX.Element | null {
     const { closeProjectNotice } = useActions(navigationLogic)
     const { showInviteModal } = useActions(inviteLogic)
     const { requestVerificationLink } = useActions(verifyEmailLogic)
+    const { sceneConfig } = useValues(sceneLogic)
 
     if (!projectNoticeVariant) {
         return null
@@ -169,10 +172,13 @@ export function ProjectNotice(): JSX.Element | null {
 
     const relevantNotice = NOTICES[projectNoticeVariant]
 
+    const requiresHorizontalMargin =
+        sceneConfig?.layout && ['app-raw', 'app-raw-no-header'].includes(sceneConfig.layout)
+
     return (
         <LemonBanner
             type={relevantNotice.type || 'info'}
-            className="my-4"
+            className={clsx('my-4', requiresHorizontalMargin && 'mx-4')}
             action={relevantNotice.action}
             onClose={relevantNotice.closeable ? () => closeProjectNotice(projectNoticeVariant) : undefined}
         >

frontend/src/lib/components/BillingAlertsV2.tsx

@@ -1,14 +1,17 @@
+import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { router } from 'kea-router'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { useEffect, useState } from 'react'
 import { billingLogic } from 'scenes/billing/billingLogic'
+import { sceneLogic } from 'scenes/sceneLogic'
 import { urls } from 'scenes/urls'
 
 export function BillingAlertsV2(): JSX.Element | null {
     const { billingAlert } = useValues(billingLogic)
     const { reportBillingAlertShown, reportBillingAlertActionClicked } = useActions(billingLogic)
     const { currentLocation } = useValues(router)
+    const { sceneConfig } = useValues(sceneLogic)
     const [alertHidden, setAlertHidden] = useState(false)
 
     useEffect(() => {
@@ -29,6 +32,9 @@ export function BillingAlertsV2(): JSX.Element | null {
     const showButton =
         billingAlert.action || billingAlert.contactSupport || currentLocation.pathname !== urls.organizationBilling()
 
+    const requiresHorizontalMargin =
+        sceneConfig?.layout && ['app-raw', 'app-raw-no-header'].includes(sceneConfig.layout)
+
     const buttonProps = billingAlert.action
         ? billingAlert.action
         : billingAlert.contactSupport
@@ -44,7 +50,7 @@ export function BillingAlertsV2(): JSX.Element | null {
           }
 
     return (
-        <div className="my-4">
+        <div className={clsx('my-4', requiresHorizontalMargin && 'mx-4')}>
             <LemonBanner
                 type={billingAlert.status}
                 action={showButton ? buttonProps : undefined}

frontend/src/scenes/sceneTypes.ts

@@ -136,7 +136,7 @@ export interface SceneConfig {
      * If `plain`, there's no navigation present, and the scene has no padding.
      * @default 'app'
      */
-    layout?: 'app' | 'app-raw' | 'app-canvas' | 'app-container' | 'app-raw-no-header' | 'plain'
+    layout?: 'app' | 'app-raw' | 'app-container' | 'app-raw-no-header' | 'plain'
     /** Hides project notice (ProjectNotice.tsx). */
     hideProjectNotice?: boolean
     /** Hides billing notice (BillingAlertsV2.tsx). */