responsive

src/app/components/board/board.component.html

@@ -31,7 +31,7 @@
           <span>To do</span
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
-        <div id="todo">
+        <div id="todo" class="details">
           <ng-container *ngIf="getTask('todo').length > 0; else noTask">
             <app-task
               *ngFor="let task of getTask('todo')"
@@ -53,7 +53,7 @@
           <span>In progress</span
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
-        <div id="inprogress">
+        <div id="inprogress" class="details">
           <ng-container *ngIf="getTask('inprogress').length > 0; else noTask">
             <app-task
               *ngFor="let task of getTask('inprogress')"
@@ -75,7 +75,7 @@
           <span>Await feedback</span
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
-        <div id="awaitfeedback">
+        <div id="awaitfeedback" class="details">
           <ng-container
             *ngIf="getTask('awaitfeedback').length > 0; else noTask"
           >
@@ -99,14 +99,13 @@
           <span>Done</span
           ><img src="./../../../assets/img/board/add.svg" alt="add" />
         </div>
-        <div id="todo">
+        <div id="todo" class="details">
           <ng-container *ngIf="getTask('done').length > 0; else noTask">
             <app-task
               *ngFor="let task of getTask('done')"
               [task]="task"
             ></app-task>
           </ng-container>
-
           <ng-template #noTask>
             <div class="empty-task">No tasks</div>
           </ng-template>

src/app/components/board/board.component.scss

@@ -1,6 +1,7 @@
 section {
   margin: 0;
   background-color: var(--very-light-gray);
+  padding-bottom: 32px;
 }
 
 .title {
@@ -186,7 +187,7 @@ section {
   .search {
     padding-right: 0;
     input {
-      width: calc(100vw - 120px);
+      width: calc(100vw - 113px);
     }
     .line {
       right: 35px;
@@ -211,21 +212,25 @@ section {
     width: 100%;
     padding-right: 0;
   }
+
   .empty-task {
+    width: 100%;
     max-width: 100%;
   }
-  #inprogress {
+
+  .details {
     display: flex;
     width: calc(100vw - 85px);
     overflow-x: auto;
   }
+
   app-task {
     padding-right: 16px;
   }
 }
 
 @media screen and (max-width: 450px) {
-  #inprogress {
+  .details {
     width: calc(100vw - 55px);
   }
 

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss

@@ -17,10 +17,10 @@ nav {
   flex-direction: column;
   width: 80px;
   height: 65px;
+  border-radius: 16px;
   cursor: pointer;
   &:hover {
     background-color: var(--very-dark-blue);
-    border-radius: 8px;
   }
   p {
     color: var(--light-gray);
@@ -35,3 +35,24 @@ nav {
 .active {
   background-color: var(--very-dark-blue);
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 450px) {
+  .nav-links {
+    width: 70px;
+    height: 60px;
+    img {
+      width: 20px;
+      height: auto;
+    }
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .nav-links {
+    p {
+      font-size: 12px;
+    }
+  }
+}