Note editor/Sidebar styling tweaks

src/components/AppHeader.tsx

@@ -1,11 +0,0 @@
-export default function AppHeader() {
-
-  return (
-    <header className="absolute flex items-center justify-between px-4 py-2 border-b bg-background">
-      <div className="flex items-center gap-2 text-muted-foreground">
-        <Book className="h-5 w-5" />
-      </div>
-
-    </header>
-  )
-}

src/components/AppSidebar.tsx

@@ -1,6 +1,6 @@
 import { Check, Plus, Sun, Moon } from "lucide-react"
 
-import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, SidebarTrigger } from "@/components/ui/sidebar"
+import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter } from "@/components/ui/sidebar"
 import { Button } from "@/components/ui/button"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Input } from "@/components/ui/input"

src/components/NoteEditor.tsx

@@ -15,13 +15,13 @@ function NoteEditor() {
 
   if (!currentNote) return (
     <div className="p-6">
-      <p>Select a note</p>
     </div>
   )
 
   return (
-    <div className="p-6">
-      <h1>{ currentNote.title }</h1>
+    <div className="p-6 w-full max-w-7/10 mx-auto">
+      <div className="h-16" role="spacer"></div>
+      <h1 className="text-4xl font-medium mb-4">{ currentNote.title }</h1>
       <BlockNoteView editor={editor as any} theme={theme} />
     </div>
   )

src/components/ui/sidebar.tsx

@@ -267,7 +267,7 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon"
-      className={cn("size-7", className)}
+      className={cn("size-10 top-2 left-2", className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()

src/index.css

@@ -126,6 +126,10 @@ body {
   }
 }
 
+.bn-editor {
+  padding-inline: 0 !important;
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;