fix: title H1 layout — no emoji gap, add-icon above title, larger font

- Remove reserved left space when note has no emoji icon (conditional render)
- Move "Add icon" button above the title row (Notion-style hover reveal)
- Increase title font size to 32px and top padding to 32px for proper H1 weight
- Update smoke test to validate no-emoji layout and new hover target

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/Editor.css

@@ -183,7 +183,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding-top: 16px;
+  padding-top: 32px;
 }
 
 .title-section__separator {
@@ -209,10 +209,10 @@
 }
 
 .note-icon-button--active {
-  font-size: 32px;
-  line-height: 1.2;
+  font-size: 36px;
+  line-height: 1;
   transition: transform 0.1s;
-  margin-right: 8px;
+  margin-right: 10px;
 }
 
 .note-icon-button--active:hover:not(:disabled) {
@@ -227,9 +227,10 @@
   font-size: 13px;
   opacity: 0;
   transition: opacity 0.15s;
+  margin-top: 16px;
 }
 
-.note-icon-area:hover .note-icon-button--add,
+.title-section:hover .note-icon-button--add,
 .note-icon-button--add:focus-visible {
   opacity: 1;
 }
@@ -290,7 +291,7 @@
   border: none;
   outline: none;
   background: transparent;
-  font-size: var(--headings-h1-font-size, 28px);
+  font-size: var(--headings-h1-font-size, 32px);
   font-weight: var(--headings-h1-font-weight, 700);
   line-height: var(--headings-h1-line-height, 1.2);
   letter-spacing: var(--headings-h1-letter-spacing, -0.015em);

src/components/EditorContent.tsx

@@ -203,13 +203,23 @@ export function EditorContent({
       {showEditor && activeTab && (
         <div className="editor-scroll-area">
           <div className="title-section">
-            <div className="title-section__row">
+            {!emojiIcon && (
               <NoteIcon
-                icon={emojiIcon}
+                icon={null}
                 editable={!isTrashed}
                 onSetIcon={handleSetIcon}
                 onRemoveIcon={handleRemoveIcon}
               />
+            )}
+            <div className="title-section__row">
+              {emojiIcon && (
+                <NoteIcon
+                  icon={emojiIcon}
+                  editable={!isTrashed}
+                  onSetIcon={handleSetIcon}
+                  onRemoveIcon={handleRemoveIcon}
+                />
+              )}
               <TitleField
                 title={activeTab.entry.title}
                 filename={activeTab.entry.filename}

tests/smoke/title-emoji-inline.spec.ts

@@ -45,10 +45,23 @@ test.describe('Title H1 with inline emoji', () => {
     expect(fontWeight).toBeGreaterThanOrEqual(700)
   })
 
+  test('no reserved space for emoji when note has no icon', async ({ page }) => {
+    const titleRow = page.locator('.title-section__row')
+    await expect(titleRow).toBeVisible({ timeout: 3000 })
+
+    // When no emoji is set, icon-display should not be in the row
+    const iconInRow = titleRow.locator('[data-testid="note-icon-display"]')
+    await expect(iconInRow).toHaveCount(0)
+
+    // Title should be the first (and only significant) child in the row
+    const titleInput = titleRow.locator('[data-testid="title-field-input"]')
+    await expect(titleInput).toBeVisible()
+  })
+
   test('emoji icon and title are on the same horizontal line when icon present', async ({ page }) => {
-    // Add an icon via the "Add icon" button
-    const iconArea = page.locator('[data-testid="note-icon-area"]')
-    await iconArea.hover()
+    // Hover over the title section to reveal the "Add icon" button
+    const titleSection = page.locator('.title-section')
+    await titleSection.hover()
     await page.waitForTimeout(200)
 
     const addBtn = page.locator('[data-testid="note-icon-add"]')