diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index 16fb7ebc..7125399d 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -102,6 +102,7 @@ export async function publishToPublication({
             $type: "pub.leaflet.pages.canvas" as const,
             id: p.id,
             blocks: p.blocks as PubLeafletPagesCanvas.Block[],
+            display: p.display,
           };
         } else {
           return {
@@ -156,6 +157,7 @@ async function processBlocksToPages(
       | PubLeafletPagesLinearDocument.Block[]
       | PubLeafletPagesCanvas.Block[];
     type: "doc" | "canvas";
+    display?: { narrowWidth?: boolean };
   }[] = [];
 
   let firstEntity = scan.eav(root_entity, "root/page")?.[0];
@@ -248,10 +250,13 @@ async function processBlocksToPages(
 
       if (pageType?.data.value === "canvas") {
         let canvasBlocks = await canvasBlocksToRecord(page.data.value);
+        let narrowWidth = scan.eav(page.data.value, "canvas/narrow-width")?.[0]
+          ?.data.value;
         pages.push({
           id: page.data.value,
           blocks: canvasBlocks,
           type: "canvas",
+          display: narrowWidth ? { narrowWidth: true } : undefined,
         });
       } else {
         let blocks = getBlocksWithTypeLocal(facts, page.data.value);
diff --git a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
index 182516f6..34d2baba 100644
--- a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
@@ -25,6 +25,7 @@ export function CanvasPage({
   pageOptions,
   fullPageScroll,
   pages,
+  display,
 }: {
   document_uri: string;
   document: PostPageData;
@@ -39,6 +40,7 @@ export function CanvasPage({
   pageOptions?: React.ReactNode;
   fullPageScroll: boolean;
   pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+  display?: { narrowWidth?: boolean };
 }) {
   let hasPageBackground = !!pubRecord.theme?.showPageBackground;
 
@@ -50,6 +52,7 @@ export function CanvasPage({
       id={pageId ? `post-page-${pageId}` : "post-page"}
       drawerOpen={false}
       pageOptions={pageOptions}
+      canvasNarrow={display?.narrowWidth}
     >
       <CanvasContent
         blocks={blocks}
@@ -58,6 +61,7 @@ export function CanvasPage({
         bskyPostData={bskyPostData}
         pageId={pageId}
         pages={pages}
+        narrowWidth={display?.narrowWidth}
       />
     </PageWrapper>
   );
@@ -70,6 +74,7 @@ function CanvasContent({
   bskyPostData,
   pageId,
   pages,
+  narrowWidth,
 }: {
   blocks: PubLeafletPagesCanvas.Block[];
   did: string;
@@ -77,17 +82,27 @@ function CanvasContent({
   bskyPostData: AppBskyFeedDefs.PostView[];
   pageId?: string;
   pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+  narrowWidth?: boolean;
 }) {
   let height = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y), 0) : 0;
 
+  // Calculate the required width based on the furthest positioned element
+  let width =
+    narrowWidth && blocks.length > 0
+      ? Math.max(...blocks.map((b) => b.x + b.width)) + 32 // Add padding
+      : 1272;
+
   return (
-    <div className="canvasWrapper h-full w-fit overflow-y-scroll">
+    <div
+      className={`canvasWrapper h-full ${narrowWidth ? "w-full overflow-auto" : "w-fit overflow-y-scroll"}`}
+    >
       <div
         style={{
           minHeight: height + 512,
           contain: "size layout paint",
+          width: narrowWidth ? width : undefined,
         }}
-        className="relative h-full w-[1272px]"
+        className={`relative h-full ${narrowWidth ? "min-w-full" : "w-[1272px]"}`}
       >
         <CanvasBackground />
         {blocks
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index 11f6b39d..7ddf210b 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -189,6 +189,7 @@ export function PostPages({
                 document_uri={document_uri}
                 pageId={page.id}
                 pages={record.pages as PubLeafletPagesLinearDocument.Main[]}
+                display={(page as PubLeafletPagesCanvas.Main).display}
                 pageOptions={
                   <PageOptions
                     onClick={() => closePage(page?.id!)}
diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts
index e90f27f7..8a3d1c3c 100644
--- a/lexicons/api/lexicons.ts
+++ b/lexicons/api/lexicons.ts
@@ -1455,6 +1455,18 @@ export const schemaDict = {
               ref: 'lex:pub.leaflet.pages.canvas#block',
             },
           },
+          display: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.pages.canvas#display',
+          },
+        },
+      },
+      display: {
+        type: 'object',
+        properties: {
+          narrowWidth: {
+            type: 'boolean',
+          },
         },
       },
       block: {
diff --git a/lexicons/api/types/pub/leaflet/pages/canvas.ts b/lexicons/api/types/pub/leaflet/pages/canvas.ts
index da5a3f21..7e93e56c 100644
--- a/lexicons/api/types/pub/leaflet/pages/canvas.ts
+++ b/lexicons/api/types/pub/leaflet/pages/canvas.ts
@@ -30,6 +30,7 @@ export interface Main {
   $type?: 'pub.leaflet.pages.canvas'
   id?: string
   blocks: Block[]
+  display?: Display
 }
 
 const hashMain = 'main'
@@ -42,6 +43,21 @@ export function validateMain<V>(v: V) {
   return validate<Main & V>(v, id, hashMain)
 }
 
+export interface Display {
+  $type?: 'pub.leaflet.pages.canvas#display'
+  narrowWidth?: boolean
+}
+
+const hashDisplay = 'display'
+
+export function isDisplay<V>(v: V) {
+  return is$typed(v, id, hashDisplay)
+}
+
+export function validateDisplay<V>(v: V) {
+  return validate<Display & V>(v, id, hashDisplay)
+}
+
 export interface Block {
   $type?: 'pub.leaflet.pages.canvas#block'
   block:
diff --git a/lexicons/pub/leaflet/pages/canvas.json b/lexicons/pub/leaflet/pages/canvas.json
index 39cf031c..4206c84f 100644
--- a/lexicons/pub/leaflet/pages/canvas.json
+++ b/lexicons/pub/leaflet/pages/canvas.json
@@ -17,6 +17,18 @@
             "type": "ref",
             "ref": "#block"
           }
+        },
+        "display": {
+          "type": "ref",
+          "ref": "#display"
+        }
+      }
+    },
+    "display": {
+      "type": "object",
+      "properties": {
+        "narrowWidth": {
+          "type": "boolean"
         }
       }
     },
diff --git a/lexicons/src/pages/Canvas.ts b/lexicons/src/pages/Canvas.ts
index 5b64fd57..71332930 100644
--- a/lexicons/src/pages/Canvas.ts
+++ b/lexicons/src/pages/Canvas.ts
@@ -11,6 +11,13 @@ export const PubLeafletPagesCanvasDocument: LexiconDoc = {
       properties: {
         id: { type: "string" },
         blocks: { type: "array", items: { type: "ref", ref: "#block" } },
+        display: { type: "ref", ref: "#display" },
+      },
+    },
+    display: {
+      type: "object",
+      properties: {
+        narrowWidth: { type: "boolean" },
       },
     },
     block: {