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

Improve app responsiveness and visual consistency across devices

Browse Source 
Adjusted layout, spacing, and element sizing in CalendarView, KanbanBoard, and ProjectTemplate components to enhance responsiveness and user experience on various screen sizes.

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/gFHkSPu
This commit is contained in:
paul-nothaft
2025-10-23 12:04:16 +00:00
parent 5e85e7c0e2
commit 0239136565
4 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ProjectTemplate.tsx
+15 -13
View File
@@ -522,40 +522,42 @@ export default function ProjectTemplate({
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold" data-testid="text-settings-title">
Settings & Project Management
<div className="flex items-center justify-between gap-2">
<h2 className="text-base sm:text-lg font-semibold" data-testid="text-settings-title">
Settings
</h2>
<Button
onClick={() => setIsCreateProjectOpen(true)}
data-testid="button-create-project"
size="lg"
className="h-11"
>
<Plus className="w-4 h-4 mr-2" />
New Project
</Button>
</div>
<Tabs defaultValue="projects" className="space-y-4">
<TabsList>
<TabsTrigger value="projects" data-testid="tab-projects">Projects</TabsTrigger>
<TabsTrigger value="labels" data-testid="tab-labels">Labels</TabsTrigger>
<Tabs defaultValue="projects" className="space-y-3 sm:space-y-4">
<TabsList className="w-full">
<TabsTrigger value="projects" data-testid="tab-projects" className="flex-1">Projects</TabsTrigger>
<TabsTrigger value="labels" data-testid="tab-labels" className="flex-1">Labels</TabsTrigger>
</TabsList>
<TabsContent value="projects" className="space-y-6">
<TabsContent value="projects" className="space-y-4 sm:space-y-6">
{/* Project Kanban Board */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
{projectColumns.map((column) => {
const columnProjects = getProjectsByStatus(column.status);
return (
<Card
key={column.id}
className="p-4"
className="p-3 sm:p-4"
onDragOver={handleDragOver}
onDrop={() => handleDrop(column.status)}
data-testid={`column-${column.id}`}
>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-between mb-3 sm:mb-4">
<h3 className="font-semibold text-sm" data-testid={`text-column-title-${column.id}`}>
{column.title}
</h3>
@@ -564,14 +566,14 @@ export default function ProjectTemplate({
</Badge>
</div>
<div className="space-y-3 min-h-[400px]">
<div className="space-y-2 sm:space-y-3 min-h-[200px] sm:min-h-[300px]">
{columnProjects.map((project) => (
<Card
key={project.id}
draggable
onDragStart={() => handleDragStart(project.id)}
onDragEnd={handleDragEnd}
className={`p-4 cursor-move hover-elevate transition-all ${
className={`p-3 sm:p-4 cursor-move hover-elevate transition-all ${
draggedProject === project.id ? 'opacity-50 scale-95' : ''
}`}
data-testid={`project-card-${project.id}`}