feat(ui): Improve not found view padding (#44795)

static/app/components/errors/notFound.tsx

@@ -7,7 +7,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 
 const NotFound = () => (
-  <NotFoundAlert type="error" showIcon>
+  <Alert type="error" showIcon>
     <Heading>{t('Page Not Found')}</Heading>
     <p>{t('The page you are looking for was not found.')}</p>
     <p>{t('You may wish to try the following:')}</p>
@@ -37,13 +37,9 @@ const NotFound = () => (
         link: <Link to="/" />,
       })}
     </p>
-  </NotFoundAlert>
+  </Alert>
 );
 
-const NotFoundAlert = styled(Alert)`
-  margin: ${space(3)} 0;
-`;
-
 const Heading = styled('h1')`
   font-size: ${p => p.theme.fontSizeLarge};
   line-height: 1.4;

static/app/views/routeNotFound.tsx

@@ -4,6 +4,7 @@ import * as Sentry from '@sentry/react';
 
 import NotFound from 'sentry/components/errors/notFound';
 import Footer from 'sentry/components/footer';
+import * as Layout from 'sentry/components/layouts/thirds';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import Sidebar from 'sentry/components/sidebar';
 import {t} from 'sentry/locale';
@@ -36,13 +37,9 @@ function RouteNotFound({router, location}: Props) {
     <SentryDocumentTitle title={t('Page Not Found')}>
       <div className="app">
         <Sidebar location={location} />
-        <div className="container">
-          <div className="content">
-            <section className="body">
-              <NotFound />
-            </section>
-          </div>
-        </div>
+        <Layout.Page withPadding>
+          <NotFound />
+        </Layout.Page>
         <Footer />
       </div>
     </SentryDocumentTitle>