Removed sticky bottom footer since it breaks for responsive screens

Fixed images stretching with small screens
Fixed some issues with small screens

src/app/app.component.html

@@ -3,12 +3,12 @@
     <app-site-header></app-site-header>
   </header>
 
-  <main class="p-5 pb-96">
+  <main class="break-words p-5 text-lg">
     <router-outlet />
     <app-show-session></app-show-session>
   </main>
 
-  <footer class="absolute bottom-0 w-full">
+  <footer>
     <app-site-footer></app-site-footer>
   </footer>
 </div>

src/app/portal/features/site-footer/site-footer.component.html

@@ -1,7 +1,7 @@
-<nav class="mt-2" color="primary">
-  <div class="pt-px-5 flex justify-around pb-5 no-underline">
+<nav class="mt-2 w-full" color="primary">
+  <div class="pt-px-5 flex flex-wrap justify-around pb-5 no-underline">
     <a routerLink="/" class="mx-12 content-center text-center"
-      ><img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="h-24" /></a
+      ><img src="assets/images/GHGA_logo.png" alt="GHGA Logo" class="max-h-24" /></a
     ><a href="https://ghga.de" class="mx-12 grow content-center text-center"
       ><span><mat-icon inline="true">globe</mat-icon></span
       >GHGA Website</a
@@ -18,7 +18,9 @@
   </div>
   <div class="swirl"></div>
 </nav>
-<div class="icons-div mb-2 flex justify-center text-center text-4xl no-underline">
+<div
+  class="icons-div mb-2 flex w-full flex-wrap justify-center text-center text-4xl no-underline"
+>
   <a href="https://genomic.social/@ghga"
     ><mat-icon inline="true" fontSet="fab" fontIcon="fa-mastodon"></mat-icon
   ></a>
@@ -38,7 +40,7 @@
     ><mat-icon inline="true">email</mat-icon></a
   >
 </div>
-<div class="pb-4 text-sm">
+<div class="w-full pb-4 text-sm">
   <p class="text-center">©{{ year }} GHGA. All Rights Reserved.</p>
   <p class="text-center">
     <a href="https://www.ghga.de/imprint" class="underline">Imprint</a> |

src/app/portal/features/site-header/site-header.component.html

@@ -1,8 +1,8 @@
 <mat-toolbar class="py-2">
   <mat-toolbar-row class="align-center flex justify-between">
-    <div class="h-3/4 basis-1/4">
+    <div class="flex h-3/4 basis-1/4 items-center">
       <a routerLink="/"
-        ><img src="assets/images/GHGA_logo_clean.png" class="h-full" alt="GHGA Logo"
+        ><img src="assets/images/GHGA_logo_clean.png" class="max-h-12" alt="GHGA Logo"
       /></a>
     </div>