task overlay responsive

src/app/app.routes.ts

@@ -7,13 +7,13 @@ import { AddTaskComponent } from './components/add-task/add-task.component';
 import { BoardComponent } from './components/board/board.component';
 import { ContactsComponent } from './components/contacts/contacts.component';
 import { OverlayComponent } from './shared/components/overlay/overlay.component';
+import { TaskOverlayComponent } from './shared/components/overlay/task-overlay/task-overlay.component';
 
 export const routes: Routes = [
   { path: '', component: SummaryComponent },
   { path: 'summary', component: SummaryComponent },
   { path: 'add-task', component: AddTaskComponent },
   { path: 'board', component: BoardComponent },
-  { path: 'board/:id', component: BoardComponent },
   { path: 'contacts', component: ContactsComponent },
   { path: 'contacts/:id', component: ContactsComponent },
   { path: 'help', component: HelpComponent },

src/app/shared/components/overlay/overlay.component.html

@@ -2,18 +2,16 @@
   *ngIf="overlayData"
   [ngClass]="{ overlay: isOverlay, 'overlay-mobile': isOverlayMobile }"
 >
-  <div class="overlay-content">
-    @if (overlayType === "taskOverlay") {
-    <app-task-overlay
-      [overlayData]="overlayData"
-      [overlayMobile]="overlayMobile"
-      (closeDialogEmitter)="onCloseOverlay($event)"
-    ></app-task-overlay>
-    } @if (overlayType === "taskOverlayEdit") {
-    <app-task-edit-overlay
-      [overlayData]="overlayData"
-      (closeDialogEmitter)="onCloseOverlay($event)"
-    ></app-task-edit-overlay>
-    }
-  </div>
+  @if (overlayType === "taskOverlay") {
+  <app-task-overlay
+    [overlayData]="overlayData"
+    [overlayMobile]="overlayMobile"
+    (closeDialogEmitter)="onCloseOverlay($event)"
+  ></app-task-overlay>
+  } @if (overlayType === "taskOverlayEdit") {
+  <app-task-edit-overlay
+    [overlayData]="overlayData"
+    (closeDialogEmitter)="onCloseOverlay($event)"
+  ></app-task-edit-overlay>
+  }
 </div>

src/app/shared/components/overlay/overlay.component.scss

@@ -1,7 +1,9 @@
 .overlay {
   position: fixed;
   top: 0;
+  bottom: 0;
   left: 0;
+  right: 0;
   width: 100vw;
   height: 100vh;
   backdrop-filter: blur(5px);
@@ -11,19 +13,14 @@
   align-items: center;
   z-index: 999;
 }
+
 .overlay-mobile {
   position: fixed;
-  top: 96px;
-  bottom: 80px;
+  top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
   width: 100vw;
   height: 100vh;
   z-index: 999;
 }
-
-.overlay-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

src/app/shared/components/overlay/task-overlay/task-overlay.component.scss

@@ -9,7 +9,7 @@
 .overlay-mobile {
   background-color: var(--white);
   width: calc(100vw - 24px);
-  height: calc(100vh - 200px);
+  height: calc(100vh - 24px);
   padding: 12px;
 }
 
@@ -37,7 +37,7 @@
 }
 
 .content-mobile {
-  height: calc(700px - 159px);
+  height: calc(100vh - 214px);
   overflow-y: auto;
 }