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.

frontend/src/app/pages/reference/nickgenerator/nick-generator.component.html

@@ -12,7 +12,8 @@
   </app-header>
 
   <main>
-    <section class="containerNick">
+    <section class="darkmodeSection full-width">
+      <div class="containerNick">
         <div class="controls">
 
           @for (part of parts; track $index; let i = $index) {
@@ -34,8 +35,7 @@
                   [(ngModel)]="part.gradient"
                   (change)="onGradientToggle(i)"
                 >Gradient
-              </mat-checkbox
-              >
+                </mat-checkbox>
 
                 <mat-form-field
                   class="colorField"
@@ -103,6 +103,7 @@
             <div class="preview" [innerHTML]="previewHtml"></div>
           }
         </div>
+      </div>
     </section>
   </main>
 </ng-container>

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

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