From 73853b08f583043ba05c9bf44f0a6ee4ec4d1df4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 8 Sep 2025 22:53:17 +0900
Subject: [PATCH] use cqh

---
 packages/frontend/src/pages/qr.read.vue | 28 +------------------------
 packages/frontend/src/pages/qr.show.vue | 28 ++-----------------------
 2 files changed, 3 insertions(+), 53 deletions(-)

diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index 3a2e00d63a..028248d4ff 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -8,8 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="rootEl"
 	:class="$style.root"
 	:style="{
-		'--MI-QrReadScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing) )`,
-		'--MI-QrReadViewHeight': 'calc(var(--MI-QrReadScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
+		'--MI-QrReadViewHeight': 'calc(100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px))',
 		'--MI-QrReadVideoHeight': 'min(calc(var(--MI-QrReadViewHeight) * 0.3), 512px)',
 	}"
 >
@@ -82,9 +81,6 @@ const rootEl = ref<HTMLDivElement | null>(null);
 const videoEl = ref<HTMLVideoElement | null>(null);
 const overlayEl = ref<HTMLDivElement | null>(null);
 
-const scrollContainer = shallowRef<HTMLElement | null>(null);
-const scrollHeight = ref(window.innerHeight);
-
 const scannerInstance = shallowRef<QrScanner | null>(null);
 
 const tab = ref<'users' | 'notes' | 'all'>('users');
@@ -335,28 +331,6 @@ onUnmounted(() => {
 
 	scannerInstance.value?.destroy();
 });
-
-//#region scroll height
-function checkScrollHeight() {
-	scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
-}
-
-let ro: ResizeObserver | undefined;
-
-onMounted(() => {
-	scrollContainer.value = getScrollContainer(rootEl.value);
-	checkScrollHeight();
-
-	if (scrollContainer.value) {
-		ro = new ResizeObserver(checkScrollHeight);
-		ro.observe(scrollContainer.value);
-	}
-});
-
-onUnmounted(() => {
-	ro?.disconnect();
-});
-//#endregion
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index de3e94b80d..c403cab4f1 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -7,7 +7,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div
 	ref="rootEl" :class="$style.root" :style="{
 		backgroundColor: bgColor,
-		'--MI-QrShowScrollHeight': scrollContainer ? `${scrollHeight}px` : `calc( 100dvh - var(--MI-minBottomSpacing, 0px) )`,
 	}"
 >
 	<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
@@ -62,7 +61,6 @@ const $i = ensureSignin();
 
 const scrollContainer = shallowRef<HTMLElement | null>(null);
 const rootEl = ref<HTMLDivElement | null>(null);
-const scrollHeight = ref(window.innerHeight);
 
 const acct = computed(() => `@${$i.username}@${host}`);
 const userProfileUrl = computed(() => userPage($i, undefined, true));
@@ -131,28 +129,6 @@ onMounted(() => {
 	}
 });
 
-//#region scroll height
-function checkScrollHeight() {
-	scrollHeight.value = scrollContainer.value ? scrollContainer.value.clientHeight : window.innerHeight;
-}
-
-let ro: ResizeObserver | undefined;
-
-onMounted(() => {
-	scrollContainer.value = getScrollContainer(rootEl.value);
-	checkScrollHeight();
-
-	if (scrollContainer.value) {
-		ro = new ResizeObserver(checkScrollHeight);
-		ro.observe(scrollContainer.value);
-	}
-});
-
-onUnmounted(() => {
-	ro?.disconnect();
-});
-//#endregion
-
 //#region flip
 const THRESHOLD = -3;
 // @ts-expect-error TS(2339)
@@ -216,7 +192,7 @@ $avatarSize: 58px;
 	margin-top: calc( -1 * var(--MI-stickyTop) );
 	margin-bottom: calc( -1 * var(--MI-stickyBottom) );
 	height: fit-content;
-	min-height: var(--MI-QrShowScrollHeight);
+	min-height: 100cqh;
 }
 
 .fg {
@@ -239,7 +215,7 @@ $avatarSize: 58px;
 	display: flex;
 	width: 100%;
 	padding: 0 0 $s3;
-	max-height: max(256px, calc((var(--MI-QrShowScrollHeight) - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
+	max-height: max(256px, calc((100cqh - var(--MI-stickyTop, 0px) - var(--MI-stickyBottom, 0px)) * 0.55));
 }
 
 .qrInner {