Merge branch 'logicla-css-fix-1' into 'develop'

fix(client): Fix logical property bugs (batch 1)

Co-authored-by: Eana Hufwe <eana@1a23.com>

See merge request firefish/firefish!11228

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;

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;
 		}

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;

packages/client/src/components/MkMediaList.vue

@@ -320,6 +320,20 @@ const previewableCount = computed(
 	transform: translateX(-50%);
 
 	inline-size: 75%;
+
+	&: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;
+	}
 }
 
 .pwsp__alt-text {
@@ -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 {

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;
 			}

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();
@@ -245,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),
@@ -274,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 {
@@ -282,6 +304,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>

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;
 	}

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 {

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(
@@ -106,6 +107,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;
 		}

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

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;

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 {

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;
 		}

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":

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;
+				}
+			}
 		}
 	}
 }

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 {

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;

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);
 		}

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;

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>

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;
 		}