diff --git a/e2e/editor-min-width.spec.ts b/e2e/editor-min-width.spec.ts
new file mode 100644
index 00000000..51b1365c
--- /dev/null
+++ b/e2e/editor-min-width.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test'
+
+test('editor panel has proper width regardless of title length', async ({ page }) => {
+  await page.goto('http://localhost:5204')
+  await page.waitForTimeout(1000)
+
+  // Click on a note with a short title from the note list
+  const noteItems = page.locator('.note-list__item')
+  const count = await noteItems.count()
+
+  if (count > 0) {
+    // Click the first note
+    await noteItems.first().click()
+    await page.waitForTimeout(500)
+
+    // Measure editor container width
+    const editorContainer = page.locator('.editor__blocknote-container')
+    const box = await editorContainer.boundingBox()
+
+    // The editor should have a reasonable width (at least 300px)
+    expect(box).toBeTruthy()
+    expect(box!.width).toBeGreaterThan(300)
+
+    // Screenshot for visual verification
+    await page.screenshot({ path: 'test-results/editor-min-width.png', fullPage: true })
+
+    // Also check that .bn-container fills the editor width
+    const bnContainer = page.locator('.editor__blocknote-container .bn-container')
+    const bnBox = await bnContainer.boundingBox()
+    expect(bnBox).toBeTruthy()
+    expect(bnBox!.width).toBeGreaterThan(300)
+  }
+})
diff --git a/src/components/Editor.css b/src/components/Editor.css
index dfe764b6..284866a5 100644
--- a/src/components/Editor.css
+++ b/src/components/Editor.css
@@ -24,6 +24,7 @@
 }
 
 .editor__blocknote-container .bn-container {
+  width: 100%;
   height: 100%;
   background: var(--bg-primary);
   color: var(--text-primary);
@@ -31,8 +32,10 @@
 }
 
 .editor__blocknote-container .bn-editor {
+  width: 100%;
   padding: 20px 40px;
   max-width: 760px;
+  margin: 0 auto;
 }
 
 /* =============================================