From 4e4cffe6a341f95d5bac3f9d1031c23925bbd1d1 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 21 Feb 2026 09:39:37 +0100
Subject: [PATCH] fix: ensure editor has full width regardless of title/content
 length

The BlockNote editor container (.bn-container) had no explicit width,
so it sized based on content. With short or empty document titles,
the editor collapsed to a very small width.

Fix: set width: 100% on .bn-container and .bn-editor so the editor
always fills available space. Added margin: 0 auto on .bn-editor to
keep the 760px text column centered.

Also adds an E2E test verifying editor width stays above 300px.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 e2e/editor-min-width.spec.ts | 33 +++++++++++++++++++++++++++++++++
 src/components/Editor.css    |  3 +++
 2 files changed, 36 insertions(+)
 create mode 100644 e2e/editor-min-width.spec.ts

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;
 }
 
 /* =============================================