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,34 +66,36 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
   return (
     <div className="space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Calendar className="w-5 h-5 text-primary" />
-          <h2 className="text-lg font-semibold" data-testid="text-calendar-title">
-            5-Week Calendar View
-          </h2>
-        </div>
-        
-        <div className="flex items-center gap-2">
-          <Button 
-            variant="outline" 
-            size="icon"
-            onClick={() => navigateWeek('prev')}
-            data-testid="button-prev-week"
-            className="w-8 h-8"
-          >
-            <ChevronLeft className="w-4 h-4" />
-          </Button>
+      <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" />
+            <h2 className="text-lg font-semibold" data-testid="text-calendar-title">
+              5-Week Calendar View
+            </h2>
+          </div>
           
-          <Button 
-            variant="outline" 
-            size="icon"
-            onClick={() => navigateWeek('next')}
-            data-testid="button-next-week"
-            className="w-8 h-8"
-          >
-            <ChevronRight className="w-4 h-4" />
-          </Button>
+          <div className="flex items-center gap-2">
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => navigateWeek('prev')}
+              data-testid="button-prev-week"
+              className="w-8 h-8"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </Button>
+            
+            <Button 
+              variant="outline" 
+              size="icon"
+              onClick={() => navigateWeek('next')}
+              data-testid="button-next-week"
+              className="w-8 h-8"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
       </div>
 

client/src/components/KanbanBoard.tsx

@@ -169,45 +169,46 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
   return (
     <div className="space-y-4">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <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">
-            Task Board
-          </h2>
-        </div>
-        
-        {viewMode !== 'traditional' && (
+      <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">
-            <Button 
-              variant="outline" 
-              size="icon"
-              onClick={() => navigatePeriod('prev')}
-              data-testid="button-prev-period"
-              className="w-8 h-8"
-            >
-              <ChevronLeft className="w-4 h-4" />
-            </Button>
-            
-            <span className="text-sm font-medium min-w-[120px] text-center">
-              {getPeriodTitle()}
-            </span>
-            
-            <Button 
-              variant="outline" 
-              size="icon"
-              onClick={() => navigatePeriod('next')}
-              data-testid="button-next-period"
-              className="w-8 h-8"
-            >
-              <ChevronRight className="w-4 h-4" />
-            </Button>
+            <LayoutGrid className="w-5 h-5 text-primary" />
+            <h2 className="text-lg font-semibold" data-testid="text-kanban-title">
+              Task Board
+            </h2>
           </div>
-        )}
-      </div>
+          
+          {viewMode !== 'traditional' && (
+            <div className="flex items-center gap-2">
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => navigatePeriod('prev')}
+                data-testid="button-prev-period"
+                className="w-8 h-8"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </Button>
+              
+              <span className="text-sm font-medium min-w-[120px] text-center">
+                {getPeriodTitle()}
+              </span>
+              
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => navigatePeriod('next')}
+                data-testid="button-next-period"
+                className="w-8 h-8"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </Button>
+            </div>
+          )}
+        </div>
 
-      {/* Filter Bar */}
-      <Card className="p-4">
+        {/* Filter Bar */}
+        <Card className="p-4">
         <div className="flex items-center justify-between flex-wrap gap-4">
           <div className="flex items-center gap-2">
             <Filter className="w-4 h-4 text-muted-foreground" />
@@ -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,69 +181,70 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
 
   return (
     <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold" data-testid="text-task-list-title">
-          My Tasks
-        </h2>
-        <Badge variant="secondary" data-testid="badge-task-count">
-          {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
-            placeholder="Search tasks..."
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              console.log('Search query:', e.target.value);
-            }}
-            className="pl-10"
-            data-testid="input-search-tasks"
-          />
-        </div>
-        
-        <div className="flex gap-3">
-          <Select value={filterBy} onValueChange={(value: FilterOption) => {
-            setFilterBy(value);
-            console.log('Filter changed to:', value);
-          }}>
-            <SelectTrigger className="flex-1" data-testid="select-filter">
-              <div className="flex items-center gap-2">
-                <Filter className="w-4 h-4" />
-                <SelectValue />
-              </div>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All ({getFilterCount('all')})</SelectItem>
-              <SelectItem value="todo">To Do ({getFilterCount('todo')})</SelectItem>
-              <SelectItem value="inProgress">In Progress ({getFilterCount('inProgress')})</SelectItem>
-              <SelectItem value="done">Done ({getFilterCount('done')})</SelectItem>
-              <SelectItem value="overdue">Overdue ({getFilterCount('overdue')})</SelectItem>
-            </SelectContent>
-          </Select>
+      {/* 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
+            </h2>
+            <Badge variant="secondary" data-testid="badge-task-count">
+              {filteredAndSortedTasks.length} tasks
+            </Badge>
+          </div>
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Search tasks..."
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+                console.log('Search query:', e.target.value);
+              }}
+              className="pl-10"
+              data-testid="input-search-tasks"
+            />
+          </div>
           
-          <Select value={sortBy} onValueChange={(value: SortOption) => {
-            setSortBy(value);
-            console.log('Sort changed to:', value);
-          }}>
-            <SelectTrigger className="flex-1" data-testid="select-sort">
-              <div className="flex items-center gap-2">
-                <SortAsc className="w-4 h-4" />
-                <SelectValue />
-              </div>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="dueDate">Due Date</SelectItem>
-              <SelectItem value="priority">Priority</SelectItem>
-              <SelectItem value="title">Title</SelectItem>
-              <SelectItem value="status">Status</SelectItem>
-            </SelectContent>
-          </Select>
+          <div className="flex gap-3">
+            <Select value={filterBy} onValueChange={(value: FilterOption) => {
+              setFilterBy(value);
+              console.log('Filter changed to:', value);
+            }}>
+              <SelectTrigger className="flex-1" data-testid="select-filter">
+                <div className="flex items-center gap-2">
+                  <Filter className="w-4 h-4" />
+                  <SelectValue />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All ({getFilterCount('all')})</SelectItem>
+                <SelectItem value="todo">To Do ({getFilterCount('todo')})</SelectItem>
+                <SelectItem value="inProgress">In Progress ({getFilterCount('inProgress')})</SelectItem>
+                <SelectItem value="done">Done ({getFilterCount('done')})</SelectItem>
+                <SelectItem value="overdue">Overdue ({getFilterCount('overdue')})</SelectItem>
+              </SelectContent>
+            </Select>
+            
+            <Select value={sortBy} onValueChange={(value: SortOption) => {
+              setSortBy(value);
+              console.log('Sort changed to:', value);
+            }}>
+              <SelectTrigger className="flex-1" data-testid="select-sort">
+                <div className="flex items-center gap-2">
+                  <SortAsc className="w-4 h-4" />
+                  <SelectValue />
+                </div>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="dueDate">Due Date</SelectItem>
+                <SelectItem value="priority">Priority</SelectItem>
+                <SelectItem value="title">Title</SelectItem>
+                <SelectItem value="status">Status</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </div>