From db08ec2958cab5786b198ae9f1082e654a646591 Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 14 May 2026 20:49:40 +0200
Subject: [PATCH] fix(playback): keep diagnostics within player viewport
 Entire-Checkpoint: f957cd9849e0

---
 .../web-player-view/web-player-view.component.scss    |  6 +++++-
 .../web-player-view/web-player-view.component.spec.ts | 11 ++++++++---
 .../lib/web-player-view/web-player-view.component.ts  |  3 +++
 libs/ui/styles/_portal-layout.scss                    |  6 ------
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
index 943f17d92..71daef965 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.scss
+++ b/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';
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.spec.ts b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.spec.ts
index 90fedae49..d37a4c1be 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.spec.ts
+++ b/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();
diff --git a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts b/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts
index 7e7559579..45b4982c7 100644
--- a/libs/ui/playback/src/lib/web-player-view/web-player-view.component.ts
+++ b/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,
diff --git a/libs/ui/styles/_portal-layout.scss b/libs/ui/styles/_portal-layout.scss
index 3f2cfd14e..aef73c0e4 100644
--- a/libs/ui/styles/_portal-layout.scss
+++ b/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;