Made headers and toolbars sticky

apps/x/apps/renderer/src/App.tsx

@@ -705,7 +705,7 @@ function App() {
   return (
     <TooltipProvider delayDuration={0}>
       <SidebarSectionProvider defaultSection="ask-ai" onSectionChange={handleSectionChange}>
-        <div className="flex min-h-svh w-full">
+        <div className="flex h-svh w-full">
           {/* Icon sidebar - always visible, fixed position */}
           <SidebarIcon />
 
@@ -727,9 +727,9 @@ function App() {
               knowledgeActions={knowledgeActions}
               chats={chatHistory}
             />
-            <SidebarInset>
+            <SidebarInset className="!overflow-hidden min-h-0">
               {/* Header with sidebar trigger */}
-              <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-3">
+              <header className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-3 bg-background">
                 <SidebarTrigger className="-ml-1" />
                 <Separator orientation="vertical" className="h-4" />
                 <span className="text-sm font-medium text-muted-foreground">
@@ -766,11 +766,13 @@ function App() {
 
               {selectedPath ? (
                 selectedPath.endsWith('.md') ? (
-                  <MarkdownEditor
-                    content={editorContent}
-                    onChange={setEditorContent}
-                    placeholder="Start writing..."
-                  />
+                  <div className="flex-1 min-h-0 flex flex-col overflow-hidden">
+                    <MarkdownEditor
+                      content={editorContent}
+                      onChange={setEditorContent}
+                      placeholder="Start writing..."
+                    />
+                  </div>
                 ) : (
                   <div className="flex-1 overflow-auto p-4">
                     <pre className="text-sm font-mono text-foreground whitespace-pre-wrap">

apps/x/apps/renderer/src/components/markdown-editor.tsx

@@ -76,7 +76,9 @@ export function MarkdownEditor({ content, onChange, placeholder = 'Start writing
   return (
     <div className="tiptap-editor" onKeyDown={handleKeyDown}>
       <EditorToolbar editor={editor} />
-      <EditorContent editor={editor} />
+      <div className="editor-content-wrapper">
+        <EditorContent editor={editor} />
+      </div>
     </div>
   )
 }

apps/x/apps/renderer/src/components/sidebar-content.tsx

@@ -263,8 +263,8 @@ function KnowledgeSection({
   return (
     <ContextMenu>
       <ContextMenuTrigger asChild>
-        <SidebarGroup className="flex-1 flex flex-col">
-          <div className="flex items-center justify-center gap-1 py-1">
+        <SidebarGroup className="flex-1 flex flex-col overflow-hidden">
+          <div className="flex items-center justify-center gap-1 py-1 sticky top-0 z-10 bg-sidebar border-b border-sidebar-border">
             {quickActions.map((action) => (
               <Tooltip key={action.label}>
                 <TooltipTrigger asChild>
@@ -296,7 +296,7 @@ function KnowledgeSection({
               </TooltipContent>
             </Tooltip>
           </div>
-          <SidebarGroupContent className="flex-1">
+          <SidebarGroupContent className="flex-1 overflow-y-auto">
             <SidebarMenu>
               {tree.map((item, index) => (
                 <Tree

apps/x/apps/renderer/src/components/ui/sidebar.tsx

@@ -153,7 +153,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-full min-h-0 w-full",
             isResizing && "select-none",
             className
           )}

apps/x/apps/renderer/src/styles/editor.css

@@ -3,14 +3,21 @@
 .tiptap-editor {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* This wrapper is the scroll container */
+.editor-content-wrapper {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
 }
 
 .tiptap-editor .ProseMirror {
-  flex: 1;
   padding: 1rem;
   outline: none;
-  overflow-y: auto;
 }
 
 .tiptap-editor .ProseMirror:focus {
@@ -195,6 +202,7 @@
   padding: 0.5rem;
   border-bottom: 1px solid var(--border);
   background-color: var(--background);
+  flex-shrink: 0;
 }
 
 .editor-toolbar .separator {