From 0a1ff77f23f0fdbc569f6184bad74ae86cd45a2e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 27 Apr 2025 19:55:56 +0900
Subject: perf(frontend): use css-native implementation for spacer rather than
 vue component

---
 packages/frontend/src/style.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'packages/frontend/src/style.scss')

diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 9a3a43bdc3..03dfbfe94b 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -175,6 +175,30 @@ rt {
 	text-align: center;
 }
 
+._spacer {
+	width: 100%;
+	max-width: calc(min(var(--MI_SPACER-w, 100%), 100%) - (var(--MI_SPACER-max, 24px) * 2));
+	margin: var(--MI_SPACER-max, 24px) auto;
+	container-type: inline-size;
+
+	/* 子に継承させない */
+	--MI_SPACER-w: initial;
+	--MI_SPACER-min: initial;
+	--MI_SPACER-max: initial;
+}
+
+._forceShrinkSpacer ._spacer {
+	max-width: calc(min(var(--MI_SPACER-w, 100%), 100%) - (var(--MI_SPACER-min, 12px) * 2));
+	margin: var(--MI_SPACER-min, 12px) auto;
+}
+
+@container (max-width: 450px) {
+	._spacer {
+		max-width: calc(min(var(--MI_SPACER-w, 100%), 100%) - (var(--MI_SPACER-min, 12px) * 2));
+		margin: var(--MI_SPACER-min, 12px) auto;
+	}
+}
+
 ._pageContainer {
 	container-type: size;
 	contain: strict;
-- 
cgit v1.2.3-freya