🎨

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>

packages/frontend/src/pages/install-extensions.vue

@@ -4,7 +4,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkStickyContainer>
+<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'"/>
@@ -38,7 +41,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 				</div>
 			</MkSpacer>
-</MkStickyContainer>
+		</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<{