yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

perf(14-01): add CSS containment to app shell layout boundaries

Browse Source 
- 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
This commit is contained in:
yonlu
2026-03-14 13:44:22 -04:00
parent a8b5274775
commit efa06f7edf
1 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.css
+5
View File
@@ -58,6 +58,7 @@ body div.sidebar {
grid-area: sidebar; grid-area: sidebar;
background-color: var(--yj-bg-surface, #212529); background-color: var(--yj-bg-surface, #212529);
overflow: hidden; overflow: hidden;
contain: layout style paint;
} }
.bottom-bar { .bottom-bar {
@@ -67,6 +68,7 @@ body div.sidebar {
display: grid; display: grid;
grid-template-columns: var(--now-playing-width, 200px) 1fr auto; grid-template-columns: var(--now-playing-width, 200px) 1fr auto;
align-items: center; align-items: center;
contain: layout style;
#now-playing-info { #now-playing-info {
justify-self: start; justify-self: start;
@@ -134,6 +136,7 @@ body div.sidebar {
grid-area: main-panel; grid-area: main-panel;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
contain: layout style;
} }
.main-panel { .main-panel {
@@ -142,8 +145,10 @@ body div.sidebar {
padding: 0.25em; padding: 0.25em;
background-color: var(--yj-bg-surface, #212529); background-color: var(--yj-bg-surface, #212529);
overflow: hidden; overflow: hidden;
contain: strict;
} }
.main-panel > * { .main-panel > * {
height: 100%; height: 100%;
contain: layout style paint;
} }