fix(playback): keep diagnostics within player viewport

Entire-Checkpoint: f957cd9849e0

libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss

@@ -1,7 +1,8 @@
-:host {
+.web-player-view {
     display: block;
     height: 100%;
     position: relative;
+    overflow: hidden;
 }
 
 app-art-player,
@@ -25,6 +26,8 @@ app-html-video-player {
     gap: 8px 12px;
     align-items: start;
     padding: 14px 16px;
+    max-block-size: calc(100% - 32px);
+    overflow: auto;
     border: 1px solid color-mix(in srgb, var(--mat-sys-error) 36%, transparent);
     border-radius: 8px;
     background: color-mix(
@@ -83,6 +86,7 @@ app-html-video-player {
     .web-player-diagnostic {
         inset-inline: 8px;
         bottom: var(--web-player-diagnostic-bottom, 8px);
+        max-block-size: calc(100% - 16px);
         grid-template-areas:
             'icon body'
             'actions actions';

libs/ui/playback/src/lib/web-player-view/web-player-view.component.spec.ts

@@ -82,9 +82,8 @@ describe('WebPlayerViewComponent', () => {
     const originalElectron = window.electron;
 
     beforeAll(async () => {
-        ({ WebPlayerViewComponent } = await import(
-            './web-player-view.component'
-        ));
+        ({ WebPlayerViewComponent } =
+            await import('./web-player-view.component'));
     });
 
     beforeEach(async () => {
@@ -124,6 +123,12 @@ describe('WebPlayerViewComponent', () => {
         fixture.destroy();
     });
 
+    it('anchors overlay UI to the player view host', () => {
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.classList).toContain('web-player-view');
+    });
+
     it('renders diagnostics and emits MPV fallback requests on desktop', () => {
         const requests: unknown[] = [];
         fixture.destroy();

libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts

@@ -39,6 +39,9 @@ import { VjsPlayerComponent } from '../vjs-player/vjs-player.component';
     selector: 'app-web-player-view',
     templateUrl: './web-player-view.component.html',
     styleUrls: ['./web-player-view.component.scss'],
+    host: {
+        class: 'web-player-view',
+    },
     imports: [
         ArtPlayerComponent,
         ClipboardModule,

libs/ui/styles/_portal-layout.scss

@@ -116,12 +116,6 @@
         }
     }
 
-    .content-container:has(> .epg.epg-collapsed)
-        .video-player
-        > app-web-player-view {
-        --web-player-diagnostic-bottom: 72px;
-    }
-
     .epg {
         flex: 1 1 0;
         min-height: 0;