fix headings

apps/client/src/features/editor/readonly-page-editor.tsx

@@ -66,12 +66,14 @@ export default function ReadonlyPageEditor({
 
   return (
     <>
-      <EditorProvider
-        editable={false}
-        immediatelyRender={true}
-        extensions={titleExtensions}
-        content={title}
-      ></EditorProvider>
+      <div className="page-title">
+        <EditorProvider
+          editable={false}
+          immediatelyRender={true}
+          extensions={titleExtensions}
+          content={title}
+        ></EditorProvider>
+      </div>
 
       <EditorProvider
         editable={false}

apps/client/src/features/editor/styles/core.css

@@ -52,7 +52,34 @@
 
   h1,
   h2,
-  h3,
+  h3 {
+    letter-spacing: -0.01em;
+    line-height: 1.2;
+    font-weight: 600;
+    margin-bottom: 0;
+  }
+
+  h1 strong,
+  h2 strong,
+  h3 strong {
+    font-weight: 600;
+  }
+
+  h1 {
+    font-size: 1.875rem;
+    margin-top: 1.875rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    margin-top: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    margin-top: 1.25rem;
+  }
+
   h4,
   h5,
   h6 {
@@ -243,3 +270,10 @@
 .actionIconGroup {
   background: var(--mantine-color-body);
 }
+
+.page-title .ProseMirror h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-top: 0;
+  margin-bottom: 0.75em;
+}

apps/client/src/features/editor/title-editor.tsx

@@ -244,15 +244,17 @@ export function TitleEditor({
   }
 
   return (
-    <EditorContent
-      editor={titleEditor}
-      onKeyDown={(event) => {
-        // First handle the search hotkey
-        getHotkeyHandler([["mod+F", openSearchDialog]])(event);
+    <div className="page-title">
+      <EditorContent
+        editor={titleEditor}
+        onKeyDown={(event) => {
+          // First handle the search hotkey
+          getHotkeyHandler([["mod+F", openSearchDialog]])(event);
 
-        // Then handle other key events
-        handleTitleKeyDown(event);
-      }}
-    />
+          // Then handle other key events
+          handleTitleKeyDown(event);
+        }}
+      />
+    </div>
   );
 }