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

@@ -6,7 +6,6 @@
     </div>
   </app-header>
   <main>
-    <app-full-size>
     <section class="darkmodeSection appeal-container">
       <div class="form-container">
         <div class="pages">
@@ -36,8 +35,7 @@
           @if (currentPageIndex === 1) {
             <section class="formPage">
               <div class="description">
-                  <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct
+                <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct account
-                    account
                   please continue</p>
                 <br>
                 <p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
@@ -103,8 +101,7 @@
                     </div>
                   }
                 </div>
-                  <button mat-raised-button (click)="validateMailOrNextPage()"
+                <button mat-raised-button (click)="validateMailOrNextPage()" [disabled]="form.controls.email.invalid">
-                          [disabled]="form.controls.email.invalid">
                   Next
                 </button>
               </section>
@@ -160,7 +157,5 @@
         }
       </div>
     </section>
-
-    </app-full-size>
   </main>
 </div>

frontend/src/app/pages/forms/appeal/appeal.component.scss

@@ -5,7 +5,7 @@
 .appeal-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  min-height: 80vh;
 }
 
 main {

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

@@ -1,4 +1,14 @@
-import {Component, computed, inject, OnDestroy, OnInit, signal} from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  signal
+} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {AppealsService, EmailEntry, HistoryService, MailService, MinecraftAppeal, PunishmentHistory} from '@api';
 import {HeaderComponent} from '@header/header.component';
@@ -14,7 +24,6 @@ import {HistoryFormatService} from '@pages/reference/bans/history-format.service
 import {MatDialog} from '@angular/material/dialog';
 import {VerifyMailDialogComponent} from '@pages/forms/verify-mail-dialog/verify-mail-dialog.component';
 import {Router} from '@angular/router';
-import {FullSizeComponent} from '@shared-components/full-size/full-size.component';
 
 @Component({
   selector: 'app-appeal',
@@ -28,12 +37,11 @@ import {FullSizeComponent} from '@shared-components/full-size/full-size.componen
     MatSelectModule,
     MatInputModule,
     ReactiveFormsModule,
-    FullSizeComponent,
   ],
   templateUrl: './appeal.component.html',
   styleUrl: './appeal.component.scss'
 })
-export class AppealComponent implements OnInit, OnDestroy {
+export class AppealComponent implements OnInit, OnDestroy, AfterViewInit {
 
   private mailService = inject(MailService);
   private historyFormatService = inject(HistoryFormatService);
@@ -53,7 +61,10 @@ export class AppealComponent implements OnInit, OnDestroy {
   protected emailIsValid = signal<boolean>(false);
   protected dialog = inject(MatDialog);
 
-  constructor() {
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2
+  ) {
     this.form = new FormGroup({
       email: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
       appeal: new FormControl('', {nonNullable: true, validators: [Validators.required, Validators.minLength(10)]})
@@ -86,6 +97,16 @@ export class AppealComponent implements OnInit, OnDestroy {
     })
   }
 
+  ngAfterViewInit() {
+    this.setupResizeObserver();
+    this.updateContainerHeight();
+
+    this.boundHandleResize = this.handleResize.bind(this);
+    window.addEventListener('resize', this.boundHandleResize);
+
+    setTimeout(() => this.updateContainerHeight(), 0);
+  }
+
   ngOnDestroy() {
     if (this.resizeObserver) {
       this.resizeObserver.disconnect();
@@ -97,6 +118,41 @@ export class AppealComponent implements OnInit, OnDestroy {
     }
   }
 
+  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 = this.elementRef.nativeElement.querySelector('.appeal-container');
+
+    if (headerElement && footerElement && container) {
+      const headerHeight = headerElement.getBoundingClientRect().height;
+      const footerHeight = footerElement.getBoundingClientRect().height;
+
+      const calculatedHeight = `calc(100vh - ${headerHeight}px - ${footerHeight}px)`;
+      this.renderer.setStyle(container, 'min-height', calculatedHeight);
+    }
+  }
+
   public onSubmit() {
     if (this.form === undefined) {
       console.error('Form is undefined');

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

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

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

@@ -1,13 +1,11 @@
 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

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

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

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

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

@@ -1,80 +0,0 @@
-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,7 +479,3 @@ main .container {
     width: 100%;
   }
 }
-
-.margin-auto {
-  margin: auto
-}