From e835c511bef7d1e3d86b834734a1d9c51f80ad85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=A4ume?= <dominik.saeume@hmmh.de>
Date: Thu, 9 Jan 2025 01:23:36 +0100
Subject: [PATCH] Fix Root Layout to be Responsive

---
 src/app/app.component.html |  4 +++-
 src/app/app.component.scss | 17 +++++++++++++++++
 src/styles.scss            | 10 +++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 332550e..624fc4d 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e69de29..3f6b34b 100644
--- a/src/app/app.component.scss
+++ b/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: 60rem;
+    max-width: 80rem;
+  }
+}
diff --git a/src/styles.scss b/src/styles.scss
index e040c88..a03f579 100644
--- a/src/styles.scss
+++ b/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;
+}