added search/filter and fixed horizontal fit for mobile.

src/components/Layout.tsx

@@ -7,6 +7,7 @@ const TaskDetail = lazy(() => import("./TaskDetail").then(m => ({ default: m.Tas
 const QuickEntry = lazy(() => import("./QuickEntry").then(m => ({ default: m.QuickEntry })));
 import { Button } from "./ui/button";
 import { cn } from "@/lib/utils";
+import { FilterBar } from "./FilterBar";
 
 interface LayoutProps {
     children: JSX.Element;
@@ -32,7 +33,7 @@ export const Layout: Component<LayoutProps> = (props) => {
     const activeTask = () => store.tasks.find(t => t.id === activeTaskId());
 
     return (
-        <div class="flex h-screen w-full bg-background overflow-hidden relative font-sans antialiased text-foreground">
+        <div class="flex h-screen w-full min-w-0 bg-background overflow-hidden relative font-sans antialiased text-foreground">
             <Sidebar
                 currentView={props.currentView}
                 setView={props.setView}
@@ -62,8 +63,13 @@ export const Layout: Component<LayoutProps> = (props) => {
                 )}
 
                 {/* Main Content Area */}
-                <main class="flex-1 overflow-y-auto overflow-x-hidden p-4 sm:p-6 lg:p-8 pb-32 sm:pb-6">
-                    <div class="max-w-5xl mx-auto w-full">
+                <main class="flex-1 min-w-0 overflow-y-auto overflow-x-hidden pb-32 sm:pb-6 relative scroll-smooth">
+                    <div class="w-full max-w-screen-2xl mx-auto p-3 sm:p-6 lg:p-10 space-y-6 sm:space-y-8">
+                        {/* Global Top Header for Filter/Search */}
+                        <div class="sticky top-0 z-40 flex items-center justify-end py-2 -mx-3 px-3 md:relative md:top-auto md:z-auto md:py-0 md:mx-0 md:px-0 bg-background/80 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
+                            <FilterBar />
+                        </div>
+
                         {props.children}
                     </div>
                 </main>