paul/task-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve visual layout and responsiveness of the task calendar view

Browse Source 
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
This commit is contained in:
paul-nothaft
2025-09-12 12:57:10 +00:00
parent f687dc5a33
commit bcb43a0ae7
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/TasksWithCalendar.tsx
+6 -6
View File
@@ -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>
)}