From ac8a52e110f9f8ebdc3433b60594370352126a18 Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Sat, 14 Mar 2026 13:46:08 -0400
Subject: [PATCH] perf(14-01): add GPU promotion and containment to all scroll
 containers

- contain: layout style on :host of all 6 scroll-heavy components
- contain: paint + will-change: transform on all scroll containers for GPU compositing
- content-visibility: auto + contain-intrinsic-size on .album-card for off-screen skip
- cover-grid, track-list, queue-panel, artists-view, genres-view, playlist-view
---
 frontend/src/components/artists-view/artists-view.ts    | 3 +++
 frontend/src/components/cover-grid/cover-grid-styles.ts | 5 +++++
 frontend/src/components/genres-view/genres-view.ts      | 3 +++
 frontend/src/components/playlist-view/playlist-view.ts  | 3 +++
 frontend/src/components/queue-panel/queue-panel.ts      | 3 +++
 frontend/src/components/track-list/track-list.ts        | 3 +++
 6 files changed, 20 insertions(+)

diff --git a/frontend/src/components/artists-view/artists-view.ts b/frontend/src/components/artists-view/artists-view.ts
index 1f02803..f6d71d9 100644
--- a/frontend/src/components/artists-view/artists-view.ts
+++ b/frontend/src/components/artists-view/artists-view.ts
@@ -223,12 +223,15 @@ export class ArtistsView
                 flex-direction: column;
                 overflow: hidden;
                 position: relative;
+                contain: layout style;
             }
 
             .grid-scroll-container {
                 flex: 1;
                 overflow-y: auto;
                 overflow-x: hidden;
+                contain: paint;
+                will-change: transform;
             }
 
             lit-virtualizer {
diff --git a/frontend/src/components/cover-grid/cover-grid-styles.ts b/frontend/src/components/cover-grid/cover-grid-styles.ts
index 20bdaaf..c013970 100644
--- a/frontend/src/components/cover-grid/cover-grid-styles.ts
+++ b/frontend/src/components/cover-grid/cover-grid-styles.ts
@@ -9,6 +9,7 @@ const gridStyles = css`
         flex-direction: column;
         overflow: hidden;
         position: relative;
+        contain: layout style;
     }
 
     /* ========================================
@@ -129,6 +130,8 @@ const gridStyles = css`
         flex: 1;
         position: relative;
         overflow-y: auto;
+        contain: paint;
+        will-change: transform;
     }
 
     /* ========================================
@@ -146,6 +149,8 @@ const gridStyles = css`
             transform 0.15s ease;
         box-sizing: border-box;
         width: var(--card-width, 176px);
+        content-visibility: auto;
+        contain-intrinsic-size: auto var(--card-width, 176px) auto calc(var(--card-width, 176px) + 40px);
     }
 
     .album-card:hover {
diff --git a/frontend/src/components/genres-view/genres-view.ts b/frontend/src/components/genres-view/genres-view.ts
index 3c86e49..f3ccb4a 100644
--- a/frontend/src/components/genres-view/genres-view.ts
+++ b/frontend/src/components/genres-view/genres-view.ts
@@ -227,12 +227,15 @@ export class GenresView
             flex-direction: column;
             overflow: hidden;
             position: relative;
+            contain: layout style;
         }
 
         .grid-scroll-container {
             flex: 1;
             overflow-y: auto;
             overflow-x: hidden;
+            contain: paint;
+            will-change: transform;
         }
 
         lit-virtualizer {
diff --git a/frontend/src/components/playlist-view/playlist-view.ts b/frontend/src/components/playlist-view/playlist-view.ts
index c459918..e330b33 100644
--- a/frontend/src/components/playlist-view/playlist-view.ts
+++ b/frontend/src/components/playlist-view/playlist-view.ts
@@ -175,6 +175,7 @@ export class PlaylistView extends LitElement {
             flex-direction: column;
             overflow: hidden;
             position: relative;
+            contain: layout style;
         }
 
         .header {
@@ -306,6 +307,8 @@ export class PlaylistView extends LitElement {
             list-style: none;
             display: flex;
             flex-direction: column;
+            contain: paint;
+            will-change: transform;
         }
 
         .playlist-item {
diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts
index bb828e7..3573760 100644
--- a/frontend/src/components/queue-panel/queue-panel.ts
+++ b/frontend/src/components/queue-panel/queue-panel.ts
@@ -211,6 +211,7 @@ export class QueuePanel
             background-color: var(--yj-bg-surface, #212529);
             display: flex;
             flex-direction: row;
+            contain: layout style paint;
         }
 
         :host([open]) {
@@ -300,6 +301,8 @@ export class QueuePanel
         lit-virtualizer {
             flex: 1;
             overflow-y: auto;
+            contain: paint;
+            will-change: transform;
         }
 
         .track-item {
diff --git a/frontend/src/components/track-list/track-list.ts b/frontend/src/components/track-list/track-list.ts
index 5a71df4..f8d9c49 100644
--- a/frontend/src/components/track-list/track-list.ts
+++ b/frontend/src/components/track-list/track-list.ts
@@ -722,6 +722,7 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
       display: flex;
       flex-direction: column;
       overflow: hidden;
+      contain: layout style;
     }
 
     .table-container {
@@ -931,6 +932,8 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
       overflow-x: hidden;
       overflow-y: auto;
       user-select: none;
+      contain: paint;
+      will-change: transform;
     }
 
     .track-row {