Add mobile breakpoint detection to chat for responsive behavior and fullscreen prompt control

frontend/src/app/pages/altitude/chat/chat.component.html

@@ -6,6 +6,20 @@
     </div>
   </app-header>
 
+  @if (showFullscreenPrompt()) {
+    <div class="fullscreen-prompt-backdrop">
+      <div class="fullscreen-prompt">
+        <h2>Enter fullscreen?</h2>
+        <p>Would you like to view chat in fullscreen mode?</p>
+
+        <div class="fullscreen-prompt-actions">
+          <button type="button" class="secondary" (click)="skipFullscreen()">No thanks</button>
+          <button type="button" (click)="enterFullscreen()">Go fullscreen</button>
+        </div>
+      </div>
+    </div>
+  }
+
   <main>
     <app-full-size [hideFooter]="true">
       <section class="darkmodeSection full-height">

frontend/src/app/pages/altitude/chat/chat.component.scss

@@ -1,3 +1,53 @@
+.fullscreen-prompt-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgb(0 0 0 / 70%);
+}
+
+.fullscreen-prompt {
+  width: min(420px, 100%);
+  padding: 24px;
+  border-radius: 14px;
+  background: #1f1f1f;
+  color: #ffffff;
+  box-shadow: 0 20px 60px rgb(0 0 0 / 45%);
+  text-align: center;
+
+  h2 {
+    margin: 0 0 10px;
+  }
+
+  p {
+    margin: 0 0 22px;
+    color: rgb(255 255 255 / 75%);
+  }
+}
+
+.fullscreen-prompt-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+
+  button {
+    cursor: pointer;
+    border: 0;
+    border-radius: 8px;
+    padding: 10px 16px;
+    background: #4f8cff;
+    color: #ffffff;
+    font-weight: 700;
+
+    &.secondary {
+      background: rgb(255 255 255 / 14%);
+    }
+  }
+}
+
 .page-layout {
   display: flex;
   flex-direction: row;

frontend/src/app/pages/altitude/chat/chat.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject, OnDestroy, OnInit} from '@angular/core';
+import {AfterViewInit, Component, inject, OnDestroy, OnInit, signal} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {ChatService} from '@pages/altitude/chat/service/chat.service';
 import {HeaderComponent} from '@header/header.component';
@@ -7,6 +7,7 @@ import {FullSizeComponent} from '@shared-components/full-size/full-size.componen
 import {ChatBoxComponent} from '@pages/altitude/chat/components/chat/chat-box.component';
 import {ServerListComponent} from '@pages/altitude/chat/components/server-list/server-list.component';
 import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-info.component';
+import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-chat',
@@ -21,31 +22,66 @@ import {ChatInfoComponent} from '@pages/altitude/chat/components/chat-info/chat-
   styleUrl: './chat.component.scss',
   providers: [MiniMessageInteractionService]
 })
-export class ChatComponent implements OnInit, OnDestroy {
+export class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
   private sub?: Subscription;
   private readonly chatService: ChatService = inject(ChatService)
   protected readonly messages = this.chatService.messages;
   protected readonly servers = this.chatService.servers;
   protected readonly selectedServer = this.chatService.selectedServer;
+  protected readonly showFullscreenPrompt = signal(false);
+  protected readonly isMobile = signal(false);
 
-  constructor(private interaction: MiniMessageInteractionService) {
+  constructor(private interaction: MiniMessageInteractionService, private breakpointObserver: BreakpointObserver) {
     interaction.clicks$.subscribe(({action, value}) => {
       if (action === 'run_command') {
         alert(value);
       }
     });
+    this.breakpointObserver
+      .observe([Breakpoints.Handset])
+      .subscribe(result => {
+        this.isMobile.set(result.matches);
+        this.showFullscreenPrompt.set(this.isMobile());
+      });
   }
 
   public onSelectedServerChange(server: string) {
     this.chatService.selectServer(server);
   }
 
+  protected enterFullscreen(): void {
+    this.showFullscreenPrompt.set(false);
+
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen().catch(() => {
+        // Ignore fullscreen request failures.
+      });
+    }
+  }
+
+  protected skipFullscreen(): void {
+    this.showFullscreenPrompt.set(false);
+  }
+
+
   ngOnInit(): void {
     this.chatService.connect();
   }
 
+  ngAfterViewInit(): void {
+    document.documentElement.requestFullscreen().catch(() => {
+      console.error('Failed to enter fullscreen');
+    });
+  }
+
   ngOnDestroy(): void {
     this.sub?.unsubscribe();
-    this.chatService.disconnect(); // triggers onCompletion server-side, cleans up the emitter
+    this.chatService.disconnect();
+
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(() => {
+        console.error('Failed to exit fullscreen');
+      });
+    }
   }
 }