From 57f4e95279e37d52d1a3c7da31f73be7fb8d3937 Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Sun, 18 Aug 2024 14:46:22 +0900
Subject: [PATCH] fix (client): use absolute property in @media() scss
 (workaround #10992)

---
 packages/client/src/components/MkMediaCaption.vue |  3 ++-
 packages/client/src/pages/welcome.entrance.a.vue  | 15 ++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
index 791f694fa0..f1facc3964 100644
--- a/packages/client/src/components/MkMediaCaption.vue
+++ b/packages/client/src/components/MkMediaCaption.vue
@@ -184,7 +184,8 @@ onBeforeUnmount(() => {
 	inset-inline-start: 0;
 	inset-block-start: 0;
 }
-@media (max-inline-size: 850px) {
+// TODO: use logical property (max-inline-size doesn't work)
+@media (max-width: 850px) {
 	.container {
 		flex-direction: column;
 	}
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index a94f05af3f..aae9d006d0 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -239,7 +239,8 @@ function showMenu(ev) {
 				rgba(0, 0, 0, 0) 100%
 			);
 
-			@media (max-inline-size: 1200px) {
+			// TODO: use logical property (max-inline-size doesn't work)
+			@media (max-width: 1200px) {
 				display: none;
 			}
 		}
@@ -270,7 +271,8 @@ function showMenu(ev) {
 			inset-inline-start: 42px;
 			inline-size: 140px;
 
-			@media (max-inline-size: 450px) {
+			// TODO: use logical property (max-inline-size doesn't work)
+			@media (max-width: 450px) {
 				inline-size: 130px;
 			}
 		}
@@ -285,7 +287,8 @@ function showMenu(ev) {
 				margin-inline-end: 8px;
 			}
 
-			@media (max-inline-size: 1200px) {
+			// TODO: use logical property (max-inline-size doesn't work)
+			@media (max-width: 1200px) {
 				display: none;
 			}
 		}
@@ -301,7 +304,8 @@ function showMenu(ev) {
 			border-radius: var(--radius);
 			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
 
-			@media (max-inline-size: 1200px) {
+			// TODO: use logical property (max-inline-size doesn't work)
+			@media (max-width: 1200px) {
 				margin: auto;
 			}
 
@@ -374,7 +378,8 @@ function showMenu(ev) {
 			padding-block: 8px;
 			padding-inline: 0;
 
-			@media (max-inline-size: 900px) {
+			// TODO: use logical property (max-inline-size doesn't work)
+			@media (max-width: 900px) {
 				display: none;
 			}
 		}