Make all title bars sticky and improve mobile calendar display

The `CalendarView`, `KanbanBoard`, and `TasksWithCalendar` components now have sticky header elements. The `CalendarView` and `KanbanBoard` headers are applied with `sticky top-16` for proper placement within the app's layout. Additionally, for mobile views, the calendar display in `TasksWithCalendar` has been adjusted for better readability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/7CG7dga

client/src/components/CalendarView.tsx

@@ -66,6 +66,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
   return (
     <div className="space-y-4">
       {/* Header */}
+      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-3 mb-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Calendar className="w-5 h-5 text-primary" />
@@ -96,6 +97,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
             </Button>
           </div>
         </div>
+      </div>
 
       {/* Calendar Grid */}
       <div className="grid grid-cols-7 gap-2">

client/src/components/KanbanBoard.tsx

@@ -169,7 +169,8 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
   return (
     <div className="space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
+      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-3 mb-4">
+        <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <LayoutGrid className="w-5 h-5 text-primary" />
             <h2 className="text-lg font-semibold" data-testid="text-kanban-title">
@@ -394,6 +395,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
           </div>
         )}
       </Card>
+      </div>
 
       {/* View Mode Tabs */}
       <Tabs value={viewMode} onValueChange={(value) => setViewMode(value as ViewMode)}>

client/src/components/TasksWithCalendar.tsx

@@ -181,7 +181,10 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
 
   return (
     <div className="space-y-4">
-      {/* Header */}
+      {/* Header and Search Filters - Sticky */}
+      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-3 mb-4">
+        <div className="space-y-3">
+          {/* Title Bar */}
           <div className="flex items-center justify-between">
             <h2 className="text-lg font-semibold" data-testid="text-task-list-title">
               My Tasks
@@ -190,9 +193,6 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
               {filteredAndSortedTasks.length} tasks
             </Badge>
           </div>
-
-      {/* Search and Filters */}
-      <div className="space-y-3">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
             <Input
@@ -246,6 +246,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
             </Select>
           </div>
         </div>
+      </div>
 
       {/* Unscheduled Task List */}
       <div className="space-y-3">