Fix Root Layout to be Responsive

src/app/app.component.html

@@ -1,3 +1,5 @@
 <app-header></app-header>
 <app-notification-box></app-notification-box>
-<router-outlet/>
+<main>
+    <router-outlet />
+</main>

src/app/app.component.scss

@@ -0,0 +1,17 @@
+app-header {
+  width: 100%;
+}
+
+main {
+  flex-grow: 1;
+  min-width: 100%;
+  width: fit-content;
+  box-sizing: border-box;
+  padding: 2rem;
+
+  @media (min-width: 60rem) {
+    width: 80%;
+    min-width: 72rem;
+    max-width: 80rem;
+  }
+}

src/styles.scss

@@ -1,9 +1,9 @@
 @use '@angular/material' as mat;
 
-
 html,
 body {
   height: 100%;
+  min-height: 100%;
   margin: 0;
 
   background: var(--mat-sys-surface);
@@ -19,3 +19,11 @@ body {
       density: 0));
 
 }
+
+app-root {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}