From 8b6d90b7a45422f0c5dd05678c7a4ca8d83b7fe5 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 20 Mar 2025 13:16:08 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/components/MkAnimBg.vue |  2 +-
 .../frontend/src/pages/install-extensions.vue | 74 ++++++++++---------
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/frontend/src/components/MkAnimBg.vue b/packages/frontend/src/components/MkAnimBg.vue
index 2938645557..e57fbcdee3 100644
--- a/packages/frontend/src/components/MkAnimBg.vue
+++ b/packages/frontend/src/components/MkAnimBg.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<canvas ref="canvasEl" style="width: 100%; height: 100%; pointer-events: none;"></canvas>
+<canvas ref="canvasEl" style="display: block; width: 100%; height: 100%; pointer-events: none;"></canvas>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/frontend/src/pages/install-extensions.vue b/packages/frontend/src/pages/install-extensions.vue
index 3da6af1a04..47c49e547a 100644
--- a/packages/frontend/src/pages/install-extensions.vue
+++ b/packages/frontend/src/pages/install-extensions.vue
@@ -4,41 +4,46 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :contentMax="550">
-		<MkLoading v-if="uiPhase === 'fetching'"/>
-		<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
-			<template #additionalInfo>
-				<FormSection>
-					<div class="_gaps_s">
-						<MkKeyValue>
-							<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
-							<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
-						</MkKeyValue>
-						<MkKeyValue>
-							<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
-							<template #value>
-								<!-- この画面が出ている時点でハッシュの検証には成功している -->
-								<i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i>
-							</template>
-						</MkKeyValue>
+<div>
+	<MkAnimBg style="position: absolute;"/>
+	<div class="_pageScrollable" style="position: absolute; top: 0; width: 100%; height: 100%;">
+		<MkStickyContainer>
+			<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+			<MkSpacer :contentMax="550">
+				<MkLoading v-if="uiPhase === 'fetching'"/>
+				<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
+					<template #additionalInfo>
+						<FormSection>
+							<div class="_gaps_s">
+								<MkKeyValue>
+									<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
+									<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
+								</MkKeyValue>
+								<MkKeyValue>
+									<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
+									<template #value>
+										<!-- この画面が出ている時点でハッシュの検証には成功している -->
+										<i class="ti ti-check" style="color: var(--MI_THEME-accent)"></i>
+									</template>
+								</MkKeyValue>
+							</div>
+						</FormSection>
+					</template>
+				</MkExtensionInstaller>
+				<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
+					<div :class="$style.extInstallerIconWrapper">
+						<i class="ti ti-circle-x"></i>
 					</div>
-				</FormSection>
-			</template>
-		</MkExtensionInstaller>
-		<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
-			<div :class="$style.extInstallerIconWrapper">
-				<i class="ti ti-circle-x"></i>
-			</div>
-			<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
-			<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
-			<div class="_buttonsCenter">
-				<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
+					<h2 :class="$style.extInstallerTitle">{{ errorKV?.title }}</h2>
+					<div :class="$style.extInstallerNormDesc">{{ errorKV?.description }}</div>
+					<div class="_buttonsCenter">
+						<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
+					</div>
+				</div>
+			</MkSpacer>
+		</MkStickyContainer>
+	</div>
+</div>
 </template>
 
 <script lang="ts" setup>
@@ -58,6 +63,7 @@ import { parseThemeCode, installTheme } from '@/theme.js';
 import { unisonReload } from '@/utility/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
+import MkAnimBg from '@/components/MkAnimBg.vue';
 
 const uiPhase = ref<'fetching' | 'confirm' | 'error'>('fetching');
 const errorKV = ref<{