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
This commit is contained in:
2026-03-14 13:46:08 -04:00
parent ad9104374a
commit ac8a52e110
6 changed files with 20 additions and 0 deletions
@@ -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 {