diff --git a/ui/app.css b/ui/app.css
index a2aeccf5..a32bc496 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -308,6 +308,27 @@ select {
   letter-spacing: -0.01em;
 }
 
+main.pageContent {
+  margin: 0 auto;
+  min-width: 0;
+  padding: 44px 6rem 80px;
+  max-width: var(--notebook-width);
+}
+
+main.pageContent.dashboardLayout {
+  max-width: var(--dashboard-width);
+}
+
+/* Embedded contexts such as chat previews and screenshots provide their own width and padding. */
+main.pageContent.fullWidth {
+  max-width: none;
+  padding: 0;
+}
+
+main.pageContent > .page-title:first-child {
+  margin-top: 12px;
+}
+
 /* Embedded images in rendered markdown */
 .pageContent img {
   display: block;
diff --git a/ui/internal/LocalApp.svelte b/ui/internal/LocalApp.svelte
index c3dd760f..3b2b2557 100644
--- a/ui/internal/LocalApp.svelte
+++ b/ui/internal/LocalApp.svelte
@@ -105,7 +105,7 @@
     <!-- render nothing, tests fill in this element -->
   {:else if Page}
     {#if pageMeta.title}
-      <h1>{pageMeta.title}</h1>
+      <h1 class="page-title">{pageMeta.title}</h1>
     {/if}
     <Page />
   {:else if compileError}
@@ -122,17 +122,6 @@
 </main>
 
 <style>
-  main.pageContent {
-    margin: 0 auto;
-    min-width: 0;
-    padding: 44px 6rem 80px;
-    max-width: var(--notebook-width);
-  }
-
-  main.pageContent.dashboardLayout {
-    max-width: var(--dashboard-width);
-  }
-
   .page-error-heading { margin-top: 0; }
 
   main h1:first-child {