diff --git a/package-lock.json b/package-lock.json
index fcae58e..f8e13a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2098,9 +2098,9 @@
       }
     },
     "node_modules/hono": {
-      "version": "4.12.18",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.18.tgz",
-      "integrity": "sha512-RWzP96k/yv0PQfyXnWjs6zot20TqfpfsNXhOnev8d1InAxubW93L11/oNUc3tQqn2G0bSdAOBpX+2uDFHV7kdQ==",
+      "version": "4.12.27",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.27.tgz",
+      "integrity": "sha512-1yrb/+w6HWQJrUCLkJ2IF5jNIPvvFkblV5RNOYl6bV+OA6p9GLcMpHFFGTosSvHvcAUibuUukRqhlYI4z32C7Q==",
       "license": "MIT",
       "engines": {
         "node": ">=16.9.0"
@@ -3363,9 +3363,9 @@
       "license": "ISC"
     },
     "node_modules/ws": {
-      "version": "8.20.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.1.tgz",
-      "integrity": "sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==",
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
diff --git a/web/src/components/markdown-artifact-editor.tsx b/web/src/components/markdown-artifact-editor.tsx
index cbc197b..ff13546 100644
--- a/web/src/components/markdown-artifact-editor.tsx
+++ b/web/src/components/markdown-artifact-editor.tsx
@@ -1,4 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react"
+import { FullScreenIcon, MinimizeScreenIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
 
 import { CrepeMarkdownEditor } from "@/components/crepe-markdown-editor"
 import type {
@@ -6,6 +8,8 @@ import type {
   MarkdownCommandFile,
   MarkdownCommandUser,
 } from "@/components/crepe-markdown-editor"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 import { sanitizeMarkdownLinks } from "@/lib/markdown-safety"
 
 export type MarkdownEditorMode = "rich" | "source"
@@ -177,6 +181,7 @@ function LoadedMarkdownArtifactEditor({
   const metadata = parseFrontmatter(content)
   const editorRef = useRef<CrepeMarkdownEditorHandle>(null)
   const [mode, setMode] = useState<MarkdownEditorMode>("rich")
+  const [wideEditor, setWideEditor] = useState(false)
   const [savedFullContent, setSavedFullContent] = useState(initialFullContent)
   const [draftFullContent, setDraftFullContent] = useState(initialFullContent)
   const [savedBody, setSavedBody] = useState(initialBody)
@@ -308,18 +313,33 @@ function LoadedMarkdownArtifactEditor({
 
   return (
     <section className="relative mx-auto flex min-h-full w-full flex-col">
-      <div className="markdown-editor mb-4">
-        <div className="flex max-w-full flex-wrap gap-x-2 gap-y-1 text-xs text-muted-foreground">
-          <span className="truncate">{path || title}</span>
-          {metadata.creator ? <span>{metadata.creator}</span> : null}
-          {metadata.created ? (
-            <span>{formatMetaDate(metadata.created)}</span>
-          ) : null}
+      <div className={cn("markdown-editor mb-4", wideEditor && "markdown-editor--wide")}>
+        <div className="flex max-w-full items-start justify-between gap-3">
+          <div className="flex min-w-0 flex-wrap gap-x-2 gap-y-1 text-xs text-muted-foreground">
+            <span className="truncate">{path || title}</span>
+            {metadata.creator ? <span>{metadata.creator}</span> : null}
+            {metadata.created ? (
+              <span>{formatMetaDate(metadata.created)}</span>
+            ) : null}
+          </div>
+          <Button
+            aria-label={wideEditor ? "Use standard width" : "Use full editor box width"}
+            aria-pressed={wideEditor}
+            className="shrink-0"
+            onClick={() => setWideEditor((current) => !current)}
+            size="sm"
+            title={wideEditor ? "Use standard width" : "Use full editor box width"}
+            type="button"
+            variant="outline"
+          >
+            <HugeiconsIcon icon={wideEditor ? MinimizeScreenIcon : FullScreenIcon} strokeWidth={2} />
+            <span className="hidden sm:inline">{wideEditor ? "Standard" : "Wide"}</span>
+          </Button>
         </div>
       </div>
 
       {mode === "source" ? (
-        <div className="markdown-editor markdown-editor--fill">
+        <div className={cn("markdown-editor markdown-editor--fill", wideEditor && "markdown-editor--wide")}>
           <textarea
             className="markdown-source-editor min-h-[60vh] w-full resize-none overflow-hidden bg-transparent pt-0 pb-4 font-mono text-sm leading-7 text-foreground outline-none placeholder:text-muted-foreground"
             disabled={isSaving}
@@ -330,7 +350,7 @@ function LoadedMarkdownArtifactEditor({
           />
         </div>
       ) : (
-        <div className="markdown-editor">
+        <div className={cn("markdown-editor", wideEditor && "markdown-editor--wide")}>
           <CrepeMarkdownEditor
             ref={editorRef}
             className="devsync-crepe-editor--tall"
diff --git a/web/src/styles/milkdown-theme.css b/web/src/styles/milkdown-theme.css
index 5478564..0c646c9 100644
--- a/web/src/styles/milkdown-theme.css
+++ b/web/src/styles/milkdown-theme.css
@@ -199,6 +199,13 @@
   width: 100%;
 }
 
+.markdown-editor--wide {
+  --markdown-side-gutter: 1.5rem;
+
+  width: 100%;
+  max-width: none;
+}
+
 .markdown-editor--fill .markdown-source-editor {
   min-height: 100%;
 }