Changed layout for project detail page

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 {

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>

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;
+  display: flex;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  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,

src/app/pages/project-details/project-details.component.html

@@ -17,6 +17,7 @@
         </p>
       </section>
 
+      <div class="cards-row">
         <section class="tasks-card">
           <div class="tasks-header">
             <h4>Tasks</h4>
@@ -69,6 +70,7 @@
             Add collaborator
           </button>
         </section>
+      </div>
 
       <section class="danger-zone">
         <div class="danger-header">