fix(parental-lock): focus, tokens and phone width for lock UI (#1761)

libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.html

@@ -137,6 +137,9 @@
                     type="button"
                     mat-icon-button
                     class="context-search__clear"
+                    [attr.aria-label]="
+                        'EMBEDDED_MPV.PLAYER.CLEAR_SEARCH' | translate
+                    "
                     (click)="clearCategorySearch()"
                 >
                     <mat-icon>close</mat-icon>

libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.scss

@@ -271,20 +271,26 @@ app-workspace-context-category-view {
     width: 100%;
     margin-top: 4px;
     padding: 8px 12px;
-    border: 1px dashed var(--mat-sys-outline-variant);
+    border: 1px dashed var(--app-separator);
     border-radius: 10px;
     background: transparent;
-    color: var(--mat-sys-on-surface-variant);
+    color: var(--app-body-color);
     font: inherit;
     font-size: 0.8125rem;
     text-align: left;
     cursor: pointer;
 
-    &:hover,
+    // Hover tints like the rail's other rows. Keyboard focus keeps the rail
+    // background so the ring holds >= 3:1 against what surrounds it.
+    &:hover:not(:focus-visible) {
+        background: var(--app-selection-surface);
+        color: var(--app-heading-color);
+    }
+
     &:focus-visible {
-        background: var(--mat-sys-surface-container);
-        color: var(--mat-sys-on-surface);
-        outline: none;
+        color: var(--app-heading-color);
+        outline: 2px solid var(--app-selection-color);
+        outline-offset: -2px;
     }
 
     mat-icon {

libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.spec.ts

@@ -963,6 +963,39 @@ describe('WorkspaceContextPanelComponent', () => {
         expect(dialog.open).not.toHaveBeenCalled();
     });
 
+    it('opens the Xtream category dialog capped at the viewport width', async () => {
+        fixture.componentRef.setInput('context', {
+            provider: 'xtreams',
+            playlistId: 'xtream-1',
+        });
+        fixture.componentRef.setInput('section', 'vod');
+        fixture.detectChanges();
+        const component = fixture.componentInstance;
+        Object.defineProperty(component, 'canManageXtreamCategories', {
+            configurable: true,
+            value: () => true,
+        });
+        jest.spyOn(
+            TestBed.inject(ParentalLockService),
+            'requestUnlock'
+        ).mockResolvedValue(true);
+        component.loadXtreamCategoryDialog = jest.fn(
+            async () => class DialogStub {}
+        );
+        dialog.open.mockReturnValueOnce({ afterClosed: () => of(false) });
+
+        await component.openManageCategories();
+
+        // A 500px panel on a 375px phone would scroll sideways.
+        expect(dialog.open).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                width: '500px',
+                maxWidth: 'calc(100vw - 32px)',
+            })
+        );
+    });
+
     describe('Stalker lock dialog', () => {
         function enableLock(): void {
             const parentalLock = TestBed.inject(ParentalLockService);
@@ -1001,6 +1034,7 @@ describe('WorkspaceContextPanelComponent', () => {
                             { category_id: '1', category_name: 'News' },
                         ],
                     },
+                    maxWidth: 'calc(100vw - 32px)',
                 })
             );
         });

libs/workspace/shell/feature/src/lib/workspace-context-panel/workspace-context-panel.component.ts

@@ -567,6 +567,7 @@ export class WorkspaceContextPanelComponent {
         this.dialog.open(dialogComponent, {
             data: { playlistId: context.playlistId, contentType, categories },
             width: '500px',
+            maxWidth: 'calc(100vw - 32px)',
             maxHeight: '90vh',
         });
     }
@@ -620,6 +621,7 @@ export class WorkspaceContextPanelComponent {
                 itemCounts: this.xtreamStore.getCategoryItemCounts(),
             },
             width: '500px',
+            maxWidth: 'calc(100vw - 32px)',
             maxHeight: '90vh',
         });
         dialogRef