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

@@ -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>
 

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' : ''

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}

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}`}