From a9bb26001b92663bb26de4e5e98a625dd3609de3 Mon Sep 17 00:00:00 2001
From: Cole Goldsmith <cole.b.goldsmith@gmail.com>
Date: Fri, 3 Oct 2025 11:54:30 -0500
Subject: [PATCH] fix layout merge conflicts

---
 frontend/src/app/globals.css               |  2 +-
 frontend/src/app/layout.tsx                |  2 +-
 frontend/src/components/layout-wrapper.tsx | 22 +++++++++++++---------
 3 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 22601457..e3f4c154 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -54,7 +54,7 @@
 
     --radius: 0.5rem;
 
-    --app-header-height: 53px;
+    --app-header-height: 40px;
   }
 
   .dark {
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index baf9f2d5..10ed826b 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-full w-full overflow-hidden`}
+        className={`${inter.variable} ${jetbrainsMono.variable} ${chivo.variable} antialiased h-lvh w-full overflow-hidden`}
       >
         <ThemeProvider
           attribute="class"
diff --git a/frontend/src/components/layout-wrapper.tsx b/frontend/src/components/layout-wrapper.tsx
index d8cba6e5..33d0749a 100644
--- a/frontend/src/components/layout-wrapper.tsx
+++ b/frontend/src/components/layout-wrapper.tsx
@@ -11,7 +11,6 @@ import { KnowledgeFilterPanel } from "@/components/knowledge-filter-panel";
 import Logo from "@/components/logo/logo";
 import { Navigation } from "@/components/navigation";
 import { TaskNotificationMenu } from "@/components/task-notification-menu";
-import { Button } from "@/components/ui/button";
 import { UserNav } from "@/components/user-nav";
 import { useAuth } from "@/contexts/auth-context";
 import { useChat } from "@/contexts/chat-context";
@@ -38,7 +37,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // Only fetch conversations on chat page
   const isOnChatPage = pathname === "/" || pathname === "/chat";
-  const isOnKnowledgePage = pathname === "/knowledge";
   const { data: conversations = [], isLoading: isConversationsLoading } =
     useGetConversationsQuery(endpoint, refreshTrigger, {
       enabled: isOnChatPage && (isAuthenticated || isNoAuthMode),
@@ -52,6 +50,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
   // List of paths that should not show navigation
   const authPaths = ["/login", "/auth/callback", "/onboarding"];
   const isAuthPage = authPaths.includes(pathname);
+  const isOnKnowledgePage = pathname.startsWith("/knowledge");
 
   // List of paths with smaller max-width
   const smallWidthPaths = ["/settings", "/settings/connector/new"];
@@ -59,7 +58,7 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // Calculate active tasks for the bell icon
   const activeTasks = tasks.filter(
-    task =>
+    (task) =>
       task.status === "pending" ||
       task.status === "running" ||
       task.status === "processing"
@@ -84,10 +83,9 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
   // For all other pages, render with Langflow-styled navigation and task menu
   return (
-    <div className="h-screen">
-      {/* Header */}
-      <header className="header-arrangement bg-background">
-        <div className="header-start-display px-4">
+    <div className="h-full relative">
+      <header className="header-arrangement bg-background sticky top-0 z-50 h-10">
+        <div className="header-start-display px-[16px]">
           {/* Logo/Title */}
           <div className="flex items-center">
             <Logo className="fill-primary" width={24} height={22} />
@@ -126,7 +124,6 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
           </div>
         </div>
       </header>
-
       <div
         className={cn(
           "app-grid-cols-arrangement group",
@@ -145,7 +142,14 @@ export function LayoutWrapper({ children }: { children: React.ReactNode }) {
 
         {/* Main Content */}
         <main className="overflow-y-auto">
-          <div className="container p-6 h-full">{children}</div>
+          <div
+            className={cn(
+              "p-6 h-full container",
+              isSmallWidthPath && "max-w-[850px]"
+            )}
+          >
+            {children}
+          </div>
         </main>
 
         {/* Task Notifications Panel */}
