From effcab59472d8eeba24e2874a6cdb75a66955768 Mon Sep 17 00:00:00 2001
From: Borgia Leiva <edbole@campusaula.com>
Date: Wed, 11 Feb 2026 11:09:54 +0100
Subject: [PATCH] Changed layout for project detail page

---
 .../task-item/task-item.component.css         |  3 +-
 .../task-item/task-item.component.html        |  2 +-
 .../project-details.component.css             | 50 +++++++++-
 .../project-details.component.html            | 98 ++++++++++---------
 4 files changed, 99 insertions(+), 54 deletions(-)

diff --git a/src/app/components/task-item/task-item.component.css b/src/app/components/task-item/task-item.component.css
index 1eaf5fe..a44e2bd 100644
--- a/src/app/components/task-item/task-item.component.css
+++ b/src/app/components/task-item/task-item.component.css
@@ -33,8 +33,9 @@
   background-color: #ffffff;
   font-size: 12px;
   color: #374151;
-  min-width: 140px;
+  width: fit-content;
   height: 32px;
+  text-align: center;
 }
 
 .btn-remove {
diff --git a/src/app/components/task-item/task-item.component.html b/src/app/components/task-item/task-item.component.html
index d6972e4..475e8dc 100644
--- a/src/app/components/task-item/task-item.component.html
+++ b/src/app/components/task-item/task-item.component.html
@@ -12,7 +12,7 @@
       (ngModelChange)="onStatusChange($event)"
     >
       @for (status of statusOptions; track status) {
-        <option [value]="status">{{ status.replace('_', ' ') }}</option>
+        <option [value]="status">{{ status.replace('_', ' ').toUpperCase() }}</option>
       }
     </select>
     <button class="btn-edit" type="button" aria-label="Edit task" (click)="onEdit()">Edit</button>
diff --git a/src/app/pages/project-details/project-details.component.css b/src/app/pages/project-details/project-details.component.css
index e53e872..ecefc1f 100644
--- a/src/app/pages/project-details/project-details.component.css
+++ b/src/app/pages/project-details/project-details.component.css
@@ -1,12 +1,19 @@
 .content {
   padding: 40px;
-  max-width: 1200px;
+  width: clamp(70vw, 85vw, 90vw);
+  max-width: 80%;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
 }
 
+@media (max-width: 600px) {
+  .content{
+    max-width: 95%;
+  }
+}
+
 .title h2 {
   margin: 0 0 6px 0;
   font-size: 26px;
@@ -153,13 +160,13 @@
 }
 
 .collaborators-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: flex;
+  flex-direction: column;
   gap: 16px;
 }
 
 .collaborators-grid--single {
-  grid-template-columns: minmax(0, 1fr);
+    flex-direction: column;
 }
 
 .btn-add-task {
@@ -205,6 +212,41 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  flex: 1;
+}
+
+.cards-row {
+  width: 100%;
+  height: max-content;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: stretch;
+}
+
+.cards-row section {
+  height: auto;
+  width: 100%;
+}
+
+.cards-row .tasks-card {
+  display: flex;
+  flex-direction: column;
+  flex: 3;
+}
+
+.cards-row .collaborators-card {
+  flex: 1;
+}
+
+@media (max-width: 960px) {
+  .content {
+    width: 90vw;
+  }
+
+  .cards-row {
+    flex-direction: column;
+  }
 }
 
 .loading p,
diff --git a/src/app/pages/project-details/project-details.component.html b/src/app/pages/project-details/project-details.component.html
index a7c95c6..45ea229 100644
--- a/src/app/pages/project-details/project-details.component.html
+++ b/src/app/pages/project-details/project-details.component.html
@@ -17,58 +17,60 @@
         </p>
       </section>
 
-      <section class="tasks-card">
-        <div class="tasks-header">
-          <h4>Tasks</h4>
-          <span class="tasks-count">
-            {{ project()?.tasks?.length ?? 0 }} total • {{ taskCompletionPercentage }}% completed
-          </span>
-        </div>
-
-        @if ((project()?.tasks?.length ?? 0) > 0) {
-          <div class="tasks-list">
-            @for (task of project()?.tasks ?? []; track task.id) {
-              <app-task-item
-                [task]="task"
-                [projectId]="project()?.id"
-                (statusChange)="onTaskStatusChange($event)"
-              />
-            }
+      <div class="cards-row">
+        <section class="tasks-card">
+          <div class="tasks-header">
+            <h4>Tasks</h4>
+            <span class="tasks-count">
+              {{ project()?.tasks?.length ?? 0 }} total • {{ taskCompletionPercentage }}% completed
+            </span>
           </div>
-        } @else {
-          <div class="empty-state">
-            <p>No tasks yet.</p>
+
+          @if ((project()?.tasks?.length ?? 0) > 0) {
+            <div class="tasks-list">
+              @for (task of project()?.tasks ?? []; track task.id) {
+                <app-task-item
+                  [task]="task"
+                  [projectId]="project()?.id"
+                  (statusChange)="onTaskStatusChange($event)"
+                />
+              }
+            </div>
+          } @else {
+            <div class="empty-state">
+              <p>No tasks yet.</p>
+            </div>
+          }
+
+          <button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
+        </section>
+
+        <section class="collaborators-card">
+          <div class="collaborators-header">
+            <h4>Collaborators</h4>
+            <span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
           </div>
-        }
 
-        <button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
-      </section>
+          @if ((project()?.users?.length ?? 0) > 0) {
+            <div
+              class="collaborators-grid"
+              [class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
+            >
+              @for (user of project()?.users ?? []; track user.id) {
+                <app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
+              }
+            </div>
+          } @else {
+            <div class="empty-state">
+              <p>No collaborators yet.</p>
+            </div>
+          }
 
-      <section class="collaborators-card">
-        <div class="collaborators-header">
-          <h4>Collaborators</h4>
-          <span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
-        </div>
-
-        @if ((project()?.users?.length ?? 0) > 0) {
-          <div
-            class="collaborators-grid"
-            [class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
-          >
-            @for (user of project()?.users ?? []; track user.id) {
-              <app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
-            }
-          </div>
-        } @else {
-          <div class="empty-state">
-            <p>No collaborators yet.</p>
-          </div>
-        }
-
-        <button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
-          Add collaborator
-        </button>
-      </section>
+          <button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
+            Add collaborator
+          </button>
+        </section>
+      </div>
 
       <section class="danger-zone">
         <div class="danger-header">