From e415ecc415aa02267131b8bbfd5ea8e5255753ae Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sat, 8 Nov 2025 22:09:35 +0100
Subject: [PATCH] Implement dynamic container height adjustment in
 `NickGeneratorComponent` based on header and footer dimensions. Refactor HTML
 structure for improved dark mode styling and accessibility. Optimize
 component lifecycle by adding `AfterViewInit` and `OnDestroy` handling with a
 `ResizeObserver`.

---
 .../nick-generator.component.html             | 161 +++++++++---------
 .../nick-generator.component.scss             |   8 +-
 .../nickgenerator/nick-generator.component.ts |  62 ++++++-
 3 files changed, 141 insertions(+), 90 deletions(-)

diff --git a/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.html b/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.html
index 87a1b25..8713313 100644
--- a/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.html
+++ b/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.html
@@ -12,96 +12,97 @@
   </app-header>
 
   <main>
-    <section class="containerNick">
-      <div class="controls">
+    <section class="darkmodeSection full-width">
+      <div class="containerNick">
+        <div class="controls">
 
-        @for (part of parts; track $index; let i = $index) {
-          <div class="part">
-            <div class="row">
-              <mat-form-field class="textField" appearance="outline">
-                <mat-label>Text</mat-label>
-                <input
-                  matInput
-                  [value]="part.text"
-                  (input)="part.text = ($any($event.target).value || ''); onInputChanged()"
-                  maxlength="16"
-                />
-                <mat-hint align="end">{{ part.text.length }} / 16</mat-hint>
-              </mat-form-field>
+          @for (part of parts; track $index; let i = $index) {
+            <div class="part">
+              <div class="row">
+                <mat-form-field class="textField" appearance="outline">
+                  <mat-label>Text</mat-label>
+                  <input
+                    matInput
+                    [value]="part.text"
+                    (input)="part.text = ($any($event.target).value || ''); onInputChanged()"
+                    maxlength="16"
+                  />
+                  <mat-hint align="end">{{ part.text.length }} / 16</mat-hint>
+                </mat-form-field>
 
-              <mat-checkbox
-                class="checkbox"
-                [(ngModel)]="part.gradient"
-                (change)="onGradientToggle(i)"
-              >Gradient
-              </mat-checkbox
-              >
+                <mat-checkbox
+                  class="checkbox"
+                  [(ngModel)]="part.gradient"
+                  (change)="onGradientToggle(i)"
+                >Gradient
+                </mat-checkbox>
 
-              <mat-form-field
-                class="colorField"
-                appearance="outline"
-                [style.visibility]="(part.continuation && i>0 && parts[i-1]?.gradient && part.gradient) ? 'hidden' : 'visible'">
-                <mat-label>Color A</mat-label>
-                <input
-                  matInput
-                  type="color"
-                  [value]="part.colorA"
-                  (input)="part.colorA = $any($event.target).value; onInputChanged()"
-                />
-              </mat-form-field>
+                <mat-form-field
+                  class="colorField"
+                  appearance="outline"
+                  [style.visibility]="(part.continuation && i>0 && parts[i-1]?.gradient && part.gradient) ? 'hidden' : 'visible'">
+                  <mat-label>Color A</mat-label>
+                  <input
+                    matInput
+                    type="color"
+                    [value]="part.colorA"
+                    (input)="part.colorA = $any($event.target).value; onInputChanged()"
+                  />
+                </mat-form-field>
 
-              <mat-form-field
-                class="colorField"
-                appearance="outline"
-                [style.visibility]="part.gradient ? 'visible' : 'hidden'">
-                <mat-label>Color B</mat-label>
-                <input
-                  matInput
-                  type="color"
-                  [value]="part.colorB"
-                  (input)="part.colorB = $any($event.target).value; onInputChanged()"
-                />
-              </mat-form-field>
+                <mat-form-field
+                  class="colorField"
+                  appearance="outline"
+                  [style.visibility]="part.gradient ? 'visible' : 'hidden'">
+                  <mat-label>Color B</mat-label>
+                  <input
+                    matInput
+                    type="color"
+                    [value]="part.colorB"
+                    (input)="part.colorB = $any($event.target).value; onInputChanged()"
+                  />
+                </mat-form-field>
 
-              <mat-checkbox
-                class="checkbox"
-                [(ngModel)]="part.continuation"
-                (change)="onContinuationToggle(i)"
-                [disabled]="i===0 || !part.gradient || !parts[i-1]?.gradient"
-              >Continuation
-              </mat-checkbox
-              >
+                <mat-checkbox
+                  class="checkbox"
+                  [(ngModel)]="part.continuation"
+                  (change)="onContinuationToggle(i)"
+                  [disabled]="i===0 || !part.gradient || !parts[i-1]?.gradient"
+                >Continuation
+                </mat-checkbox
+                >
+              </div>
+
+              @if (part.invalid) {
+                <div class="invalid">(min 1 – max 16 chars{{ part.gradient ? '' : ' for non-empty text' }})</div>
+              }
+              <mat-divider></mat-divider>
             </div>
+          }
 
-            @if (part.invalid) {
-              <div class="invalid">(min 1 – max 16 chars{{ part.gradient ? '' : ' for non-empty text' }})</div>
-            }
-            <mat-divider></mat-divider>
+          <div class="buttons">
+            <button mat-raised-button (click)="addPart()">Add Part</button>
+            <button mat-raised-button (click)="deletePart()">Remove Part</button>
           </div>
-        }
 
-        <div class="buttons">
-          <button mat-raised-button (click)="addPart()">Add Part</button>
-          <button mat-raised-button (click)="deletePart()">Remove Part</button>
+          @if (showCommands) {
+            <div class="commands">
+              <div class="commandRow">
+                <div class="command">{{ tryCmd }}</div>
+                <button mat-stroked-button (click)="copy(tryCmd, 'try')">{{ tryCommandButtonContent }}</button>
+              </div>
+              <div class="commandRow">
+                <div class="command">{{ requestCmd }}</div>
+                <button mat-stroked-button (click)="copy(requestCmd, 'request')">{{ requestCommandButtonContent }}
+                </button>
+              </div>
+            </div>
+          }
+
+          @if (showPreview) {
+            <div class="preview" [innerHTML]="previewHtml"></div>
+          }
         </div>
-
-        @if (showCommands) {
-          <div class="commands">
-            <div class="commandRow">
-              <div class="command">{{ tryCmd }}</div>
-              <button mat-stroked-button (click)="copy(tryCmd, 'try')">{{ tryCommandButtonContent }}</button>
-            </div>
-            <div class="commandRow">
-              <div class="command">{{ requestCmd }}</div>
-              <button mat-stroked-button (click)="copy(requestCmd, 'request')">{{ requestCommandButtonContent }}
-              </button>
-            </div>
-          </div>
-        }
-
-        @if (showPreview) {
-          <div class="preview" [innerHTML]="previewHtml"></div>
-        }
       </div>
     </section>
   </main>
diff --git a/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.scss b/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.scss
index bf3c716..0899f33 100644
--- a/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.scss
+++ b/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.scss
@@ -1,9 +1,7 @@
-/* nick-generator.component.css */
 .containerNick {
-  background-color: #292828;
-  padding: 40px 5%;
   max-width: 1220px;
   margin: 0 auto;
+  height: 100%;
 }
 
 .controls {
@@ -59,8 +57,6 @@
 }
 
 .command {
-  background: #1e1e1e;
-  color: #ffffff;
   padding: 10px 12px;
   border-radius: 6px;
   font-family: monospace;
@@ -68,10 +64,8 @@
 }
 
 .preview {
-  background: #1e1e1e;
   padding: 14px 12px;
   border-radius: 6px;
-  color: #ffffff;
   font-family: 'minecraft-text', monospace;
   white-space: pre-wrap;
 }
diff --git a/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.ts b/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.ts
index 55ee893..2a7a916 100644
--- a/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.ts
+++ b/frontend/src/app/pages/reference/nickgenerator/nick-generator.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, Renderer2} from '@angular/core';
 import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -31,7 +31,7 @@ interface Part {
     MatButtonModule,
   ]
 })
-export class NickGeneratorComponent {
+export class NickGeneratorComponent implements AfterViewInit, OnDestroy {
   parts: Part[] = [
     {text: '', gradient: false, colorA: '#ffffff', colorB: '#ffffff', continuation: false}
   ];
@@ -41,8 +41,33 @@ export class NickGeneratorComponent {
   previewHtml: SafeHtml = '';
   showPreview = false;
   showCommands = false;
+  private handleResize: any;
+  private boundHandleResize: any;
+  private resizeObserver: ResizeObserver | null = null;
 
-  constructor(private sanitizer: DomSanitizer) {
+
+  constructor(private sanitizer: DomSanitizer,
+              private elementRef: ElementRef,
+              private renderer: Renderer2
+  ) {
+  }
+
+  ngOnDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    if (this.boundHandleResize) {
+      window.removeEventListener('resize', this.boundHandleResize);
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver();
+    window.addEventListener('resize', this.boundHandleResize);
+    this.boundHandleResize = this.handleResize.bind(this);
+    setTimeout(() => this.updateContainerHeight(), 0);
   }
 
   addPart(): void {
@@ -223,4 +248,35 @@ export class NickGeneratorComponent {
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;');
   }
+
+  private updateContainerHeight() {
+    const headerElement = document.querySelector('app-header');
+    const footerElement = document.querySelector('footer');
+
+    const container = this.elementRef.nativeElement.querySelector('.containerNick');
+
+    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);
+    }
+  }
+
+  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);
+    }
+  }
 }