chore(client): rendering performance tweak a bit

5 files changed, 34 insertions, 29 deletions

diff --git a/packages/client/src/components/global/page-header.vue b/packages/client/src/components/global/page-header.vue
index e6917611fe..766f9b6b6a 100644
--- a/packages/client/src/components/global/page-header.vue
+++ b/packages/client/src/components/global/page-header.vue
@@ -178,6 +178,8 @@ onUnmounted(() => {
 	-webkit-backdrop-filter: var(--blur, blur(15px));
 	backdrop-filter: var(--blur, blur(15px));
 	border-bottom: solid 0.5px var(--divider);
+	contain: strict;
+	height: var(--height);
 
 	&.thin {
 		--height: 45px;
diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue
index e14242827d..784414e791 100644
--- a/packages/client/src/components/ui/container.vue
+++ b/packages/client/src/components/ui/container.vue
@@ -144,6 +144,7 @@ export default defineComponent({
 .ukygtjoj {
 	position: relative;
 	overflow: hidden; overflow: clip;
+	contain: content;
 
 	&.naked {
 		background: transparent !important;
diff --git a/packages/client/src/components/widgets.vue b/packages/client/src/components/widgets.vue
index be84cdbf74..85b8ae0ed3 100644
--- a/packages/client/src/components/widgets.vue
+++ b/packages/client/src/components/widgets.vue
@@ -113,6 +113,7 @@ export default defineComponent({
 	}
 
 	> .widget, .customize-container {
+		contain: content;
 		margin: var(--margin) 0;
 
 		&:first-of-type {
diff --git a/packages/client/src/ui/_common_/sidebar-for-mobile.vue b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
index 41d0837233..e789ae5e06 100644
--- a/packages/client/src/ui/_common_/sidebar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/sidebar-for-mobile.vue
@@ -1,32 +1,32 @@
 <template>
 <div class="kmwsukvl">
-	<div>
+	<div class="body">
 		<button v-click-anime class="item _button account" @click="openAccountMenu">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
 		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-			<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
 			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+				<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+				<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
 		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 		</MkA>
 		<button v-click-anime class="item _button" @click="more">
-			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 		</button>
 		<MkA v-click-anime class="item" active-class="active" to="/settings">
-			<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="post">
-			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
 		</button>
 	</div>
 </div>
@@ -81,7 +81,7 @@ export default defineComponent({
 	$avatar-size: 32px;
 	$avatar-margin: 8px;
 
-	> div {
+	> .body {
 
 		> .divider {
 			margin: 16px 16px;
@@ -102,12 +102,12 @@ export default defineComponent({
 			box-sizing: border-box;
 			color: var(--navFg);
 
-			> i {
+			> .icon {
 				position: relative;
 				width: 32px;
 			}
 
-			> i,
+			> .icon,
 			> .avatar {
 				margin-right: $avatar-margin;
 			}
diff --git a/packages/client/src/ui/_common_/sidebar.vue b/packages/client/src/ui/_common_/sidebar.vue
index d65e776d86..a72bf786ad 100644
--- a/packages/client/src/ui/_common_/sidebar.vue
+++ b/packages/client/src/ui/_common_/sidebar.vue
@@ -1,32 +1,32 @@
 <template>
 <div class="mvcprjjd" :class="{ iconOnly }">
-	<div>
+	<div class="body">
 		<button v-click-anime class="item _button account" @click="openAccountMenu">
 			<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
 		</button>
 		<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-			<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+			<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 		</MkA>
 		<template v-for="item in menu">
 			<div v-if="item === '-'" class="divider"></div>
 			<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
-				<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
-				<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+				<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
+				<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</component>
 		</template>
 		<div class="divider"></div>
 		<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-			<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+			<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 		</MkA>
 		<button v-click-anime class="item _button" @click="more">
-			<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-			<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+			<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+			<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 		</button>
 		<MkA v-click-anime class="item" active-class="active" to="/settings">
-			<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+			<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 		</MkA>
 		<button class="item _button post" data-cy-open-post-form @click="os.post">
-			<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
+			<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
 		</button>
 	</div>
 </div>
@@ -88,7 +88,7 @@ function more(ev: MouseEvent) {
 	width: $nav-width;
 	box-sizing: border-box;
 
-	> div {
+	> .body {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -100,6 +100,7 @@ function more(ev: MouseEvent) {
 		overflow: auto;
 		overflow-x: clip;
 		background: var(--navBg);
+		contain: strict;
 
 		> .divider {
 			margin: 16px 16px;
@@ -120,12 +121,12 @@ function more(ev: MouseEvent) {
 			box-sizing: border-box;
 			color: var(--navFg);
 
-			> i {
+			> .icon {
 				position: relative;
 				width: 32px;
 			}
 
-			> i,
+			> .icon,
 			> .avatar {
 				margin-right: $avatar-margin;
 			}
@@ -230,7 +231,7 @@ function more(ev: MouseEvent) {
 		flex: 0 0 $nav-icon-only-width;
 		width: $nav-icon-only-width;
 
-		> div {
+		> .body {
 			width: $nav-icon-only-width;
 
 			> .divider {
@@ -246,13 +247,13 @@ function more(ev: MouseEvent) {
 				font-size: $ui-font-size * 1.1;
 				line-height: initial;
 
-				> i,
+				> .icon,
 				> .avatar {
 					display: block;
 					margin: 0 auto;
 				}
 
-				> i {
+				> .icon {
 					opacity: 0.7;
 				}
 
@@ -261,7 +262,7 @@ function more(ev: MouseEvent) {
 				}
 
 				&:hover, &.active {
-					> i, > .text {
+					> .icon, > .text {
 						opacity: 1;
 					}
 				}
@@ -284,7 +285,7 @@ function more(ev: MouseEvent) {
 				&.post {
 					height: $nav-icon-only-width;
 
-					> i {
+					> .icon {
 						opacity: 1;
 					}
 				}