Improve calendar usability and task dragging interactions

Adjusted calendar positioning to prevent menu overlap and added visual highlighting for hovered dates during task drag-and-drop, with enhanced styling for weekends.

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/0tPSQjg

.replit

@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 39581
+externalPort = 3001
+
 [[ports]]
 localPort = 41353
 externalPort = 3000

client/src/components/TasksWithCalendar.tsx

@@ -131,8 +131,21 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
     }
   };
 
-  const handleDragLeave = () => {
+  const handleDragLeave = (e: React.DragEvent) => {
-    setHoveredDate(null);
+    // Only clear hover if we're leaving the calendar entirely
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX;
+    const y = e.clientY;
+    
+    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+      setHoveredDate(null);
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent, date: Date) => {
+    if (draggedTask) {
+      setHoveredDate(date);
+    }
   };
 
   const navigateCalendar = (direction: 'prev' | 'next') => {
@@ -280,9 +293,9 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
         )}
       </div>
 
-      {/* Calendar Section - Fixed at bottom with full width */}
+      {/* Calendar Section - Fixed at bottom with full width, above bottom nav */}
-      <div className="fixed bottom-16 left-0 right-0 bg-background border-t shadow-lg z-10">
+      <div className="fixed bottom-20 left-0 right-0 bg-background border-t shadow-lg z-[5]">
-        <div className="p-4 max-h-[35vh] overflow-y-auto">
+        <div className="p-3 max-h-[32vh] overflow-y-auto">
           {/* Calendar Header */}
           <div className="flex items-center justify-between mb-3">
             <div className="flex items-center gap-2">
@@ -327,15 +340,16 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                   className={`p-2 min-h-[100px] transition-all border-2 ${
                     isToday ? 'border-primary ring-1 ring-primary ring-offset-1 ring-offset-background' : 'border-border'
                   } ${
-                    isWeekend ? 'bg-muted/30' : ''
+                    isWeekend ? 'bg-muted/50 border-muted' : ''
                   } ${
-                    isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/10 border-primary' : ''
+                    isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/15 border-primary shadow-lg' : ''
                   } ${
                     draggedTask && !isHovered ? 'border-dashed border-primary/30' : ''
                   }`}
                   onDragOver={handleDragOver}
                   onDragEnter={() => handleDragEnter(date)}
                   onDragLeave={handleDragLeave}
+                  onMouseMove={(e) => handleMouseMove(e, date)}
                   onDrop={(e) => handleDrop(date, e)}
                   onClick={() => {
                     console.log('Date selected:', date.toLocaleDateString());
@@ -400,7 +414,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
       </div>
 
       {/* Add bottom padding to prevent content overlap */}
-      <div className="h-[40vh]" />
+      <div className="h-[37vh]" />
 
       {/* Time Completion Modal */}
       <TimeCompletionModal