From 66e29b70b85eee64f1d31b3c4e30e4b8ba752cf0 Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Fri, 20 Mar 2026 20:03:26 +0100
Subject: [PATCH] fix: match TitleField font-size/weight to BlockNote H1 and
 fix left alignment

TitleField now uses var(--headings-h1-font-size/weight/line-height/letter-spacing)
instead of hardcoded 28px, matching the editor H1 exactly. Added margin-left: 8px
to align with BlockNote's bn-block-content offset. Fixed bn-editor max-width to
use the same CSS var as the title-section for consistent horizontal alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Editor.css                 | 10 +++++----
 tests/smoke/title-field-alignment.spec.ts | 25 +++++++++++++++++++++++
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/Editor.css b/src/components/Editor.css
index 97722af9..8791d5c5 100644
--- a/src/components/Editor.css
+++ b/src/components/Editor.css
@@ -96,7 +96,7 @@
 .editor__blocknote-container .bn-editor {
   width: 100%;
   padding: 20px 40px;
-  max-width: 760px;
+  max-width: var(--editor-max-width, 760px);
   margin: 0 auto;
 }
 
@@ -282,11 +282,13 @@
   border: none;
   outline: none;
   background: transparent;
-  font-size: var(--editor-title-size, 28px);
-  font-weight: 700;
-  line-height: 1.2;
+  font-size: var(--headings-h1-font-size);
+  font-weight: var(--headings-h1-font-weight);
+  line-height: var(--headings-h1-line-height);
+  letter-spacing: var(--headings-h1-letter-spacing);
   color: var(--foreground);
   padding: 0;
+  margin-left: 8px;
 }
 
 .title-field__input::placeholder {
diff --git a/tests/smoke/title-field-alignment.spec.ts b/tests/smoke/title-field-alignment.spec.ts
index 8129d913..5035155c 100644
--- a/tests/smoke/title-field-alignment.spec.ts
+++ b/tests/smoke/title-field-alignment.spec.ts
@@ -54,4 +54,29 @@ test.describe('TitleField alignment and separator', () => {
     // Both should have the same left edge (within 2px tolerance)
     expect(Math.abs(titleBox!.x - editorBox!.x)).toBeLessThanOrEqual(2)
   })
+
+  test('title field uses H1 CSS variables for font styling', async ({ page }) => {
+    // Verify the title-field__input element references the H1 heading CSS vars
+    const usesH1Vars = await page.evaluate(() => {
+      const sheets = Array.from(document.styleSheets)
+      for (const sheet of sheets) {
+        try {
+          for (const rule of Array.from(sheet.cssRules)) {
+            if (rule instanceof CSSStyleRule && rule.selectorText === '.title-field__input') {
+              const fontSize = rule.style.getPropertyValue('font-size')
+              const fontWeight = rule.style.getPropertyValue('font-weight')
+              return {
+                fontSize: fontSize.includes('--headings-h1-font-size'),
+                fontWeight: fontWeight.includes('--headings-h1-font-weight'),
+              }
+            }
+          }
+        } catch { /* cross-origin sheet */ }
+      }
+      return { fontSize: false, fontWeight: false }
+    })
+
+    expect(usesH1Vars.fontSize).toBe(true)
+    expect(usesH1Vars.fontWeight).toBe(true)
+  })
 })