From bcb43a0ae7134e3a73122e592e922687b0bdad38 Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Fri, 12 Sep 2025 12:57:10 +0000
Subject: [PATCH] Improve visual layout and responsiveness of the task calendar
 view

Update CSS classes in `TasksWithCalendar.tsx` to adjust element sizing, padding, and text sizes for improved responsiveness across different screen sizes, specifically targeting small mobile devices.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: full_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/TasksWithCalendar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index effb083..dd13def 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -368,7 +368,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
               const hoverClasses = isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/15 border-primary shadow-lg' : '';
               const dragClasses = draggedTask && !isHovered ? 'border-dashed border-primary/30' : '';
               
-              const finalClassName = `p-2 min-h-[100px] transition-all border-2 ${todayClasses} ${weekendClasses} ${hoverClasses} ${dragClasses}`;
+              const finalClassName = `p-2 sm:p-2 min-h-[140px] sm:min-h-[100px] transition-all border-2 ${todayClasses} ${weekendClasses} ${hoverClasses} ${dragClasses}`;
               
               return (
                 <Card 
@@ -385,12 +385,12 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
                   data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
                 >
                   <div className="text-center mb-2">
-                    <div className={`text-xs font-medium ${
+                    <div className={`text-xs sm:text-xs font-medium ${
                       isWeekend ? 'text-muted-foreground font-semibold' : 'text-muted-foreground'
                     }`}>
                       {format(date, 'EEE')}
                     </div>
-                    <div className={`text-xs font-semibold ${
+                    <div className={`text-sm sm:text-xs font-semibold ${
                       isToday ? 'text-primary' : isWeekend ? 'text-primary/80' : ''
                     }`}>
                       {format(date, 'MMM d')}
@@ -420,14 +420,14 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
                         >
                           <Badge 
                             variant="outline" 
-                            className="w-full justify-start text-xs p-1 h-auto text-left"
+                            className="w-full justify-start text-xs p-1 sm:p-1 py-2 sm:py-1 h-auto text-left"
                             style={taskLabel ? { 
                               borderColor: taskLabel.color,
                               borderWidth: '2px',
                               borderStyle: 'solid'
                             } : {}}
                           >
-                            <div className="truncate text-xs">
+                            <div className="truncate text-sm sm:text-xs">
                               {task.title}
                             </div>
                           </Badge>
@@ -436,7 +436,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
                     })}
                     
                     {dayTasks.length > 2 && (
-                      <Badge variant="secondary" className="w-full justify-center text-xs py-0">
+                      <Badge variant="secondary" className="w-full justify-center text-sm sm:text-xs py-1 sm:py-0">
                         +{dayTasks.length - 2}
                       </Badge>
                     )}