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

…nter 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>

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>