style: Make table head sticky

src/app/features/ahbs/components/ahb-table/ahb-table.component.html

@@ -1,75 +1,105 @@
-<table class="table-auto w-full text-sm text-gray-500">
-  <thead class="text-xs text-gray-700 uppercase bg-gray-50" #header>
-    <tr>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">Segmentgruppe</th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">Segmentname</th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">Segment</th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">Datenelement</th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">Qualifier</th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">Name</th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
-        Pflichtfeld-Kennzeichen
-      </th>
-      <th scope="col" class="sticky top-0 bg-gray-50 px-6 py-3 text-left">
-        Bedingung / Hinweis / Format
-      </th>
-    </tr>
-  </thead>
-  <tbody>
-    @for (line of lines(); track line.index; let i = $index) {
-      <tr [class]="getRowClass(i)">
-        <td
-          class="px-6 py-4"
-          [class.font-bold]="isNewSegment(i)"
-          [innerHTML]="line.segment_group_key | highlight: highlight()"></td>
-        <td
-          class="px-6 py-4"
-          [class.font-bold]="isNewSegment(i)"
-          [innerHTML]="line.section_name | highlight: highlight()"></td>
-        <td
-          class="px-6 py-4"
-          [class.font-bold]="isNewSegment(i)"
-          [innerHTML]="line.segment_code | highlight: highlight()"></td>
-        <td class="px-6 py-4" [innerHTML]="line.data_element | highlight: highlight()"></td>
-        <td class="px-6 py-4">
-          @if (generateEbdDeepLink(line.value_pool_entry) !== null) {
+<div class="relative bg-hf-pastell-rot">
+  <table class="table-auto w-full text-sm text-gray-500">
+    <thead>
+      <tr>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Segmentgruppe
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Segmentname
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Segment
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Datenelement
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Qualifier
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Name
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Pflichtfeld-Kennzeichen
+        </th>
+        <th
+          scope="col"
+          class="sticky top-0 bg-white px-6 py-3 text-left text-xs text-gray-700 uppercase">
+          Bedingung / Hinweis / Format
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (line of lines(); track line.index; let i = $index) {
+        <tr [class]="getRowClass(i)">
+          <td
+            class="px-6 py-4"
+            [class.font-bold]="isNewSegment(i)"
+            [innerHTML]="line.segment_group_key | highlight: highlight()"></td>
+          <td
+            class="px-6 py-4"
+            [class.font-bold]="isNewSegment(i)"
+            [innerHTML]="line.section_name | highlight: highlight()"></td>
+          <td
+            class="px-6 py-4"
+            [class.font-bold]="isNewSegment(i)"
+            [innerHTML]="line.segment_code | highlight: highlight()"></td>
+          <td class="px-6 py-4" [innerHTML]="line.data_element | highlight: highlight()"></td>
+          <td class="px-6 py-4">
+            @if (generateEbdDeepLink(line.value_pool_entry) !== null) {
+              <a
+                [href]="generateEbdDeepLink(line.value_pool_entry)"
+                target="_blank"
+                class="hover:underline font-bold text-ebd_primary flex flex-row gap-1 items-center">
+                {{ line.value_pool_entry }} <app-icon-link />
+              </a>
+            } @else {
+              {{ line.value_pool_entry }}
+            }
+          </td>
+          <td class="px-6 py-4" [innerHTML]="line.name | highlight: highlight()"></td>
+          <td class="px-6 py-4">
             <a
-              [href]="generateEbdDeepLink(line.value_pool_entry)"
+              [href]="generateBedingungsbaumDeepLink(line.ahb_expression)"
               target="_blank"
-              class="hover:underline font-bold text-ebd_primary flex flex-row gap-1 items-center">
-              {{ line.value_pool_entry }} <app-icon-link />
+              class="hover:underline">
+              {{ line.ahb_expression }}
             </a>
-          } @else {
-            {{ line.value_pool_entry }}
-          }
-        </td>
-        <td class="px-6 py-4" [innerHTML]="line.name | highlight: highlight()"></td>
-        <td class="px-6 py-4">
-          <a
-            [href]="generateBedingungsbaumDeepLink(line.ahb_expression)"
-            target="_blank"
-            class="hover:underline">
-            {{ line.ahb_expression }}
-          </a>
-        </td>
-        <td class="px-6 py-4 conditions-column">
-          @if (line.conditions) {
-            @for (
-              condition of addConditionLineBreaks(getDisplayText(line.conditions, i));
-              track $index
-            ) {
-              <div [innerHTML]="condition | highlight: highlight()"></div>
+          </td>
+          <td class="px-6 py-4 conditions-column">
+            @if (line.conditions) {
+              @for (
+                condition of addConditionLineBreaks(getDisplayText(line.conditions, i));
+                track $index
+              ) {
+                <div [innerHTML]="condition | highlight: highlight()"></div>
+              }
+              @if (shouldShowToggle(line.conditions)) {
+                <button
+                  (click)="toggleExpand(i)"
+                  class="text-secondary hover:text-primary text-sm mt-1">
+                  {{ isExpanded(i) ? 'weniger anzeigen' : 'mehr anzeigen' }}
+                </button>
+              }
             }
-            @if (shouldShowToggle(line.conditions)) {
-              <button
-                (click)="toggleExpand(i)"
-                class="text-secondary hover:text-primary text-sm mt-1">
-                {{ isExpanded(i) ? 'weniger anzeigen' : 'mehr anzeigen' }}
-              </button>
-            }
-          }
-        </td>
-      </tr>
-    }
-  </tbody>
-</table>
+          </td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</div>

src/app/features/ahbs/views/ahb-page/ahb-page.component.html

@@ -1,6 +1,6 @@
-<div class="min-h-screen flex flex-col bg-hf-pastell-rot">
-  <!-- Fixed Header -->
-  <app-header class="sticky top-0 z-50">
+<div class="h-screen flex flex-col">
+  <!-- Fixed Main Header -->
+  <app-header class="flex-none">
     <app-ahb-search-form-header
       class="flex-1 hidden md:inline"
       [formatVersion]="formatVersion()"
@@ -18,64 +18,60 @@
   </app-header>
 
   <!-- Scrollable Content -->
-  <div class="flex-1 overflow-auto mb-[120px]" *ngIf="!errorOccurred">
-    <div class="flex-1 flex flex-col h-full" #scroll>
-      <div>
-        @if (ahb$ | async; as ahb) {
-          <div class="flex-none flex flex-col md:flex-row mb-10">
-            <section class="pt-10 mx-5">
-              <h2 class="border-b inline-block pb-[12px] mb-[20px] uppercase">
-                Anwendungshandbücher für Menschen
-              </h2>
-              <h3 class="font-bold text-[20px]">
-                Anwendungshandbuch {{ ahb.meta.pruefidentifikator }}
-              </h3>
-              <p class="text-[20px] mb-5">{{ ahb.meta.description }}</p>
-              <p class="text-[14px]">
-                <span class="font-bold">Sender:</span>
-                {{ getSenderEmpfaenger(ahb.meta.direction).sender }}<br />
-                <span class="font-bold">Empfänger:</span>
-                {{ getSenderEmpfaenger(ahb.meta.direction).empfaenger }}
-              </p>
-              <p class="text-[14px]">
-                <span class="font-bold"> Format: </span>
-                {{ edifactFormat() }}
-              </p>
-            </section>
-            <section class="pt-10 mx-5 text-right flex-1">
-              <div class="flex justify-end items-center space-x-3">
-                <app-icon-copy-url />
-                <app-export-button [formatVersion]="formatVersion()" [pruefi]="pruefi()" />
-              </div>
-            </section>
+  <div class="flex-1 overflow-auto relative bg-hf-pastell-rot" *ngIf="!errorOccurred">
+    <!-- Metadata Section -->
+    @if (ahb$ | async; as ahb) {
+      <div class="flex flex-col md:flex-row mb-10">
+        <section class="pt-10 mx-5">
+          <h2 class="border-b inline-block pb-[12px] mb-[20px] uppercase">
+            Anwendungshandbücher für Menschen
+          </h2>
+          <h3 class="font-bold text-[20px]">
+            Anwendungshandbuch {{ ahb.meta.pruefidentifikator }}
+          </h3>
+          <p class="text-[20px] mb-5">{{ ahb.meta.description }}</p>
+          <p class="text-[14px]">
+            <span class="font-bold">Sender:</span>
+            {{ getSenderEmpfaenger(ahb.meta.direction).sender }}<br />
+            <span class="font-bold">Empfänger:</span>
+            {{ getSenderEmpfaenger(ahb.meta.direction).empfaenger }}
+          </p>
+          <p class="text-[14px]">
+            <span class="font-bold"> Format: </span>
+            {{ edifactFormat() }}
+          </p>
+        </section>
+        <section class="pt-10 mx-5 text-right flex-1">
+          <div class="flex justify-end items-center space-x-3">
+            <app-icon-copy-url />
+            <app-export-button [formatVersion]="formatVersion()" [pruefi]="pruefi()" />
           </div>
-        }
+        </section>
       </div>
+    }
 
-      <div class="h-full">
-        @if (lines$ | async; as lines) {
-          <app-ahb-table
-            [lines]="lines"
-            [highlight]="searchQuery()"
-            [formatVersion]="formatVersion()"
-            [pruefi]="pruefi()"
-            (selectElement)="scrollToElement($event.element, $event.offsetY)" />
-        } @else {
-          <div class="h-full flex items-center justify-center">
-            <p class="text-xl">AHB-Tabelle wird geladen ...</p>
-          </div>
-        }
+    <!-- Table Section -->
+    @if (lines$ | async; as lines) {
+      <app-ahb-table
+        [lines]="lines"
+        [highlight]="searchQuery()"
+        [formatVersion]="formatVersion()"
+        [pruefi]="pruefi()"
+        (selectElement)="scrollToElement($event.element, $event.offsetY)" />
+    } @else {
+      <div class="h-full flex items-center justify-center">
+        <p class="text-xl">AHB-Tabelle wird geladen ...</p>
       </div>
-    </div>
+    }
   </div>
 
-  <div *ngIf="errorOccurred" class="flex-1 flex items-center justify-center mb-[120px]">
+  <div *ngIf="errorOccurred" class="flex-1 flex items-center justify-center">
     <app-fallback-page
       class="w-1/2"
       [pruefi]="pruefi()"
       [formatVersion]="formatVersion()"></app-fallback-page>
   </div>
 
   <!-- Fixed Footer -->
-  <app-footer class="fixed bottom-0 left-0 right-0 z-50" />
+  <app-footer class="flex-none" />
 </div>

src/app/shared/components/footer/footer.component.html

@@ -1,5 +1,5 @@
 <div class="w-full">
-  <footer id="solutions" class="flex bg-hf-off-white justify-center flex-wrap py-2">
+  <footer id="solutions" class="flex bg-white justify-center flex-wrap py-2">
     <a class="ahbesser" href="https://ahb-tabellen.hochfrequenz.de">AHB-Tabellen</a>
     <a class="fristenkalender" href="https://fristenkalender.hochfrequenz.de">Fristenkalender</a>
     <a class="ahahnb" href="https://bedingungsbaum.hochfrequenz.de">Bedingungsbaum</a>