From 023913656561dc922796933bae8370da9ee8c2d0 Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 23 Oct 2025 12:04:16 +0000
Subject: [PATCH] Improve app responsiveness and visual consistency across
 devices

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
---
 client/src/App.tsx                        |  2 +-
 client/src/components/CalendarView.tsx    | 16 +++++-----
 client/src/components/KanbanBoard.tsx     | 36 +++++++++++------------
 client/src/components/ProjectTemplate.tsx | 28 ++++++++++--------
 4 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2d4bce3..7e6b82d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -316,7 +316,7 @@ function App() {
           </header>
 
           {/* Main Content */}
-          <main className="pb-20 px-4 py-6">
+          <main className="pb-20 px-3 py-4 sm:px-4 sm:py-6 max-w-screen-2xl mx-auto">
             {renderContent()}
           </main>
 
diff --git a/client/src/components/CalendarView.tsx b/client/src/components/CalendarView.tsx
index d41b341..67c8981 100644
--- a/client/src/components/CalendarView.tsx
+++ b/client/src/components/CalendarView.tsx
@@ -66,12 +66,12 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
   return (
     <div className="space-y-4">
       {/* Header */}
-      <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="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-2 sm:pb-3 mb-3 sm: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
+            <Calendar className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
+            <h2 className="text-base sm:text-lg font-semibold" data-testid="text-calendar-title">
+              Calendar
             </h2>
           </div>
           
@@ -81,7 +81,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
               size="icon"
               onClick={() => navigateWeek('prev')}
               data-testid="button-prev-week"
-              className="w-8 h-8"
+              className="h-11 w-11"
             >
               <ChevronLeft className="w-4 h-4" />
             </Button>
@@ -91,7 +91,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
               size="icon"
               onClick={() => navigateWeek('next')}
               data-testid="button-next-week"
-              className="w-8 h-8"
+              className="h-11 w-11"
             >
               <ChevronRight className="w-4 h-4" />
             </Button>
@@ -100,7 +100,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
       </div>
 
       {/* Calendar Grid */}
-      <div className="grid grid-cols-7 gap-2">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-2 sm:gap-3">
         {dates.map((date, index) => {
           const dayTasks = getTasksForDate(date);
           const isToday = isSameDay(date, new Date());
@@ -110,7 +110,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
           return (
             <Card 
               key={index}
-              className={`p-3 min-h-[120px] hover-elevate active-elevate-2 transition-all ${
+              className={`p-2 sm:p-3 min-h-[100px] sm:min-h-[120px] hover-elevate active-elevate-2 transition-all ${
                 isToday ? 'ring-2 ring-primary' : ''
               } ${
                 isWeekend ? 'bg-muted/30' : ''
diff --git a/client/src/components/KanbanBoard.tsx b/client/src/components/KanbanBoard.tsx
index 124b2a6..e58df72 100644
--- a/client/src/components/KanbanBoard.tsx
+++ b/client/src/components/KanbanBoard.tsx
@@ -169,12 +169,12 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
   return (
     <div className="space-y-4">
       {/* Header */}
-      <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="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-2 sm:pb-3 mb-3 sm:mb-4">
+        <div className="flex items-center justify-between mb-3 sm:mb-4">
           <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
+            <LayoutGrid className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
+            <h2 className="text-base sm:text-lg font-semibold" data-testid="text-kanban-title">
+              Board
             </h2>
           </div>
           
@@ -185,7 +185,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                 size="icon"
                 onClick={() => navigatePeriod('prev')}
                 data-testid="button-prev-period"
-                className="w-8 h-8"
+                className="h-11 w-11"
               >
                 <ChevronLeft className="w-4 h-4" />
               </Button>
@@ -199,7 +199,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                 size="icon"
                 onClick={() => navigatePeriod('next')}
                 data-testid="button-next-period"
-                className="w-8 h-8"
+                className="h-11 w-11"
               >
                 <ChevronRight className="w-4 h-4" />
               </Button>
@@ -208,8 +208,8 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         </div>
 
         {/* Filter Bar */}
-        <Card className="p-4">
-        <div className="flex items-center justify-between flex-wrap gap-4">
+        <Card className="p-3 sm:p-4">
+        <div className="flex items-center justify-between flex-wrap gap-3 sm:gap-4">
           <div className="flex items-center gap-2">
             <Filter className="w-4 h-4 text-muted-foreground" />
             <span className="text-sm font-medium">Filters</span>
@@ -416,14 +416,14 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
 
         {/* All view modes use the same kanban layout, just with different filtering */}
         <TabsContent value="traditional" className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
             {columns.map((column) => {
               const columnTasks = getTasksForColumn(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}`}
@@ -437,7 +437,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[200px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[150px] sm:min-h-[200px]">
                     {columnTasks.map((task) => (
                       <div
                         key={task.id}
@@ -480,14 +480,14 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         </TabsContent>
 
         <TabsContent value="weekly" className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
             {columns.map((column) => {
               const columnTasks = getTasksForColumn(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}`}
@@ -501,7 +501,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[200px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[150px] sm:min-h-[200px]">
                     {columnTasks.map((task) => (
                       <div
                         key={task.id}
@@ -544,14 +544,14 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         </TabsContent>
 
         <TabsContent value="monthly" className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
             {columns.map((column) => {
               const columnTasks = getTasksForColumn(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}`}
@@ -565,7 +565,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[200px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[150px] sm:min-h-[200px]">
                     {columnTasks.map((task) => (
                       <div
                         key={task.id}
diff --git a/client/src/components/ProjectTemplate.tsx b/client/src/components/ProjectTemplate.tsx
index 5fe3926..e7b1abb 100644
--- a/client/src/components/ProjectTemplate.tsx
+++ b/client/src/components/ProjectTemplate.tsx
@@ -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}`}