From ba0b959dddc8d2f34b6c2a325b822896b4d971e5 Mon Sep 17 00:00:00 2001
From: Eana Hufwe <eana@1a23.com>
Date: Thu, 1 Aug 2024 00:55:11 +0000
Subject: [PATCH 1/3] fix(client): Fix logical property bugs (batch 1)

---
 .../client/src/components/MkContainer.vue     |  8 +++++
 .../client/src/components/MkEmojiPicker.vue   |  9 ++++++
 packages/client/src/components/MkFolder.vue   |  8 +++++
 .../client/src/components/MkMediaList.vue     | 23 +++++++++++++
 .../client/src/components/MkModPlayer.vue     |  8 +++++
 .../client/src/components/MkPullToRefresh.vue | 32 ++++++++++++++++---
 .../src/components/MkReactionsViewer.vue      |  9 ++++++
 .../src/components/MkSimpleTextWindow.vue     |  8 +++++
 packages/client/src/components/MkTab.vue      |  8 +++++
 packages/client/src/components/MkTimeline.vue |  2 +-
 .../client/src/components/MkUrlPreview.vue    |  9 ++++++
 .../client/src/components/global/MkAvatar.vue |  4 +++
 .../src/components/global/MkPageHeader.vue    |  9 ++++++
 packages/client/src/init.ts                   | 24 +++++++++++++-
 .../src/pages/messaging/messaging-room.vue    |  8 +++++
 packages/client/src/pages/timeline.vue        |  8 +++++
 packages/client/src/style.scss                |  9 ++++++
 packages/client/src/ui/_common_/navbar.vue    |  9 ++++++
 packages/client/src/ui/deck.vue               |  9 ++++++
 packages/client/src/ui/deck/column.vue        | 11 +++++++
 packages/client/src/ui/universal.vue          | 17 ++++++++++
 21 files changed, 226 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 8b7a6b275a..16aebe5830 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -170,10 +170,18 @@ defineExpose({
 <style lang="scss" scoped>
 .container-toggle-enter-active,
 .container-toggle-leave-active {
+	overflow-y: hidden;
 	overflow-block: hidden;
 	transition:
 		opacity 0.5s,
 		height 0.5s !important;
+
+	@supports not (overflow-block: hidden) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-y: visible;
+			overflow-x: hidden;
+		}
+	}
 }
 .container-toggle-enter-from {
 	opacity: 0;
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index d956b73512..d2ae006b0c 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -620,11 +620,20 @@ defineExpose({
 
 	> .emojis {
 		block-size: 100%;
+		overflow-y: auto;
 		overflow-block: auto;
+		overflow-x: hidden;
 		overflow-inline: hidden;
 
 		scrollbar-width: none;
 
+		@supports not (overflow-block: auto) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-y: hidden;
+				overflow-x: auto;
+			}
+		}
+
 		&::-webkit-scrollbar {
 			display: none;
 		}
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 4ccb507feb..842f12fc6a 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -107,10 +107,18 @@ defineExpose({
 <style lang="scss" scoped>
 .folder-toggle-enter-active,
 .folder-toggle-leave-active {
+	overflow-y: hidden;
 	overflow-block: hidden;
 	transition:
 		opacity 0.5s,
 		height 0.5s !important;
+
+	@supports not (overflow-block: hidden) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-y: visible;
+			overflow-x: hidden;
+		}
+	}
 }
 .folder-toggle-enter-from {
 	opacity: 0;
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 89fcc9ce3e..8cd5a0b1c2 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -319,6 +319,20 @@ const previewableCount = computed(
 	inset-inline-start: 50%;
 	transform: translateX(-50%);
 
+	&:dir(rtl) {
+		inset-inline-start: auto;
+		inset-inline-end: 50%;
+	}
+
+	.vertical-rl &, .vertical-lr & {
+		transform: translateY(-50%);
+	}
+
+	.vertical-rl:not(.upright) &:dir(rtl), .vertical-lr:dir(rtl):not(.upright) & {
+		inset-inline-end: 50%;
+		inset-inline-start: auto;
+	}
+
 	inline-size: 75%;
 }
 
@@ -332,10 +346,19 @@ const previewableCount = computed(
 	border-radius: 5px;
 
 	max-block-size: 10vb;
+	overflow-x: clip;
 	overflow-inline: clip;
+	overflow-y: auto;
 	overflow-block: auto;
 	overscroll-behavior: contain;
 	white-space: pre-line;
+			
+	@supports not (overflow-block: auto) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-x: auto;
+			overflow-y: clip;
+		}
+	}
 }
 
 .pwsp__alt-text:empty {
diff --git a/packages/client/src/components/MkModPlayer.vue b/packages/client/src/components/MkModPlayer.vue
index 2698ef4fa3..9a207aab8b 100644
--- a/packages/client/src/components/MkModPlayer.vue
+++ b/packages/client/src/components/MkModPlayer.vue
@@ -423,12 +423,20 @@ onDeactivated(() => {
 
 		> .mod-pattern {
 			display: grid;
+			overflow-y: hidden;
 			overflow-block: hidden;
 			block-size: 0;
 			padding-block-start: calc((56.25% - 48px) / 2);
 			padding-block-end: calc((56.25% - 48px) / 2);
 			content-visibility: auto;
 
+			@supports not (overflow-block: hidden) {
+				.vertical-lr &, .vertical-rl & {
+					overflow-y: visible;
+					overflow-x: hidden;
+				}
+			}
+
 			> .modRowActive {
 				opacity: 1;
 			}
diff --git a/packages/client/src/components/MkPullToRefresh.vue b/packages/client/src/components/MkPullToRefresh.vue
index 251a1e4ae5..6e28ffbb16 100644
--- a/packages/client/src/components/MkPullToRefresh.vue
+++ b/packages/client/src/components/MkPullToRefresh.vue
@@ -11,7 +11,7 @@
 			<div :class="$style.frameContent">
 				<i
 					v-if="!isRefreshing"
-					:class="[$style.icon, icon('ph-arrow-down'), { [$style.refresh]: pullEnded }]"
+					:class="[$style.icon, icon('ph-arrow-down ph-dir'), { [$style.refresh]: pullEnded }]"
 				></i>
 				<div :class="$style.text">
 					<template v-if="pullEnded">{{
@@ -160,12 +160,28 @@ function moving(event: TouchEvent | PointerEvent) {
 	const moveScreenX = getScreenX(event);
 	const moveHeight = moveScreenY - startScreenY!;
 	const moveWidth = moveScreenX - startScreenX!;
-	if (Math.abs(moveWidth / moveHeight) > MAX_PULL_TAN_ANGLE) {
-		if (Math.abs(moveWidth) > 30) pullStarted.value = false;
+	const writingMode = rootEl.value
+		? getComputedStyle(rootEl.value)["writing-mode"]
+		: "horizontal-tb";
+	const moveScreenBlock =
+		writingMode === "vertical-rl"
+			? -moveWidth
+			: writingMode === "vertical-lr"
+				? moveWidth
+				: moveHeight;
+	const moveScreenInline = writingMode.startsWith("vertical")
+		? moveHeight
+		: moveWidth;
+
+	if (Math.abs(moveScreenInline / moveScreenBlock) > MAX_PULL_TAN_ANGLE) {
+		if (Math.abs(moveScreenInline) > 30) pullStarted.value = false;
 		return;
 	}
 
-	pullDistance.value = Math.min(Math.max(moveHeight, 0), MAX_PULL_DISTANCE);
+	pullDistance.value = Math.min(
+		Math.max(moveScreenBlock, 0),
+		MAX_PULL_DISTANCE,
+	);
 
 	if (pullDistance.value > 0) {
 		if (event.cancelable) event.preventDefault();
@@ -282,6 +298,14 @@ defineExpose({
 	}
 }
 .slotClip {
+	overflow-y: clip;
 	overflow-block: clip;
+
+	@supports not (overflow-block: clip) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-y: visible;
+			overflow-x: clip;
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index d7c441f23f..8837605180 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -38,6 +38,7 @@ const isMe = computed(() => isSignedIn(me) && me.id === props.note.userId);
 	margin-block-start: 0.2em;
 	inline-size: 100%;
 	display: flex;
+	overflow-x: auto;
 	overflow-inline: auto;
 	margin-inline: -24px;
 	padding-inline: 22px 160px;
@@ -55,6 +56,14 @@ const isMe = computed(() => isSignedIn(me) && me.id === props.note.userId);
 	);
 	scrollbar-width: none;
 	pointer-events: none;
+
+	@supports not (overflow-inline: auto) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-x: visible;
+			overflow-y: auto;
+		}
+	}
+
 	:deep(*) {
 		pointer-events: all;
 	}
diff --git a/packages/client/src/components/MkSimpleTextWindow.vue b/packages/client/src/components/MkSimpleTextWindow.vue
index 06e1ad8c86..872b7a230f 100644
--- a/packages/client/src/components/MkSimpleTextWindow.vue
+++ b/packages/client/src/components/MkSimpleTextWindow.vue
@@ -31,9 +31,17 @@ const emit = defineEmits<{
 <style lang="scss" scoped>
 .thppypvi {
 	max-block-size: 70%;
+	overflow-y: scroll;
 	overflow-block: scroll;
 	-ms-overflow-style: none;
 	scrollbar-width: none;
+	
+	@supports not (overflow-block: scroll) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-y: visible;
+			overflow-x: scroll;
+		}
+	}
 }
 
 .thppypvi::-webkit-scrollbar {
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
index 101d8aeea0..f9319d17e2 100644
--- a/packages/client/src/components/MkTab.vue
+++ b/packages/client/src/components/MkTab.vue
@@ -96,6 +96,7 @@ export default defineComponent({
 		padding-block: 12px;
 		padding-inline: 32px;
 		font-size: 0.85em;
+		overflow-x: auto;
 		overflow-inline: auto;
 		mask: linear-gradient(var(--gradient-to-inline-end) black calc(100% - 90px), transparent),;
 		-webkit-mask: linear-gradient(
@@ -105,6 +106,13 @@ export default defineComponent({
 		);
 		padding-inline-end: 90px !important;
 		white-space: nowrap;
+		
+		@supports not (overflow-inline: auto) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-x: visible;
+				overflow-y: auto;
+			}
+		}
 
 		&::-webkit-scrollbar {
 			display: none;
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index 5b38f4c8e0..329c471ba7 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -16,7 +16,7 @@
 			@click="tlComponent?.scrollTop()"
 		>
 			{{ i18n.ts.newNoteRecived }}
-			<i :class="icon('ph-arrow-up', false)"></i>
+			<i :class="icon('ph-arrow-up ph-dir', false)"></i>
 		</button>
 	</div>
 	<MkPullToRefresh
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index ba1f91d1cf..690b426e86 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -305,7 +305,16 @@ onUnmounted(() => {
 		border-block-start: 1px solid var(--divider);
 		display: block;
 		inline-size: 100%;
+		overflow-y: auto;
 		overflow-block: auto;
+		
+		@supports not (overflow-block: auto) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-y: visible;
+				overflow-x: auto;
+			}
+		}
+		
 		&:not([src^="https://platform.twitter"])
 		{
 			max-block-size: 70vb;
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index bd5230d95c..b38b3daedf 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -278,16 +278,20 @@ onMounted(() => {
 			display: inline-block;
 			block-size: 50%;
 			inline-size: 50%;
+			position: absolute;
+			top: 0;  // Cat ear positions are irrelevant to text flow direction
 		}
 
 		&:before {
 			border-radius: 25% 75% 75%;
 			transform: rotate(37.5deg) skew(30deg);
+			left: 0;  // Cat ear positions are irrelevant to text flow direction
 		}
 
 		&:after {
 			border-radius: 75% 25% 75% 75%;
 			transform: rotate(-37.5deg) skew(-30deg);
+			right: 0;  // Cat ear positions are irrelevant to text flow direction
 		}
 
 		&:hover {
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index e84fe86a52..3a013a8c32 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -514,6 +514,7 @@ onUnmounted(() => {
 	> .tabs {
 		position: relative;
 		font-size: 1em;
+		overflow-x: auto;
 		overflow-inline: auto;
 		white-space: nowrap;
 		contain: content;
@@ -533,6 +534,14 @@ onUnmounted(() => {
 			transparent
 		);
 		scrollbar-width: none;
+
+		@supports not (overflow-inline: auto) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-x: visible;
+				overflow-y: auto;
+			}
+		}
+
 		&::-webkit-scrollbar {
 			display: none;
 		}
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 77b649c8f3..4079fab8bc 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -115,7 +115,29 @@ function checkForSplash() {
 	// #region Set lang attr
 	const html = document.documentElement;
 	html.setAttribute("lang", lang || "en-US");
-	html.setAttribute("dir", "auto");
+	html.setAttribute(
+		"dir",
+		[
+			"ar",
+			"arc",
+			"dv",
+			"fa",
+			"ha",
+			"he",
+			"iw",
+			"ktw",
+			"ks",
+			"ku",
+			"pk",
+			"ps",
+			"ug",
+			"ur",
+			"xb",
+			"yi",
+		].includes((lang ?? "en").split("-")[0])
+			? "rtl"
+			: "ltr",
+	);
 	const writingMode = localStorage.getItem("writingMode");
 	switch (writingMode) {
 		case "vertical-lr-upright":
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index b95cd4908b..b6806bca37 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -466,8 +466,16 @@ XMessage:last-of-type {
 
 		> .form {
 			max-block-size: 12em;
+			overflow-y: scroll;
 			overflow-block: scroll;
 			border-block-start: solid 0.5px var(--divider);
+			
+			@supports not (overflow-block: scroll) {
+				.vertical-lr &, .vertical-rl & {
+					overflow-y: visible;
+					overflow-x: scroll;
+				}
+			}
 		}
 	}
 }
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index c28dcdfb3d..c701255076 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -331,9 +331,17 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .xytnxiau {
+	overflow-y: hidden;
 	overflow-block: hidden;
 	position: absolute;
 	inset-block-start: 0;
+
+	@supports not (overflow-block: hidden) {
+		.vertical-lr &, .vertical-rl & {
+			overflow-y: visible;
+			overflow-x: hidden;
+		}
+	}
 }
 
 .upsvvhaz {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index ebbd2f69f6..9301e2e39f 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -83,7 +83,9 @@ html {
 	text-size-adjust: 100%;
 	tab-size: 2;
 	scroll-padding: 60px;
+	overflow-x: clip;
 	overflow-inline: clip;
+	overflow-y: auto;
 	overflow-block: auto;
 	text-size-adjust: none;
 	-webkit-text-size-adjust: none;
@@ -93,6 +95,13 @@ html {
 	--gradient-to-inline-start: to left;
 	--gradient-to-inline-end: to right;
 
+	@supports not (overflow-inline: clip) {
+		&.vertical-lr, &.vertical-rl {
+			overflow-x: auto;
+			overflow-y: clip;
+		}
+	}
+
 	&:dir(rtl) {
 		--gradient-to-inline-start: to right;
 		--gradient-to-inline-end: to left;
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 4f6b8e349a..f6e111275f 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -261,10 +261,19 @@ function more(ev: MouseEvent) {
 			block-size: 100dvb;
 		box-sizing: border-box;
 		overflow: auto;
+		overflow-x: clip;
 		overflow-inline: clip;
 		contain: strict;
 		display: flex;
 		flex-direction: column;
+		
+		@supports not (overflow-inline: clip) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-x: auto;
+				overflow-y: clip;
+			}
+		}
+
 		#firefish_app > :not(.wallpaper) & {
 			background: var(--navBg);
 		}
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index d640c2be1b..133afd3cba 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -432,9 +432,18 @@ async function deleteProfile() {
 		> .columns {
 			flex: 1;
 			display: flex;
+			overflow-x: auto;
 			overflow-inline: auto;
+			overflow-y: clip;
 			overflow-block: clip;
 
+			@supports not (overflow-block: clip) {
+				.vertical-lr &, .vertical-rl & {
+					overflow-y: auto;
+					overflow-x: clip;
+				}
+			}
+
 			&.center {
 				> .column:first-of-type {
 					margin-inline-start: auto;
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 4a42e70d7d..8f08084598 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -463,11 +463,22 @@ function onDrop(ev) {
 
 	> div {
 		block-size: calc(100% - var(--deckColumnHeaderHeight));
+		overflow-y: auto;
 		overflow-block: auto;
+		overflow-x: hidden;
 		overflow-inline: hidden; // Safari does not supports clip
+		overflow-x: clip;
 		overflow-inline: clip;
 		-webkit-overflow-scrolling: touch;
 		box-sizing: border-box;
+		
+		@supports not (overflow-block: auto) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-y: hidden;
+				overflow-y: clip;
+				overflow-x: auto;
+			}
+		}
 	}
 }
 </style>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 5c9cb1537f..86c708d901 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -663,7 +663,16 @@ console.log(mainRouter.currentRoute.value.name);
 		inline-size: 100%;
 		min-inline-size: 0;
 		$widgets-hide-threshold: 1090px;
+		overflow-x: clip;
 		overflow-inline: clip;
+
+		@supports not (overflow-inline: clip) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-x: visible;
+				overflow-y: clip;
+			}
+		}
+
 		@media (max-inline-size: $widgets-hide-threshold) {
 			padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 96px);
 		}
@@ -673,6 +682,7 @@ console.log(mainRouter.currentRoute.value.name);
 		position: sticky;
 		inset-block-start: 0;
 		max-block-size: 100vb;
+		overflow-y: auto;
 		overflow-block: auto;
 		padding-block: 0;
 		padding-inline: var(--margin);
@@ -680,6 +690,13 @@ console.log(mainRouter.currentRoute.value.name);
 		min-inline-size: max-content;
 		box-sizing: content-box;
 
+		@supports not (overflow-block: auto) {
+			.vertical-lr &, .vertical-rl & {
+				overflow-y: visible;
+				overflow-x: auto;
+			}
+		}
+
 		@media (max-inline-size: $widgets-hide-threshold) {
 			display: none;
 		}

From 1879e236c4919962945e60b25cfefce13a5d761e Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Thu, 1 Aug 2024 10:54:46 +0900
Subject: [PATCH 2/3] chore(client): address sass deprecation warning

---
 packages/client/src/components/MkMediaList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
index 8cd5a0b1c2..15f97bf8a3 100644
--- a/packages/client/src/components/MkMediaList.vue
+++ b/packages/client/src/components/MkMediaList.vue
@@ -319,6 +319,8 @@ const previewableCount = computed(
 	inset-inline-start: 50%;
 	transform: translateX(-50%);
 
+	inline-size: 75%;
+
 	&:dir(rtl) {
 		inset-inline-start: auto;
 		inset-inline-end: 50%;
@@ -332,8 +334,6 @@ const previewableCount = computed(
 		inset-inline-end: 50%;
 		inset-inline-start: auto;
 	}
-
-	inline-size: 75%;
 }
 
 .pwsp__alt-text {

From d46c336ef5491ecf464baccf1823c86f5fd8ef0f Mon Sep 17 00:00:00 2001
From: Eana Hufwe <eana@1a23.com>
Date: Thu, 1 Aug 2024 13:55:31 +0000
Subject: [PATCH 3/3] fix(client): MkPullToRefresh logical directions

---
 packages/client/src/components/MkPullToRefresh.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/MkPullToRefresh.vue b/packages/client/src/components/MkPullToRefresh.vue
index 6e28ffbb16..c61bb75811 100644
--- a/packages/client/src/components/MkPullToRefresh.vue
+++ b/packages/client/src/components/MkPullToRefresh.vue
@@ -261,7 +261,7 @@ defineExpose({
 	position: relative;
 	overflow: clip;
 	inline-size: 100%;
-	min-block-size: var(--frame-min-height, 0px);
+	min-block-size: var(--frame-min-block-size, 0px);
 	mask-image: linear-gradient(var(--gradient-to-inline-end), #000 0%, #000 80%, transparent);
 	-webkit-mask-image: -webkit-linear-gradient(
 		var(--gradient-to-inline-end),
@@ -290,6 +290,12 @@ defineExpose({
 		transition: transform 0.25s;
 		&.refresh {
 			transform: rotate(180deg);
+			:global(.vertical-rl) & {
+				transform: rotate(-90deg);
+			}
+			:global(.vertical-lr) & {
+				transform: rotate(90deg);
+			}
 		}
 	}
 	> .text {