enhance(client): use container queries if available to improve perf

12 files changed, 286 insertions, 4 deletions

diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index c097946c19..6d4d5be2bc 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -246,6 +246,17 @@ export default defineComponent({
 	}
 }
 
+@container (max-width: 380px) {
+	.ukygtjoj {
+		> header {
+			> .title {
+				padding: 8px 10px;
+				font-size: 0.9em;
+			}
+		}
+	}
+}
+
 ._forceContainerFull_ .ukygtjoj {
 	> header {
 		> .title {
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index 68903f3526..1f88bdf137 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -108,6 +108,8 @@ export default defineComponent({
 
 <style lang="scss">
 .sqadhkmv {
+	container-type: inline-size;
+
 	> *:empty {
 		display: none;
 	}
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 1feb161ada..a4100e1f2c 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -433,6 +433,8 @@ function readPromo() {
 			min-width: 0;
 
 			> .body {
+				container-type: inline-size;
+
 				> .cw {
 					cursor: default;
 					display: block;
@@ -573,8 +575,10 @@ function readPromo() {
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 	}
+}
 
-	&.max-width_500px {
+@container (max-width: 500px) {
+	.tkcbzcuz {
 		font-size: 0.9em;
 
 		> .article {
@@ -584,8 +588,10 @@ function readPromo() {
 			}
 		}
 	}
+}
 
-	&.max-width_450px {
+@container (max-width: 450px) {
+	.tkcbzcuz {
 		> .renote {
 			padding: 8px 16px 0 16px;
 		}
@@ -605,8 +611,10 @@ function readPromo() {
 			}
 		}
 	}
+}
 
-	&.max-width_350px {
+@container (max-width: 350px) {
+	.tkcbzcuz {
 		> .article {
 			> .main {
 				> .footer {
@@ -619,8 +627,10 @@ function readPromo() {
 			}
 		}
 	}
+}
 
-	&.max-width_300px {
+@container (max-width: 300px) {
+	.tkcbzcuz {
 		> .article {
 			> .avatar {
 				width: 44px;
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 8269906bb0..7ce8e039d9 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -444,6 +444,8 @@ if (appearNote.replyId) {
 
 		> .main {
 			> .body {
+				container-type: inline-size;
+
 				> .cw {
 					cursor: default;
 					display: block;
@@ -601,6 +603,72 @@ if (appearNote.replyId) {
 	}
 }
 
+@container (max-width: 500px) {
+	.lxwezrsl {
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 450px) {
+	.lxwezrsl {
+		> .renote {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .article {
+			padding: 16px;
+
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.lxwezrsl {
+		> .article {
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 18px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 300px) {
+	.lxwezrsl {
+		font-size: 0.825em;
+
+		> .article {
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
 .muted {
 	padding: 8px;
 	text-align: center;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index a78b499654..0c81059091 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -89,4 +89,24 @@ const props = defineProps<{
 		}
 	}
 }
+
+@container (min-width: 350px) {
+	.fefdfafb {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.fefdfafb {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 1bbbe0e1a6..96d29831d2 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -96,4 +96,24 @@ const showContent = $ref(false);
 		}
 	}
 }
+
+@container (min-width: 350px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 95b6b71be9..d03ce7c434 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -127,4 +127,14 @@ if (props.detail) {
 		padding: 10px 0 0 16px;
 	}
 }
+
+@container (max-width: 450px) {
+	.wrpstxzv {
+		padding: 14px 16px;
+
+		&.children {
+			padding: 10px 0 0 8px;
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 82965212f3..8b8d3f452d 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -306,4 +306,18 @@ useTooltip(reactionRef, (showing) => {
 		}
 	}
 }
+
+@container (max-width: 600px) {
+	.qglefbjs {
+		padding: 16px;
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 500px) {
+	.qglefbjs {
+		padding: 12px;
+		font-size: 0.85em;
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index eb302ccc96..f79e5a32cd 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -990,4 +990,61 @@ onMounted(() => {
 		}
 	}
 }
+
+@container (max-width: 500px) {
+	.gafaadew {
+		> header {
+			height: 50px;
+
+			> .cancel {
+				width: 50px;
+				line-height: 50px;
+			}
+
+			> .right {
+				> .text-count {
+					line-height: 50px;
+				}
+
+				> .submit {
+					margin: 8px;
+				}
+			}
+		}
+
+		> .form {
+			> .to-specified {
+				padding: 6px 16px;
+			}
+
+			> .cw,
+			> .hashtags,
+			> .text {
+				padding: 0 16px;
+			}
+
+			> .text {
+				min-height: 80px;
+			}
+
+			> footer {
+				padding: 0 8px 8px 8px;
+			}
+		}
+	}
+}
+
+@container (max-width: 310px) {
+	.gafaadew {
+		> .form {
+			> footer {
+				> button {
+					font-size: 14px;
+					width: 44px;
+					height: 44px;
+				}
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index ac03559bea..b2d16ddb01 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -313,4 +313,71 @@ onUnmounted(() => {
 		}
 	}
 }
+
+@container (max-width: 400px) {
+	.mk-url-preview {
+		> .link {
+			font-size: 12px;
+
+			> .thumbnail {
+				height: 80px;
+			}
+
+			> article {
+				padding: 12px;
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.mk-url-preview {
+		> .link {
+			font-size: 10px;
+
+			> .thumbnail {
+				height: 70px;
+			}
+
+			> article {
+				padding: 8px;
+
+				> header {
+					margin-bottom: 4px;
+				}
+
+				> footer {
+					margin-top: 4px;
+
+					> img {
+						width: 12px;
+						height: 12px;
+					}
+				}
+			}
+
+			&.compact {
+				> .thumbnail {
+					position: absolute;
+					width: 56px;
+					height: 100%;
+				}
+
+				> article {
+					left: 56px;
+					width: calc(100% - 56px);
+					padding: 4px;
+
+					> header {
+						margin-bottom: 2px;
+					}
+
+					> footer {
+						margin-top: 2px;
+					}
+				}
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index a0c77f91a9..fff89117ce 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -111,6 +111,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 
 <style lang="scss" scoped>
 .vjoppmmu {
+	container-type: inline-size;
+
 	> header {
 		margin: 16px 0;
 
diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index 53adf07771..c7d53f2ee7 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -72,5 +72,6 @@ onUnmounted(() => {
 
 .content {
 	margin: 0 auto;
+	container-type: inline-size;
 }
 </style>