Visual tweaks

frontend/src/lib/responsive-config.ts

@@ -54,7 +54,7 @@ export const getMainContainerClasses = (isPanelOpen: boolean) => {
 
 // Generate classes for kanban section
 export const getKanbanSectionClasses = (isPanelOpen: boolean) => {
-  if (!isPanelOpen) return "w-full transition-all duration-300";
+  if (!isPanelOpen) return "w-full";
 
   const overlayClasses = "w-full opacity-50 pointer-events-none";
   const sideBySideClasses = [
@@ -66,5 +66,5 @@ export const getKanbanSectionClasses = (isPanelOpen: boolean) => {
     `${PANEL_SIDE_BY_SIDE_BREAKPOINT}:pointer-events-auto`,
   ].join(" ");
 
-  return `${overlayClasses} ${sideBySideClasses} transition-all duration-300`;
+  return `${overlayClasses} ${sideBySideClasses}`;
 };

frontend/src/pages/project-tasks.tsx

@@ -6,7 +6,10 @@ import { ArrowLeft, Plus } from "lucide-react";
 import { makeRequest } from "@/lib/api";
 import { TaskFormDialog } from "@/components/tasks/TaskFormDialog";
 import { useKeyboardShortcuts } from "@/lib/keyboard-shortcuts";
-import { getMainContainerClasses, getKanbanSectionClasses } from "@/lib/responsive-config";
+import {
+  getMainContainerClasses,
+  getKanbanSectionClasses,
+} from "@/lib/responsive-config";
 
 import { TaskKanbanBoard } from "@/components/tasks/TaskKanbanBoard";
 import { TaskDetailsPanel } from "@/components/tasks/TaskDetailsPanel";
@@ -237,8 +240,6 @@ export function ProjectTasks() {
     setSelectedTask(null);
   };
 
-
-
   const handleDragEnd = async (event: DragEndEvent) => {
     const { active, over } = event;
 
@@ -298,16 +299,11 @@ export function ProjectTasks() {
   }
 
   return (
-    <div
+    <div className={getMainContainerClasses(isPanelOpen)}>
-      className={getMainContainerClasses(isPanelOpen)}
-    >
       {/* Left Column - Kanban Section */}
-      <div
+      <div className={getKanbanSectionClasses(isPanelOpen)}>
-        className={getKanbanSectionClasses(isPanelOpen)}
-      >
-        <div className="space-y-6 max-w-7xl mx-auto">
         {/* Header */}
-          <div className="flex items-center justify-between">
+        {/* <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">
               <Button
                 variant="ghost"
@@ -316,7 +312,7 @@ export function ProjectTasks() {
                 className="flex items-center"
               >
                 <ArrowLeft className="h-4 w-4 mr-2" />
-                Back to Projects
+                Projects
               </Button>
               <div>
                 <h1 className="text-2xl font-bold">
@@ -328,6 +324,16 @@ export function ProjectTasks() {
               </div>
             </div>
 
+            <Button onClick={handleCreateNewTask}>
+              <Plus className="h-4 w-4 mr-2" />
+              Add Task
+            </Button>
+          </div> */}
+
+        <div className="px-8 my-12 flex flex-row">
+          <div className="w-full">
+            <h1 className="text-2xl font-bold">{project?.name || "Project"}</h1>
+          </div>
           <Button onClick={handleCreateNewTask}>
             <Plus className="h-4 w-4 mr-2" />
             Add Task
@@ -343,7 +349,6 @@ export function ProjectTasks() {
           onCreateAndStartTask={handleCreateAndStartTask}
           onUpdateTask={handleUpdateTask}
         />
-        </div>
 
         {/* Tasks View */}
         {tasks.length === 0 ? (
@@ -361,7 +366,8 @@ export function ProjectTasks() {
             </Card>
           </div>
         ) : (
-          <div className="px-4 scroll">
+          <div className="px-8 overflow-x-scroll my-4">
+            <div className="min-w-[900px] max-w-[2000px] relative">
               <TaskKanbanBoard
                 tasks={tasks}
                 onDragEnd={handleDragEnd}
@@ -370,6 +376,7 @@ export function ProjectTasks() {
                 onViewTaskDetails={handleViewTaskDetails}
               />
             </div>
+          </div>
         )}
       </div>