feat(core): use contain strict optimizing performance (#8553)

packages/frontend/core/src/components/page-list/collections/collection-list-item.css.ts

@@ -6,6 +6,7 @@ export const root = style({
   height: '54px',
   // 42 + 12
   flexShrink: 0,
+  contain: 'strict',
   width: '100%',
   alignItems: 'stretch',
   transition: 'background-color 0.2s, opacity 0.2s',

packages/frontend/core/src/components/page-list/docs/page-list-item.css.ts

@@ -8,6 +8,7 @@ export const root = style({
   flexShrink: 0,
   width: '100%',
   alignItems: 'stretch',
+  contain: 'strict',
   transition: 'background-color 0.2s, opacity 0.2s',
   ':hover': {
     backgroundColor: cssVar('hoverColor'),

packages/frontend/core/src/components/page-list/page-group.css.ts

@@ -46,6 +46,7 @@ export const header = style({
   alignItems: 'center',
   padding: '0px 16px 0px 6px',
   height: '28px',
+  contain: 'strict',
   background: cssVar('backgroundPrimaryColor'),
   ':hover': {
     background: cssVar('hoverColorFilled'),

packages/frontend/core/src/components/page-list/tags/tag-list-item.css.ts

@@ -7,6 +7,7 @@ export const root = style({
   // 42 + 12
   flexShrink: 0,
   width: '100%',
+  contain: 'strict',
   alignItems: 'stretch',
   transition: 'background-color 0.2s, opacity 0.2s',
   ':hover': {

packages/frontend/core/src/modules/workbench/view/route-container.css.ts

@@ -20,6 +20,7 @@ export const header = style({
   flexShrink: 0,
   background: cssVar('backgroundPrimaryColor'),
   padding: '0 16px',
+  contain: 'strict',
   '@media': {
     print: {
       display: 'none',
@@ -31,6 +32,7 @@ export const viewBodyContainer = style({
   display: 'flex',
   flex: 1,
   overflow: 'hidden',
+  contain: 'strict',
 });
 
 export const leftSidebarButton = style({