perf(css): add CSS containment to results section and detail panel

Apply contain: layout style to .results-section and
contain: layout style paint to the detail panel element to reduce
browser layout recalculation scope during search interactions.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Vinta Chen
2026-03-22 16:14:11 +08:00
parent 80a5596b11
commit 50e27b992f

View File

@@ -413,6 +413,7 @@ kbd {
.results-section {
padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
contain: layout style;
}
.results-intro {
@@ -746,6 +747,7 @@ th[data-sort].sort-asc::after {
text-wrap: pretty;
overflow-wrap: break-word;
word-break: break-word;
contain: layout style paint;
animation: expand-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}