From 6d70282be6e715774dd7a1917a61cdaeef7e7aac Mon Sep 17 00:00:00 2001
From: tusharmagar <tushmag@gmail.com>
Date: Mon, 12 Jan 2026 23:46:20 +0530
Subject: [PATCH] Made headers and toolbars sticky

---
 apps/x/apps/renderer/src/App.tsx               | 18 ++++++++++--------
 .../src/components/markdown-editor.tsx         |  4 +++-
 .../src/components/sidebar-content.tsx         |  6 +++---
 .../renderer/src/components/ui/sidebar.tsx     |  2 +-
 apps/x/apps/renderer/src/styles/editor.css     | 14 +++++++++++---
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/apps/x/apps/renderer/src/App.tsx b/apps/x/apps/renderer/src/App.tsx
index 7c76ec3d..869cf880 100644
--- a/apps/x/apps/renderer/src/App.tsx
+++ b/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">
diff --git a/apps/x/apps/renderer/src/components/markdown-editor.tsx b/apps/x/apps/renderer/src/components/markdown-editor.tsx
index ccb993f1..7dbf730f 100644
--- a/apps/x/apps/renderer/src/components/markdown-editor.tsx
+++ b/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>
   )
 }
diff --git a/apps/x/apps/renderer/src/components/sidebar-content.tsx b/apps/x/apps/renderer/src/components/sidebar-content.tsx
index 0b178803..e0754865 100644
--- a/apps/x/apps/renderer/src/components/sidebar-content.tsx
+++ b/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
diff --git a/apps/x/apps/renderer/src/components/ui/sidebar.tsx b/apps/x/apps/renderer/src/components/ui/sidebar.tsx
index 89ba2c55..e1db86d6 100644
--- a/apps/x/apps/renderer/src/components/ui/sidebar.tsx
+++ b/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
           )}
diff --git a/apps/x/apps/renderer/src/styles/editor.css b/apps/x/apps/renderer/src/styles/editor.css
index 3ba91ce9..4c3ae1f9 100644
--- a/apps/x/apps/renderer/src/styles/editor.css
+++ b/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 {