fix: align title section with editor body text and stabilize top margin

Apply theme CSS variables to the editor scroll area so the title section
uses the same max-width as the BlockNote editor. Add matching margin-left
to the title row/separator for body text alignment. Move NoteIcon inside
the title row unconditionally so top margin is constant regardless of
emoji presence.

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

src-tauri/tauri.conf.json

@@ -16,6 +16,8 @@
         "title": "Laputa",
         "width": 1400,
         "height": 900,
+        "minWidth": 800,
+        "minHeight": 400,
         "resizable": true,
         "fullscreen": false,
         "titleBarStyle": "Overlay",

src/App.css

@@ -16,7 +16,8 @@
 }
 
 .app__sidebar {
-  flex-shrink: 0;
+  flex-shrink: 1;
+  min-width: 180px;
   display: flex;
   flex-direction: column;
 }
@@ -26,7 +27,8 @@
 }
 
 .app__note-list {
-  flex-shrink: 0;
+  flex-shrink: 10;
+  min-width: 220px;
   display: flex;
   flex-direction: column;
 }
@@ -37,7 +39,7 @@
 
 .app__editor {
   flex: 1;
-  min-width: 0;
+  min-width: 400px;
   min-height: 0;
   overflow: hidden;
   display: flex;

src/components/Editor.css

@@ -184,11 +184,13 @@
   flex-direction: row;
   align-items: flex-start;
   padding-top: 32px;
+  margin-left: 8px;
 }
 
 .title-section__separator {
   border-bottom: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
   margin-top: 12px;
+  margin-left: 8px;
 }
 
 /* --- Note Icon Area --- */
@@ -227,7 +229,6 @@
   font-size: 13px;
   opacity: 0;
   transition: opacity 0.15s;
-  margin-top: 16px;
 }
 
 .title-section:hover .note-icon-button--add,

src/components/EditorContent.tsx

@@ -13,6 +13,7 @@ import { RawEditorView } from './RawEditorView'
 import { countWords } from '../utils/wikilinks'
 import { SingleEditorView } from './SingleEditorView'
 import { isEmoji } from '../utils/emoji'
+import { useEditorTheme } from '../hooks/useTheme'
 
 interface Tab {
   entry: VaultEntry
@@ -160,6 +161,7 @@ export function EditorContent({
 }: EditorContentProps) {
   // Look up trashed/archived from the latest vault entries, not the tab snapshot,
   // so the banner appears regardless of navigation context.
+  const { cssVars } = useEditorTheme()
   const freshEntry = activeTab ? entries.find(e => e.path === activeTab.entry.path) : undefined
   const isTrashed = freshEntry?.trashed ?? activeTab?.entry.trashed ?? false
   const isArchived = freshEntry?.archived ?? activeTab?.entry.archived ?? false
@@ -201,25 +203,15 @@ export function EditorContent({
       {diffMode && <DiffModeView diffContent={diffContent} onToggleDiff={onToggleDiff} />}
       <RawModeEditorSection rawMode={rawMode} activeTab={activeTab} entries={entries} onContentChange={onRawContentChange} onSave={onSave} latestContentRef={rawLatestContentRef} />
       {showEditor && activeTab && (
-        <div className="editor-scroll-area">
+        <div className="editor-scroll-area" style={cssVars as React.CSSProperties}>
           <div className="title-section">
-            {!emojiIcon && (
+            <div className="title-section__row">
               <NoteIcon
-                icon={null}
+                icon={emojiIcon}
                 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}

src/components/EditorRightPanel.tsx

@@ -40,7 +40,7 @@ export function EditorRightPanel({
     return (
       <div
         className="shrink-0 flex flex-col min-h-0"
-        style={{ width: inspectorWidth, height: '100%' }}
+        style={{ width: inspectorWidth, minWidth: 240, height: '100%' }}
       >
         <AiPanel
           onClose={() => onToggleAIChat?.()}

src/components/ResizeHandle.tsx

@@ -67,7 +67,7 @@ export function ResizeHandle({ onResize }: ResizeHandleProps) {
 
   return (
     <div
-      className="-ml-1 w-1 shrink-0 self-stretch cursor-col-resize bg-transparent transition-colors hover:bg-[var(--border)]"
+      className="relative z-10 -ml-1 w-1 shrink-0 self-stretch cursor-col-resize bg-transparent transition-colors hover:bg-[var(--border)]"
       onMouseDown={handleMouseDown}
     />
   )

src/hooks/useLayoutPanels.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useLayoutPanels, COLUMN_MIN_WIDTHS } from './useLayoutPanels'
+
+describe('useLayoutPanels', () => {
+  it('exports column minimum widths', () => {
+    expect(COLUMN_MIN_WIDTHS.sidebar).toBe(180)
+    expect(COLUMN_MIN_WIDTHS.noteList).toBe(220)
+    expect(COLUMN_MIN_WIDTHS.editor).toBe(400)
+    expect(COLUMN_MIN_WIDTHS.inspector).toBe(240)
+  })
+
+  it('returns default widths', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    expect(result.current.sidebarWidth).toBe(250)
+    expect(result.current.noteListWidth).toBe(300)
+    expect(result.current.inspectorWidth).toBe(280)
+  })
+
+  it('clamps sidebar resize to minimum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleSidebarResize(-500))
+    expect(result.current.sidebarWidth).toBe(COLUMN_MIN_WIDTHS.sidebar)
+  })
+
+  it('clamps note list resize to minimum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleNoteListResize(-500))
+    expect(result.current.noteListWidth).toBe(COLUMN_MIN_WIDTHS.noteList)
+  })
+
+  it('clamps inspector resize to minimum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleInspectorResize(500))
+    expect(result.current.inspectorWidth).toBe(COLUMN_MIN_WIDTHS.inspector)
+  })
+
+  it('clamps sidebar resize to maximum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleSidebarResize(500))
+    expect(result.current.sidebarWidth).toBe(400)
+  })
+
+  it('clamps note list resize to maximum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleNoteListResize(500))
+    expect(result.current.noteListWidth).toBe(500)
+  })
+
+  it('clamps inspector resize to maximum', () => {
+    const { result } = renderHook(() => useLayoutPanels())
+    act(() => result.current.handleInspectorResize(-500))
+    expect(result.current.inspectorWidth).toBe(500)
+  })
+})

src/hooks/useLayoutPanels.ts

@@ -1,12 +1,19 @@
 import { useCallback, useState } from 'react'
 
+export const COLUMN_MIN_WIDTHS = {
+  sidebar: 180,
+  noteList: 220,
+  editor: 400,
+  inspector: 240,
+} as const
+
 export function useLayoutPanels() {
   const [sidebarWidth, setSidebarWidth] = useState(250)
   const [noteListWidth, setNoteListWidth] = useState(300)
   const [inspectorWidth, setInspectorWidth] = useState(280)
   const [inspectorCollapsed, setInspectorCollapsed] = useState(false)
-  const handleSidebarResize = useCallback((delta: number) => setSidebarWidth((w) => Math.max(150, Math.min(400, w + delta))), [])
-  const handleNoteListResize = useCallback((delta: number) => setNoteListWidth((w) => Math.max(200, Math.min(500, w + delta))), [])
-  const handleInspectorResize = useCallback((delta: number) => setInspectorWidth((w) => Math.max(200, Math.min(500, w - delta))), [])
+  const handleSidebarResize = useCallback((delta: number) => setSidebarWidth((w) => Math.max(COLUMN_MIN_WIDTHS.sidebar, Math.min(400, w + delta))), [])
+  const handleNoteListResize = useCallback((delta: number) => setNoteListWidth((w) => Math.max(COLUMN_MIN_WIDTHS.noteList, Math.min(500, w + delta))), [])
+  const handleInspectorResize = useCallback((delta: number) => setInspectorWidth((w) => Math.max(COLUMN_MIN_WIDTHS.inspector, Math.min(500, w - delta))), [])
   return { sidebarWidth, noteListWidth, inspectorWidth, inspectorCollapsed, setInspectorCollapsed, handleSidebarResize, handleNoteListResize, handleInspectorResize }
 }