From efa06f7edf1e4acdc3d8865cad264403257ae40d Mon Sep 17 00:00:00 2001
From: Caleb Allen <caleballen1276@gmail.com>
Date: Sat, 14 Mar 2026 13:44:22 -0400
Subject: [PATCH] perf(14-01): add CSS containment to app shell layout
 boundaries

- contain: layout style on .content-area to isolate main+queue from header/sidebar
- contain: strict on .main-panel for maximum layout isolation
- contain: layout style paint on .main-panel > * for paint containment per view
- contain: layout style paint on sidebar to isolate from main panel
- contain: layout style on .bottom-bar to isolate footer from content reflows
---
 frontend/index.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/index.css b/frontend/index.css
index 17fd694..d2d19ee 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -58,6 +58,7 @@ body div.sidebar {
     grid-area: sidebar;
     background-color: var(--yj-bg-surface, #212529);
     overflow: hidden;
+    contain: layout style paint;
 }
 
 .bottom-bar {
@@ -67,6 +68,7 @@ body div.sidebar {
     display: grid;
     grid-template-columns: var(--now-playing-width, 200px) 1fr auto;
     align-items: center;
+    contain: layout style;
 
     #now-playing-info {
         justify-self: start;
@@ -134,6 +136,7 @@ body div.sidebar {
     grid-area: main-panel;
     display: flex;
     overflow: hidden;
+    contain: layout style;
 }
 
 .main-panel {
@@ -142,8 +145,10 @@ body div.sidebar {
     padding: 0.25em;
     background-color: var(--yj-bg-surface, #212529);
     overflow: hidden;
+    contain: strict;
 }
 
 .main-panel > * {
     height: 100%;
+    contain: layout style paint;
 }