From 73a13eae539e6cd08f2bdec530ccb7d13460532d Mon Sep 17 00:00:00 2001
From: konstantin <konstantin.klein@hochfrequenz.de>
Date: Thu, 30 Jan 2025 08:59:20 +0100
Subject: [PATCH] fix(UI): let footer stay at bottom of page, even when
 loading, and center loading message (#417)

* fix(UI): let footer stay at bottom of page, even when loading

* Utilize full viewport height and center `loading ...` message

* Change `loading ...` to `AHB-Tabelle wird geladen ...`

---------

Co-authored-by: Konstantin <konstantin.klein+github@hochfrequenz.de>
Co-authored-by: olli <info@oliverlahr.de>
---
 .../ahbs/views/ahb-page/ahb-page.component.html        | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/features/ahbs/views/ahb-page/ahb-page.component.html b/src/app/features/ahbs/views/ahb-page/ahb-page.component.html
index c2c4eb21c..aced67b41 100644
--- a/src/app/features/ahbs/views/ahb-page/ahb-page.component.html
+++ b/src/app/features/ahbs/views/ahb-page/ahb-page.component.html
@@ -16,8 +16,8 @@
       [totalResults]="table()?.markElements()?.length" />
   </app-header>
 
-  <div *ngIf="!errorOccurred">
-    <div class="flex-1 flex flex-col overflow-auto" #scroll>
+  <div class="flex-1" *ngIf="!errorOccurred">
+    <div class="flex-1 flex flex-col overflow-auto h-full" #scroll>
       <div>
         @if (ahb$ | async; as ahb) {
           <div class="flex-none flex flex-col md:flex-row mb-10">
@@ -50,7 +50,7 @@ <h3 class="font-bold text-[20px]">
         }
       </div>
 
-      <div>
+      <div class="h-full">
         @if (lines$ | async; as lines) {
           <app-ahb-table
             [lines]="lines"
@@ -59,8 +59,8 @@ <h3 class="font-bold text-[20px]">
             [pruefi]="pruefi()"
             (selectElement)="scrollToElement($event.element, $event.offsetY)" />
         } @else {
-          <div class="flex-1 flex items-center justify-center">
-            <p class="text-xl">loading ...</p>
+          <div class="h-full flex items-center justify-center">
+            <p class="text-xl">AHB-Tabelle wird geladen ...</p>
           </div>
         }
       </div>