diff --git a/packages/extension/src/content/overlay/NoteComposer.vue b/packages/extension/src/content/overlay/NoteComposer.vue
index 90f5460..2eb65f7 100644
--- a/packages/extension/src/content/overlay/NoteComposer.vue
+++ b/packages/extension/src/content/overlay/NoteComposer.vue
@@ -148,7 +148,7 @@
       </div>
 
       <div v-if="screenshot" class="composer-screenshot">
-        <AnnotationEditor :src="screenshot" v-model:shapes="shapes" editable />
+        <AnnotationEditor :src="screenshot" v-model:shapes="shapes" editable fit="contain" />
       </div>
       <div v-else class="composer-placeholder">Capturing screenshot…</div>
 
@@ -199,7 +199,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  width: min(560px, calc(100vw - 48px));
+  width: min(920px, calc(100vw - 48px));
   max-height: calc(100vh - 48px);
   overflow-y: auto;
   padding: 16px;
@@ -229,13 +229,11 @@
   color: var(--color-danger, #f7768e);
 }
 .composer-screenshot {
-  max-height: 320px;
-  overflow: hidden;
   border: 2px solid var(--color-border, #2f334d);
 }
+/* big drawing area: the whole screenshot visible at once, canvas contain-fit */
 .composer-screenshot :deep(.annotation-canvas-wrap) {
-  max-height: 300px;
-  overflow-y: auto;
+  height: 55vh;
 }
 .composer-placeholder {
   padding: 40px;
diff --git a/packages/extension/verify-region.mjs b/packages/extension/verify-region.mjs
index a7fa602..a719afd 100644
--- a/packages/extension/verify-region.mjs
+++ b/packages/extension/verify-region.mjs
@@ -89,6 +89,7 @@
 await page.mouse.move(mid.x + 500, mid.y + 400, { steps: 6 });
 await page.mouse.up();
 await page.waitForTimeout(1500); // composer mount
+await page.screenshot({ path: "/tmp/ltt-shots/20-composer-editor.png" });
 await page.keyboard.type("Region shot");
 await page.keyboard.press("Tab");
 await page.keyboard.type("cropped");
diff --git a/packages/ui/src/AnnotationEditor.vue b/packages/ui/src/AnnotationEditor.vue
index 84edea2..ae2c79e 100644
--- a/packages/ui/src/AnnotationEditor.vue
+++ b/packages/ui/src/AnnotationEditor.vue
@@ -11,8 +11,10 @@
     /** Vector shapes in screenshot-fraction coordinates. */
     shapes?: AnnotationShape[];
     editable?: boolean;
+    /** How the canvas fits its box: full container width (default) or contained inside it. */
+    fit?: "width" | "contain";
   }>(),
-  { shapes: () => [], editable: false }
+  { shapes: () => [], editable: false, fit: "width" }
 );
 
 const emit = defineEmits<{
@@ -154,7 +156,7 @@
 </script>
 
 <template>
-  <div ref="containerRef" class="annotation-editor">
+  <div ref="containerRef" class="annotation-editor" :class="{ 'is-contain': fit === 'contain' }">
     <div v-if="editable" class="annotation-toolbar">
       <div class="annotation-toolbar-group">
         <button
@@ -276,4 +278,24 @@
 .annotation-canvas.is-editable {
   cursor: crosshair;
 }
+/* contain mode: the editor fills its parent and the canvas fits inside
+   without cropping — used by the fullscreen editor overlay */
+.annotation-editor.is-contain {
+  height: 100%;
+  min-height: 0;
+}
+.annotation-editor.is-contain .annotation-canvas-wrap {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+}
+.annotation-editor.is-contain .annotation-canvas {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/packages/ui/src/ScreenshotViewer.vue b/packages/ui/src/ScreenshotViewer.vue
index 8d04d2e..f6827b9 100644
--- a/packages/ui/src/ScreenshotViewer.vue
+++ b/packages/ui/src/ScreenshotViewer.vue
@@ -35,6 +35,23 @@
   editing.value = true;
 }
 
+function cancelEdit() {
+  editing.value = false;
+}
+
+// Escape leaves the fullscreen editor
+function onEditorKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    event.preventDefault();
+    cancelEdit();
+  }
+}
+
+watch(editing, (on) => {
+  if (on) document.addEventListener("keydown", onEditorKeydown);
+  else document.removeEventListener("keydown", onEditorKeydown);
+});
+
 async function save() {
   saving.value = true;
   try {
@@ -195,33 +212,35 @@
   if (event.target === lightboxEl.value) closeLightbox();
 }
 
-onBeforeUnmount(closeLightbox);
+onBeforeUnmount(() => {
+  closeLightbox();
+  document.removeEventListener("keydown", onEditorKeydown);
+});
 </script>
 
 <template>
   <div class="screenshot-viewer">
-    <AnnotationEditor
-      v-if="editing"
-      :src="src"
-      v-model:shapes="draft"
-      editable
-    />
+    <div v-if="editing" class="editor-overlay">
+      <div class="editor-bar">
+        <button type="button" class="screenshot-btn" :disabled="saving" @click="save">
+          {{ saving ? props.labels?.saving ?? text.saving : props.labels?.save ?? text.save }}
+        </button>
+        <button type="button" class="screenshot-btn-ghost" @click="cancelEdit">
+          {{ props.labels?.cancel ?? text.cancel }}
+        </button>
+      </div>
+      <div class="editor-stage">
+        <AnnotationEditor :src="src" v-model:shapes="draft" editable fit="contain" />
+      </div>
+    </div>
     <div v-else class="screenshot-frame">
       <AnnotationEditor :src="src" :shapes="shapes ?? []" />
       <button type="button" class="screenshot-expand" :title="labels?.expand ?? 'Open fullscreen'" @click="openLightbox">
         <i class="ph ph-arrows-out" />
       </button>
     </div>
-    <div v-if="editable" class="screenshot-viewer-actions">
-      <template v-if="editing">
-        <button type="button" class="screenshot-btn" :disabled="saving" @click="save">
-          {{ saving ? props.labels?.saving ?? text.saving : props.labels?.save ?? text.save }}
-        </button>
-        <button type="button" class="screenshot-btn-ghost" @click="editing = false">
-          {{ props.labels?.cancel ?? text.cancel }}
-        </button>
-      </template>
-      <button v-else type="button" class="screenshot-btn-ghost" @click="startEdit">
+    <div v-if="editable && !editing" class="screenshot-viewer-actions">
+      <button type="button" class="screenshot-btn-ghost" @click="startEdit">
         <i class="ph ph-pen" /> {{ props.labels?.edit ?? text.edit }}
       </button>
     </div>
@@ -324,6 +343,29 @@
   border-color: var(--color-accent, #7aa2f7);
 }
 
+/* fullscreen editing overlay: big canvas, toolbar stays above it */
+.editor-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(10, 11, 16, 0.96);
+}
+.editor-bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.editor-stage {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: stretch;
+}
+
 .lightbox {
   position: fixed;
   inset: 0;
diff --git a/packages/web/verify-editor.mjs b/packages/web/verify-editor.mjs
new file mode 100644
index 0000000..0f69d56
--- /dev/null
+++ b/packages/web/verify-editor.mjs
@@ -0,0 +1,115 @@
+/** Verify the fullscreen annotation editor on the report page. */
+import { chromium } from "playwright-core";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { homedir } from "node:os";
+
+const root = dirname(fileURLToPath(import.meta.url));
+const SERVER = "http://localhost:8001";
+const WEB = "http://localhost:5173";
+const stamp = Date.now();
+const EMAIL = `editor-fs-${stamp}@example.com`;
+const PASSWORD = "editor-fs-pass";
+
+const executablePath = join(homedir(), ".cache/ms-playwright/chromium-1234/chrome-linux64/chrome");
+const browser = await chromium.launch({ executablePath, headless: true });
+
+async function api(path, options = {}) {
+  const r = await fetch(SERVER + path, options);
+  if (!r.ok) throw new Error(`API ${path} -> ${r.status}: ${await r.text()}`);
+  return r.json();
+}
+
+await api("/api/auth/register", {
+  method: "POST",
+  headers: { "Content-Type": "application/json" },
+  body: JSON.stringify({ nickname: `editor-fs-${stamp}`, email: EMAIL, password: PASSWORD }),
+});
+const login = await api("/api/auth/login", {
+  method: "POST",
+  headers: { "Content-Type": "application/json", "X-Client": "extension" },
+  body: JSON.stringify({ email: EMAIL, password: PASSWORD }),
+});
+const auth = { Authorization: `Bearer ${login.token}` };
+const project = await api("/api/projects", {
+  method: "POST",
+  headers: { "Content-Type": "application/json", ...auth },
+  body: JSON.stringify({ name: "Fullscreen Editor" }),
+});
+
+// a hi-res screenshot so the inline view would normally be small
+const maker = await browser.newPage({ viewport: { width: 1200, height: 800 }, deviceScaleFactor: 2 });
+await maker.setContent(`<body style="margin:0;background:#1f2335">
+  <h1 style="color:#c0caf5;font:700 48px monospace;padding:60px">Editor size test</h1></body>`);
+const png = await maker.screenshot({ path: "/tmp/ltt-shots/editor-src.png" });
+await maker.close();
+
+const form = new FormData();
+form.append("file", new Blob([png], { type: "image/png" }), "editor.png");
+const up = await api("/api/uploads", { method: "POST", headers: auth, body: form });
+const note = await api("/api/reports", {
+  method: "POST",
+  headers: { "Content-Type": "application/json", ...auth },
+  body: JSON.stringify({
+    project_id: project.id,
+    type: "element_note",
+    title: "Fullscreen editor",
+    environment: { user_agent: "verify", browser: "Chromium", os: "Linux", viewport: { w: 1200, h: 800 }, dpr: 2, language: "en" },
+    attachment_ids: [up.file_id],
+  }),
+});
+
+// sign in through the web UI (cookie session)
+const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+await page.goto(`${WEB}/login`);
+// GnLoginCard renders the email field as type="text"
+await page.locator("input.input").first().fill(EMAIL);
+await page.locator('input[type="password"]').fill(PASSWORD);
+await page.click("button[type=submit]");
+await page.waitForSelector("text=Fullscreen Editor", { timeout: 15000 });
+
+await page.goto(`${WEB}/r/${note.share_token}`);
+await page.waitForSelector(".screenshot-expand", { timeout: 15000 });
+await page.waitForTimeout(800);
+const inlineCanvas = await page.evaluate(() => {
+  const c = document.querySelector(".screenshot-frame canvas");
+  const r = c.getBoundingClientRect();
+  return { w: Math.round(r.width), h: Math.round(r.height) };
+});
+console.log("inline canvas:", JSON.stringify(inlineCanvas));
+
+await page.click(".screenshot-viewer-actions button");
+await page.waitForSelector(".editor-overlay canvas", { timeout: 5000 });
+await page.waitForTimeout(800);
+const overlay = await page.evaluate(() => {
+  const overlayEl = document.querySelector(".editor-overlay");
+  const o = overlayEl.getBoundingClientRect();
+  const c = document.querySelector(".editor-overlay canvas");
+  const r = c.getBoundingClientRect();
+  return {
+    overlay: { w: Math.round(o.width), h: Math.round(o.height) },
+    canvas: { w: Math.round(r.width), h: Math.round(r.height) },
+  };
+});
+console.log("editor overlay:", JSON.stringify(overlay));
+await page.screenshot({ path: "/tmp/ltt-shots/21-fullscreen-editor.png" });
+
+// draw a rect to confirm pointer input works on the big canvas
+const canvasBox = await page.locator(".editor-overlay canvas").boundingBox();
+await page.mouse.move(canvasBox.x + canvasBox.width * 0.2, canvasBox.y + canvasBox.height * 0.2);
+await page.mouse.down();
+await page.mouse.move(canvasBox.x + canvasBox.width * 0.7, canvasBox.y + canvasBox.height * 0.6, { steps: 5 });
+await page.mouse.up();
+await page.waitForTimeout(300);
+await page.screenshot({ path: "/tmp/ltt-shots/22-fullscreen-editor-drawn.png" });
+
+// Escape cancels back to the inline view
+await page.keyboard.press("Escape");
+await page.waitForSelector(".screenshot-frame canvas", { timeout: 5000 });
+const stillInline = await page.evaluate(() => !document.querySelector(".editor-overlay"));
+console.log("escape closed editor:", stillInline);
+
+const bigger = overlay.canvas.w > inlineCanvas.w && overlay.canvas.h > inlineCanvas.h;
+console.log(bigger ? "EDITOR BIGGER: OK" : "EDITOR NOT BIGGER");
+await browser.close();
+process.exitCode = bigger && stillInline ? 0 : 1;
\ No newline at end of file