Add FullSizeComponent for dynamic height adjustment and update SentComponent to use it

frontend/src/app/pages/forms/sent/sent.component.html

@@ -6,8 +6,15 @@
     </div>
   </app-header>
   <main>
-    <section class="darkmodeSection">
+    <app-full-size>
-      <p>{{ message }}</p>
+      <ng-content>
-    </section>
+        <section class="darkmodeSection full-height flex">
+          <div class="margin-auto">
+            <p>{{ message }}</p>
+          </div>
+        </section>
+      </ng-content>
+    </app-full-size>
   </main>
 </div>
+

frontend/src/app/pages/forms/sent/sent.component.ts

@@ -1,11 +1,13 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
+import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
 import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-sent',
   imports: [
-    HeaderComponent
+    HeaderComponent,
+    FullSizeComponent
   ],
   templateUrl: './sent.component.html',
   styleUrl: './sent.component.scss',

frontend/src/app/shared-components/full-size/full-size.component.html

@@ -0,0 +1,3 @@
+<div class="full-size-container">
+  <ng-content></ng-content>
+</div>

frontend/src/app/shared-components/full-size/full-size.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.full-size-container {
+  display: flex;
+  flex-direction: column;
+}

frontend/src/app/shared-components/full-size/full-size.component.ts

@@ -0,0 +1,80 @@
+import {AfterViewInit, Component, ElementRef, Input, OnDestroy, Renderer2} from '@angular/core';
+
+@Component({
+  selector: 'app-full-size',
+  standalone: true,
+  imports: [],
+  templateUrl: './full-size.component.html',
+  styleUrl: './full-size.component.scss'
+})
+export class FullSizeComponent implements AfterViewInit, OnDestroy {
+  private resizeObserver: ResizeObserver | null = null;
+  private boundHandleResize: any;
+
+  // Optional extra offset in pixels to subtract from available height
+  @Input() extraOffset: number = 0;
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2
+  ) {
+  }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver();
+    this.updateContainerHeight();
+
+    this.boundHandleResize = this.handleResize.bind(this);
+    window.addEventListener('resize', this.boundHandleResize);
+
+    // Ensure first paint sets correct height
+    setTimeout(() => this.updateContainerHeight(), 0);
+  }
+
+  ngOnDestroy(): void {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    if (this.boundHandleResize) {
+      window.removeEventListener('resize', this.boundHandleResize);
+    }
+  }
+
+  private handleResize() {
+    this.updateContainerHeight();
+  }
+
+  private setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateContainerHeight();
+    });
+
+    const headerElement = document.querySelector('app-header');
+    if (headerElement) {
+      this.resizeObserver.observe(headerElement);
+    }
+
+    const footerElement = document.querySelector('footer');
+    if (footerElement) {
+      this.resizeObserver.observe(footerElement);
+    }
+  }
+
+  private updateContainerHeight() {
+    const headerElement = document.querySelector('app-header');
+    const footerElement = document.querySelector('footer');
+
+    const container: HTMLElement | null = this.elementRef.nativeElement.querySelector('.full-size-container');
+
+    if (container) {
+      const headerHeight = headerElement ? headerElement.getBoundingClientRect().height : 0;
+      const footerHeight = footerElement ? footerElement.getBoundingClientRect().height : 0;
+
+      const totalOffset = headerHeight + footerHeight + (this.extraOffset || 0);
+      const calculatedHeight = `calc(100vh - ${totalOffset}px)`;
+      this.renderer.setStyle(container, 'height', calculatedHeight);
+    }
+  }
+}

frontend/src/styles.scss

@@ -479,3 +479,7 @@ main .container {
     width: 100%;
   }
 }
+
+.margin-auto {
+  margin: auto
+}