responsive

src/app/app.component.scss

@@ -41,9 +41,9 @@ app-header {
   .content {
     display: flex;
     justify-content: center;
-    width: 100vw;
+    width: calc(100vw - 64px);
     height: calc(100vh - 210px);
-    padding: 32px 0 0 0;
+    padding: 32px;
   }
   app-sidebar {
     display: none;
@@ -52,3 +52,13 @@ app-header {
     display: unset;
   }
 }
+
+@media screen and (max-width: 450px) {
+  .content {
+    display: flex;
+    justify-content: center;
+    width: calc(100vw - 32px);
+    height: calc(100vh - 210px);
+    padding: 32px 16px;
+  }
+}

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

@@ -36,16 +36,15 @@ section {
     background-repeat: no-repeat;
     background-size: 24px;
   }
-}
-
-.line {
-  position: absolute;
-  top: 8px;
-  right: 250px;
-  height: 18px;
-  width: 1px;
-  background-color: var(--gray);
-  margin: 0 6px;
+  .line {
+    position: absolute;
+    top: 8px;
+    right: 250px;
+    height: 18px;
+    width: 1px;
+    background-color: var(--gray);
+    margin: 0 6px;
+  }
 }
 
 .btn-inside {
@@ -140,3 +139,71 @@ section {
   color: var(--gray);
   margin: 15.5px 0;
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 1100px) {
+  .search {
+    input {
+      width: 220px;
+    }
+  }
+}
+
+@media screen and (max-width: 1020px) {
+  .search {
+    input {
+      width: 150px;
+    }
+  }
+
+  .title {
+    font-size: 50px;
+  }
+}
+
+@media screen and (max-width: 910px) {
+  .search {
+    input {
+      width: 220px;
+    }
+  }
+  .status {
+    justify-content: center;
+    padding-left: 16px;
+  }
+}
+
+@media screen and (max-width: 750px) {
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    margin: 16px;
+  }
+
+  .title {
+    margin-bottom: 24px;
+  }
+
+  .search {
+    padding-right: 0;
+    input {
+      width: calc(100vw - 120px);
+    }
+    .line {
+      right: 35px;
+    }
+  }
+
+  .btn {
+    position: absolute;
+    top: -75px;
+    right: 0px;
+    width: 40px;
+    height: 40px;
+    padding: 3px;
+    span {
+      display: none;
+    }
+  }
+}

src/app/components/summary/summary.component.scss

@@ -155,6 +155,8 @@
   }
 }
 
+/*------------- RESPONSIVE -------------*/
+
 @media screen and (max-width: 1250px) {
   .right-container {
     display: none;