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

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);
+    }
+  }
+}