From 0a295e1bb0b6216a81f9e852fc28dea7f796fb99 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:23:50 +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

---
 .../frontend/src/components/MkPageWindow.vue  |  11 +-
 .../src/pages/custom-emojis-manager.vue       | 120 ++++----
 packages/frontend/src/pages/timeline.vue      |   8 +-
 .../frontend/src/pages/welcome.entrance.a.vue | 254 ++++++++--------
 packages/frontend/src/style.scss              |  14 +
 packages/frontend/src/ui/deck/column.vue      |   1 -
 packages/frontend/src/ui/deck/main-column.vue |   7 +-
 packages/frontend/src/ui/minimum.vue          |   3 +-
 packages/frontend/src/ui/universal.vue        | 254 ++++++++--------
 packages/frontend/src/ui/visitor.vue          | 273 ++++--------------
 packages/frontend/src/ui/zen.vue              |  36 ++-
 11 files changed, 393 insertions(+), 588 deletions(-)

diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index 67b3165ade..51f19faf29 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div ref="contents" :class="$style.root" style="container-type: inline-size;">
+	<div :class="$style.root" class="_pageContainer">
 		<RouterView :key="reloadCount" :router="windowRouter"/>
 	</div>
 </MkWindow>
@@ -31,13 +31,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, ref, shallowRef } from 'vue';
 import { url } from '@@/js/config.js';
-import { getScrollContainer } from '@@/js/scroll.js';
 import type { PageMetadata } from '@/page.js';
 import RouterView from '@/components/global/RouterView.vue';
 import MkWindow from '@/components/MkWindow.vue';
 import { popout as _popout } from '@/utility/popout.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
-import { useScrollPositionManager } from '@/nirax.js';
 import { i18n } from '@/i18n.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
 import { openingWindowsCount } from '@/os.js';
@@ -58,7 +56,6 @@ const emit = defineEmits<{
 const routerFactory = useRouterFactory();
 const windowRouter = routerFactory(props.initialPath);
 
-const contents = shallowRef<HTMLElement | null>(null);
 const pageMetadata = ref<null | PageMetadata>(null);
 const windowEl = shallowRef<InstanceType<typeof MkWindow>>();
 const history = ref<{ path: string; key: string; }[]>([{
@@ -177,8 +174,6 @@ function popout() {
 	windowEl.value?.close();
 }
 
-useScrollPositionManager(() => getScrollContainer(contents.value), windowRouter);
-
 onMounted(() => {
 	analytics.page({
 		path: props.initialPath,
@@ -202,9 +197,7 @@ defineExpose({
 
 <style lang="scss" module>
 .root {
-	overscroll-behavior: contain;
-
-	min-height: 100%;
+	height: 100%;
 	background: var(--MI_THEME-bg);
 
 	--MI-margin: var(--MI-marginHalf);
diff --git a/packages/frontend/src/pages/custom-emojis-manager.vue b/packages/frontend/src/pages/custom-emojis-manager.vue
index 35a46e4dd9..46e7a3d05e 100644
--- a/packages/frontend/src/pages/custom-emojis-manager.vue
+++ b/packages/frontend/src/pages/custom-emojis-manager.vue
@@ -4,73 +4,71 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div>
-	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :contentMax="900">
-			<div class="ogwlenmc">
-				<div v-if="tab === 'local'" class="local">
-					<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :contentMax="900">
+		<div class="ogwlenmc">
+			<div v-if="tab === 'local'" class="local">
+				<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
+					<template #prefix><i class="ti ti-search"></i></template>
+					<template #label>{{ i18n.ts.search }}</template>
+				</MkInput>
+				<MkSwitch v-model="selectMode" style="margin: 8px 0;">
+					<template #label>Select mode</template>
+				</MkSwitch>
+				<div v-if="selectMode" class="_buttons">
+					<MkButton inline @click="selectAll">Select all</MkButton>
+					<MkButton inline @click="setCategoryBulk">Set category</MkButton>
+					<MkButton inline @click="setTagBulk">Set tag</MkButton>
+					<MkButton inline @click="addTagBulk">Add tag</MkButton>
+					<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
+					<MkButton inline @click="setLicenseBulk">Set License</MkButton>
+					<MkButton inline danger @click="delBulk">Delete</MkButton>
+				</div>
+				<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+					<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+					<template #default="{items}">
+						<div class="ldhfsamy">
+							<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
+								<img :src="emoji.url" class="img" :alt="emoji.name"/>
+								<div class="body">
+									<div class="name _monospace">{{ emoji.name }}</div>
+									<div class="info">{{ emoji.category }}</div>
+								</div>
+							</button>
+						</div>
+					</template>
+				</MkPagination>
+			</div>
+
+			<div v-else-if="tab === 'remote'" class="remote">
+				<FormSplit>
+					<MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
 						<template #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
-					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
-						<template #label>Select mode</template>
-					</MkSwitch>
-					<div v-if="selectMode" class="_buttons">
-						<MkButton inline @click="selectAll">Select all</MkButton>
-						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
-						<MkButton inline @click="setTagBulk">Set tag</MkButton>
-						<MkButton inline @click="addTagBulk">Add tag</MkButton>
-						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
-						<MkButton inline @click="setLicenseBulk">Set License</MkButton>
-						<MkButton inline danger @click="delBulk">Delete</MkButton>
-					</div>
-					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.category }}</div>
-									</div>
-								</button>
-							</div>
-						</template>
-					</MkPagination>
-				</div>
-
-				<div v-else-if="tab === 'remote'" class="remote">
-					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search" autocapitalize="off">
-							<template #prefix><i class="ti ti-search"></i></template>
-							<template #label>{{ i18n.ts.search }}</template>
-						</MkInput>
-						<MkInput v-model="host" :debounce="true">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</FormSplit>
-					<MkPagination :pagination="remotePagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
-									<img :src="getProxiedImageUrl(emoji.url, 'emoji')" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.host }}</div>
-									</div>
+					<MkInput v-model="host" :debounce="true">
+						<template #label>{{ i18n.ts.host }}</template>
+					</MkInput>
+				</FormSplit>
+				<MkPagination :pagination="remotePagination">
+					<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+					<template #default="{items}">
+						<div class="ldhfsamy">
+							<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
+								<img :src="getProxiedImageUrl(emoji.url, 'emoji')" class="img" :alt="emoji.name"/>
+								<div class="body">
+									<div class="name _monospace">{{ emoji.name }}</div>
+									<div class="info">{{ emoji.host }}</div>
 								</div>
 							</div>
-						</template>
-					</MkPagination>
-				</div>
+						</div>
+					</template>
+				</MkPagination>
 			</div>
-		</MkSpacer>
-	</MkStickyContainer>
-</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 68f4b7a26d..b8f5ece02b 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, watch, provide, shallowRef, ref, onMounted, onActivated } from 'vue';
-import { scroll } from '@@/js/scroll.js';
+import { getScrollContainer, scroll } from '@@/js/scroll.js';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import type { MenuItem } from '@/types/menu.js';
 import type { BasicTimelineType } from '@/timelines.js';
@@ -56,9 +56,15 @@ import { deepMerge } from '@/utility/merge.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { availableBasicTimelines, hasWithReplies, isAvailableBasicTimeline, isBasicTimeline, basicTimelineIconClass } from '@/timelines.js';
 import { prefer } from '@/preferences.js';
+import { useScrollPositionManager } from '@/nirax.js';
+import { useRouter } from '@/router/supplier.js';
 
 provide('shouldOmitHeaderTitle', true);
 
+const router = useRouter();
+
+useScrollPositionManager(() => getScrollContainer(rootEl.value), router);
+
 const tlComponent = shallowRef<InstanceType<typeof MkTimeline>>();
 const rootEl = shallowRef<HTMLElement>();
 
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
index ebbe27e3d4..9888df02cf 100644
--- a/packages/frontend/src/pages/welcome.entrance.a.vue
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -4,31 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-if="meta" class="rsqzvsbo">
-	<MkFeaturedPhotos class="bg"/>
-	<XTimeline class="tl"/>
-	<div class="shape1"></div>
-	<div class="shape2"></div>
-	<div class="logo-wrapper">
-		<div class="powered-by">Powered by</div>
-		<img :src="misskeysvg" class="misskey"/>
+<div v-if="meta" :class="$style.root">
+	<MkFeaturedPhotos :class="$style.bg"/>
+	<XTimeline :class="$style.tl"/>
+	<div :class="$style.shape1"></div>
+	<div :class="$style.shape2"></div>
+	<div :class="$style.logoWrapper">
+		<div :class="$style.poweredBy">Powered by</div>
+		<img :src="misskeysvg" :class="$style.misskey"/>
 	</div>
-	<div class="emojis">
-		<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="❤"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="😆"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="🎉"/>
-		<MkEmoji :normal="true" :noStyle="true" emoji="🍮"/>
-	</div>
-	<div class="contents">
+	<div :class="$style.contents">
 		<MkVisitorDashboard/>
 	</div>
-	<div v-if="instances && instances.length > 0" class="federation">
+	<div v-if="instances && instances.length > 0" :class="$style.federation">
 		<MarqueeText :duration="40">
 			<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
 				<!--<MkInstanceCardMini :instance="instance"/>-->
-				<img v-if="instance.iconUrl" class="icon" :src="getInstanceIcon(instance)" alt=""/>
-				<span class="name _monospace">{{ instance.host }}</span>
+				<img v-if="instance.iconUrl" :class="$style.federationInstanceIcon" :src="getInstanceIcon(instance)" alt=""/>
+				<span class="_monospace">{{ instance.host }}</span>
 			</MkA>
 		</MarqueeText>
 	</div>
@@ -66,122 +59,111 @@ misskeyApiGet('federation/instances', {
 });
 </script>
 
-<style lang="scss" scoped>
-.rsqzvsbo {
-	> .bg {
-		position: fixed;
-		top: 0;
-		right: 0;
-		width: 80vw; // 100%からshapeの幅を引いている
-		height: 100vh;
-	}
+<style lang="scss" module>
+.root {
+	height: 100cqh;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
 
-	> .tl {
-		position: fixed;
-		top: 0;
-		bottom: 0;
-		right: 64px;
-		margin: auto;
-		padding: 128px 0;
-		width: 500px;
-		height: calc(100% - 256px);
-		overflow: hidden;
-		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-		mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+.bg {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 80vw; // 100%からshapeの幅を引いている
+	height: 100vh;
+}
 
-		@media (max-width: 1200px) {
-			display: none;
-		}
-	}
+.tl {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	right: 64px;
+	margin: auto;
+	padding: 128px 0;
+	width: 500px;
+	height: calc(100% - 256px);
+	overflow: hidden;
+	-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+	mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
 
-	> .shape1 {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		background: var(--MI_THEME-accent);
-		clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
-	}
-	> .shape2 {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		background: var(--MI_THEME-accent);
-		clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
-		opacity: 0.5;
-	}
-
-	> .logo-wrapper {
-		position: fixed;
-		top: 36px;
-		left: 36px;
-		flex: auto;
-		color: #fff;
-		user-select: none;
-		pointer-events: none;
-
-		> .powered-by {
-			margin-bottom: 2px;
-		}
-
-		> .misskey {
-			width: 140px;
-			@media (max-width: 450px) {
-				width: 130px;
-			}
-		}
-	}
-
-	> .emojis {
-		position: fixed;
-		bottom: 32px;
-		left: 35px;
-
-		> * {
-			margin-right: 8px;
-		}
-
-		@media (max-width: 1200px) {
-			display: none;
-		}
-	}
-
-	> .contents {
-		position: relative;
-		width: min(430px, calc(100% - 32px));
-		margin-left: 128px;
-		padding: 100px 0 100px 0;
-
-		@media (max-width: 1200px) {
-			margin: auto;
-		}
-	}
-
-	> .federation {
-		position: fixed;
-		bottom: 16px;
-		left: 0;
-		right: 0;
-		margin: auto;
-		background: var(--MI_THEME-acrylicPanel);
-		-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-		backdrop-filter: var(--MI-blur, blur(15px));
-		border-radius: 999px;
-		overflow: clip;
-		width: 800px;
-		padding: 8px 0;
-
-		@media (max-width: 900px) {
-			display: none;
-		}
+	@media (max-width: 1200px) {
+		display: none;
+	}
+}
+
+.shape1 {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: var(--MI_THEME-accent);
+	clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
+}
+.shape2 {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: var(--MI_THEME-accent);
+	clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
+	opacity: 0.5;
+}
+
+.logoWrapper {
+	position: fixed;
+	top: 36px;
+	left: 36px;
+	flex: auto;
+	color: #fff;
+	user-select: none;
+	pointer-events: none;
+}
+
+.poweredBy {
+	margin-bottom: 2px;
+}
+
+.misskey {
+	width: 120px;
+
+	@media (max-width: 450px) {
+		width: 100px;
+	}
+}
+
+.contents {
+	position: relative;
+	width: min(430px, calc(100% - 32px));
+	margin-left: 128px;
+	padding: 100px 0 100px 0;
+
+	@media (max-width: 1200px) {
+		margin: auto;
+	}
+}
+
+.federation {
+	position: fixed;
+	bottom: 16px;
+	left: 0;
+	right: 0;
+	margin: auto;
+	background: var(--MI_THEME-acrylicPanel);
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+	border-radius: 999px;
+	overflow: clip;
+	width: 800px;
+	padding: 8px 0;
+
+	@media (max-width: 900px) {
+		display: none;
 	}
 }
-</style>
 
-<style lang="scss" module>
 .federationInstance {
 	display: inline-flex;
 	align-items: center;
@@ -190,13 +172,13 @@ misskeyApiGet('federation/instances', {
 	margin: 0 10px 0 0;
 	background: var(--MI_THEME-panel);
 	border-radius: 999px;
+}
 
-	> :global(.icon) {
-		display: inline-block;
-		width: 20px;
-		height: 20px;
-		margin-right: 5px;
-		border-radius: 999px;
-	}
+.federationInstanceIcon {
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	margin-right: 5px;
+	border-radius: 999px;
 }
 </style>
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index c449b0e956..68384e80cb 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -170,6 +170,20 @@ rt {
 	text-align: center;
 }
 
+._pageContainer {
+	container-type: size;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+._page {
+	height: 100cqh;
+	overflow: auto;
+	overflow-y: scroll;
+	overscroll-behavior: contain;
+}
+
 ._indicatorCircle {
 	display: inline-block;
 	width: 1em;
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 7fdf75c026..3358b4e52b 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -358,7 +358,6 @@ function onDrop(ev) {
 
 		> .body {
 			background: var(--MI_THEME-bg) !important;
-			overflow-y: scroll !important;
 			scrollbar-color: var(--MI_THEME-scrollbarHandle) transparent;
 
 			&::-webkit-scrollbar-track {
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
index 1ba01a4c8d..5de5d0a866 100644
--- a/packages/frontend/src/ui/deck/main-column.vue
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</template>
 	</template>
 
-	<div ref="contents">
+	<div class="_pageContainer" style="height: 100%;">
 		<RouterView @contextmenu.stop="onContextmenu"/>
 	</div>
 </XColumn>
@@ -20,7 +20,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { provide, shallowRef, ref } from 'vue';
-import { getScrollContainer } from '@@/js/scroll.js';
 import { isLink } from '@@/js/is-link.js';
 import XColumn from './column.vue';
 import type { Column } from '@/deck.js';
@@ -28,7 +27,6 @@ import type { PageMetadata } from '@/page.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
-import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
 import { prefer } from '@/preferences.js';
 import { DI } from '@/di.js';
@@ -38,7 +36,6 @@ defineProps<{
 	isStacked: boolean;
 }>();
 
-const contents = shallowRef<HTMLElement>();
 const pageMetadata = ref<null | PageMetadata>(null);
 
 provide(DI.router, mainRouter);
@@ -71,6 +68,4 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}], ev);
 }
-
-useScrollPositionManager(() => getScrollContainer(contents.value), mainRouter);
 </script>
diff --git a/packages/frontend/src/ui/minimum.vue b/packages/frontend/src/ui/minimum.vue
index 95d564f5a3..ebaa46850c 100644
--- a/packages/frontend/src/ui/minimum.vue
+++ b/packages/frontend/src/ui/minimum.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.root">
-	<div style="container-type: inline-size;">
+	<div class="_pageContainer" style="height: 100%;">
 		<RouterView/>
 	</div>
 
@@ -46,6 +46,5 @@ document.documentElement.style.overflowY = 'scroll';
 <style lang="scss" module>
 .root {
 	min-height: 100dvh;
-	box-sizing: border-box;
 }
 </style>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 5b9fbb74ca..28c05ec748 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -7,17 +7,28 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
-	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
-		<template #header>
-			<div>
-				<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
-				<XAnnouncements v-if="$i"/>
-				<XStatusBars :class="$style.statusbars"/>
-			</div>
-		</template>
-		<RouterView/>
-		<div :class="$style.spacer"></div>
-	</MkStickyContainer>
+	<div :class="$style.contents" @contextmenu.stop="onContextmenu">
+		<div>
+			<XPreferenceRestore v-if="shouldSuggestRestoreBackup"/>
+			<XAnnouncements v-if="$i"/>
+			<XStatusBars :class="$style.statusbars"/>
+		</div>
+		<div :class="$style.content" class="_pageContainer">
+			<RouterView/>
+		</div>
+		<div v-if="isMobile" ref="navFooter" :class="$style.nav">
+			<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
+			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
+			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
+				<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
+				<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
+					<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+				</span>
+			</button>
+			<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
+			<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
+		</div>
+	</div>
 
 	<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
 		<XWidgets/>
@@ -25,19 +36,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<button v-if="!isDesktop && !pageMetadata?.needWideArea && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
-	<div v-if="isMobile" ref="navFooter" :class="$style.nav">
-		<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
-		<button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
-		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
-			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
-			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
-				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
-			</span>
-		</button>
-		<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
-		<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
-	</div>
-
 	<Transition
 		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
 		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
@@ -102,7 +100,6 @@ import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
 import { isLink } from '@@/js/is-link.js';
 import XCommon from './_common_/common.vue';
 import type { Ref } from 'vue';
-import type MkStickyContainer from '@/components/global/MkStickyContainer.vue';
 import type { PageMetadata } from '@/page.js';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import * as os from '@/os.js';
@@ -112,7 +109,6 @@ import { $i } from '@/i.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import { miLocalStorage } from '@/local-storage.js';
-import { useScrollPositionManager } from '@/nirax.js';
 import { mainRouter } from '@/router/main.js';
 import { prefer } from '@/preferences.js';
 import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
@@ -139,7 +135,6 @@ window.addEventListener('resize', () => {
 const pageMetadata = ref<null | PageMetadata>(null);
 const widgetsShowing = ref(false);
 const navFooter = shallowRef<HTMLElement>();
-const contents = shallowRef<InstanceType<typeof MkStickyContainer>>();
 
 provide(DI.router, mainRouter);
 provideMetadataReceiver((metadataGetter) => {
@@ -203,13 +198,6 @@ const onContextmenu = (ev) => {
 	}], ev);
 };
 
-function top() {
-	contents.value.rootEl.scrollTo({
-		top: 0,
-		behavior: 'smooth',
-	});
-}
-
 const navFooterHeight = ref(0);
 provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
 
@@ -226,8 +214,6 @@ watch(navFooter, () => {
 }, {
 	immediate: true,
 });
-
-useScrollPositionManager(() => contents.value.rootEl, mainRouter);
 </script>
 
 <style>
@@ -313,15 +299,104 @@ $widgets-hide-threshold: 1090px;
 }
 
 .contents {
+	display: flex;
+	flex-direction: column;
 	flex: 1;
 	height: 100%;
 	min-width: 0;
-	overflow: auto;
-	overflow-y: scroll;
-	overscroll-behavior: contain;
 	background: var(--MI_THEME-bg);
-	scroll-padding-top: 60px; // TODO: ちゃんと計算する
-	scroll-padding-bottom: 60px; // TODO: ちゃんと計算する
+}
+
+.content {
+	flex: 1;
+	min-height: 0;
+}
+
+.nav {
+	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	grid-gap: 8px;
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--MI_THEME-bg);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
+
+.navButton {
+	position: relative;
+	padding: 0;
+	aspect-ratio: 1;
+	width: 100%;
+	max-width: 60px;
+	margin: auto;
+	border-radius: 100%;
+	background: var(--MI_THEME-panel);
+	color: var(--MI_THEME-fg);
+
+	&:hover {
+		background: var(--MI_THEME-panelHighlight);
+	}
+
+	&:active {
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+	}
+}
+
+.postButton {
+	composes: navButton;
+	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+	color: var(--MI_THEME-fgOnAccent);
+
+	&:hover {
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+	}
+
+	&:active {
+		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+	}
+}
+
+.navButtonIcon {
+	font-size: 16px;
+	vertical-align: middle;
+}
+
+.navButtonIndicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--MI_THEME-indicator);
+	font-size: 16px;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
+	}
+}
+
+.menuDrawerBg {
+	z-index: 1001;
+}
+
+.menuDrawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	height: 100dvh;
+	width: 240px;
+	box-sizing: border-box;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--MI_THEME-navBg);
+}
+
+.statusbars {
+	position: sticky;
+	top: 0;
+	left: 0;
 }
 
 .widgets {
@@ -381,101 +456,4 @@ $widgets-hide-threshold: 1090px;
 		display: none;
 	}
 }
-
-.nav {
-	position: fixed;
-	z-index: 1000;
-	bottom: 0;
-	left: 0;
-	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-gap: 8px;
-	width: 100%;
-	box-sizing: border-box;
-	-webkit-backdrop-filter: var(--MI-blur, blur(24px));
-	backdrop-filter: var(--MI-blur, blur(24px));
-	background-color: var(--MI_THEME-header);
-	border-top: solid 0.5px var(--MI_THEME-divider);
-}
-
-.navButton {
-	position: relative;
-	padding: 0;
-	aspect-ratio: 1;
-	width: 100%;
-	max-width: 60px;
-	margin: auto;
-	border-radius: 100%;
-	background: var(--MI_THEME-panel);
-	color: var(--MI_THEME-fg);
-
-	&:hover {
-		background: var(--MI_THEME-panelHighlight);
-	}
-
-	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
-	}
-}
-
-.postButton {
-	composes: navButton;
-	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
-	color: var(--MI_THEME-fgOnAccent);
-
-	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-	}
-
-	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-	}
-}
-
-.navButtonIcon {
-	font-size: 18px;
-	vertical-align: middle;
-}
-
-.navButtonIndicator {
-	position: absolute;
-	top: 0;
-	left: 0;
-	color: var(--MI_THEME-indicator);
-	font-size: 16px;
-
-	&:has(.itemIndicateValueIcon) {
-		animation: none;
-		font-size: 12px;
-	}
-}
-
-.menuDrawerBg {
-	z-index: 1001;
-}
-
-.menuDrawer {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
-	height: 100dvh;
-	width: 240px;
-	box-sizing: border-box;
-	contain: strict;
-	overflow: auto;
-	overscroll-behavior: contain;
-	background: var(--MI_THEME-navBg);
-}
-
-.statusbars {
-	position: sticky;
-	top: 0;
-	left: 0;
-}
-
-.spacer {
-	height: calc(var(--MI-minBottomSpacing));
-}
 </style>
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
index 051bfbfa68..c5b7e0663a 100644
--- a/packages/frontend/src/ui/visitor.vue
+++ b/packages/frontend/src/ui/visitor.vue
@@ -4,66 +4,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="mk-app">
+<div :class="$style.root">
 	<a v-if="isRoot" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--MI_THEME-panel); color:var(--MI_THEME-fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
 
-	<div v-if="!narrow && !isRoot" class="side">
-		<div class="banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
-		<div class="dashboard">
+	<div v-if="!narrow && !isRoot" :class="$style.side">
+		<div :class="$style.banner" :style="{ backgroundImage: instance.backgroundImageUrl ? `url(${ instance.backgroundImageUrl })` : 'none' }"></div>
+		<div :class="$style.dashboard">
 			<MkVisitorDashboard/>
 		</div>
 	</div>
 
-	<div class="main">
-		<div v-if="!isRoot" class="header">
-			<div v-if="narrow === false" class="wide">
-				<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
-				<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
-				<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
-				<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA>
-			</div>
-			<div v-else-if="narrow === true" class="narrow">
-				<button class="menu _button" @click="showMenu = true">
-					<i class="ti ti-menu-2 icon"></i>
-				</button>
-			</div>
-		</div>
-		<div class="contents">
-			<main v-if="!isRoot" style="container-type: inline-size;">
-				<RouterView/>
-			</main>
-			<main v-else>
-				<RouterView/>
-			</main>
+	<div :class="$style.main">
+		<button v-if="!isRoot" :class="$style.homeButton" class="_button" @click="goHome">
+			<i class="ti ti-home"></i>
+		</button>
+		<div :class="$style.content" class="_pageContainer">
+			<RouterView/>
 		</div>
 	</div>
-
-	<Transition :name="'tray-back'">
-		<div
-			v-if="showMenu"
-			class="menu-back _modalBg"
-			@click="showMenu = false"
-			@touchstart.passive="showMenu = false"
-		></div>
-	</Transition>
-
-	<Transition :name="'tray'">
-		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" activeClass="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
-			<MkA v-if="isTimelineAvailable" to="/timeline" class="link" activeClass="active"><i class="ti ti-message icon"></i>{{ i18n.ts.timeline }}</MkA>
-			<MkA to="/explore" class="link" activeClass="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
-			<MkA to="/announcements" class="link" activeClass="active"><i class="ti ti-speakerphone icon"></i>{{ i18n.ts.announcements }}</MkA>
-			<MkA to="/channels" class="link" activeClass="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
-			<div class="divider"></div>
-			<MkA to="/pages" class="link" activeClass="active"><i class="ti ti-news icon"></i>{{ i18n.ts.pages }}</MkA>
-			<MkA to="/play" class="link" activeClass="active"><i class="ti ti-player-play icon"></i>Play</MkA>
-			<MkA to="/gallery" class="link" activeClass="active"><i class="ti ti-icons icon"></i>{{ i18n.ts.gallery }}</MkA>
-			<div class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ i18n.ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ i18n.ts.login }}</button>
-			</div>
-		</div>
-	</Transition>
 </div>
 <XCommon/>
 </template>
@@ -75,8 +33,6 @@ import XCommon from './_common_/common.vue';
 import type { PageMetadata } from '@/page.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
 import { i18n } from '@/i18n.js';
 import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
@@ -103,39 +59,11 @@ provideMetadataReceiver((metadataGetter) => {
 });
 provideReactiveMetadata(pageMetadata);
 
-const announcements = {
-	endpoint: 'announcements',
-	limit: 10,
-};
-
-const isTimelineAvailable = ref(instance.policies.ltlAvailable || instance.policies.gtlAvailable);
-
-const showMenu = ref(false);
 const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
 const narrow = ref(window.innerWidth < 1280);
 
-const keymap = computed(() => {
-	return {
-		's': () => {
-			mainRouter.push('/search');
-		},
-	};
-});
-
-function signin() {
-	const { dispose } = os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {
-		closed: () => dispose(),
-	});
-}
-
-function signup() {
-	const { dispose } = os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {
-		closed: () => dispose(),
-	});
+function goHome() {
+	mainRouter.push('/');
 }
 
 onMounted(() => {
@@ -145,149 +73,64 @@ onMounted(() => {
 		}, { passive: true });
 	}
 });
-
-defineExpose({
-	showMenu: showMenu,
-});
 </script>
 
 <style>
 .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
 </style>
 
-<style lang="scss" scoped>
-.tray-enter-active,
-.tray-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-enter-from,
-.tray-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.tray-back-enter-active,
-.tray-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-back-enter-from,
-.tray-back-leave-active {
-	opacity: 0;
-}
-
-.mk-app {
+<style lang="scss" module>
+.root {
 	display: flex;
-	min-height: 100vh;
+	height: 100dvh;
+	overflow: clip;
+}
 
-	> .side {
-		position: sticky;
-		top: 0;
-		left: 0;
-		width: 500px;
-		height: 100vh;
-		background: var(--MI_THEME-accent);
+.main {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+}
 
-		> .banner {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			aspect-ratio: 1.5;
-			background-position: center;
-			background-size: cover;
-			-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-			mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
-		}
+.homeButton {
+	position: fixed;
+	z-index: 1000;
+	bottom: 16px;
+	right: 16px;
+	width: 60px;
+	height: 60px;
+	background: var(--MI_THEME-panel);
+	border-radius: 999px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
 
-		> .dashboard {
-			position: relative;
-			padding: 32px;
-			box-sizing: border-box;
-			max-height: 100%;
-			overflow: auto;
-		}
-	}
+.side {
+	position: relative;
+	width: 500px;
+	overflow-y: scroll;
+	background: var(--MI_THEME-accent);
+}
 
-	> .main {
-		flex: 1;
-		min-width: 0;
+.banner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	aspect-ratio: 1.5;
+	background-position: center;
+	background-size: cover;
+	-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+	mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+}
 
-		> .header {
-			background: var(--MI_THEME-panel);
+.dashboard {
+	padding: 32px;
+}
 
-			> .wide {
-				line-height: 50px;
-				padding: 0 16px;
-
-				> .link {
-					padding: 0 16px;
-				}
-			}
-
-			> .narrow {
-				> .menu {
-					padding: 16px;
-				}
-			}
-		}
-	}
-
-	> .menu-back {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-	}
-
-	> .menu {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 240px;
-		height: 100vh;
-		background: var(--MI_THEME-panel);
-
-		> .link {
-			display: block;
-			padding: 16px;
-
-			> .icon {
-				margin-right: 1em;
-			}
-		}
-
-		> .divider {
-			margin: 8px auto;
-			width: calc(100% - 32px);
-			border-top: solid 0.5px var(--MI_THEME-divider);
-		}
-
-		> .action {
-			padding: 16px;
-
-			> button {
-				display: block;
-				width: 100%;
-				padding: 10px;
-				box-sizing: border-box;
-				text-align: center;
-				border-radius: 999px;
-
-				&._button {
-					background: var(--MI_THEME-panel);
-				}
-
-				&:first-child {
-					margin-bottom: 16px;
-				}
-			}
-		}
-	}
+.content {
+	display: flex;
+	flex-direction: column;
+	height: 100dvh;
 }
 </style>
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
index 99248abecf..45524d1fbb 100644
--- a/packages/frontend/src/ui/zen.vue
+++ b/packages/frontend/src/ui/zen.vue
@@ -4,21 +4,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="showBottom ? $style.rootWithBottom : $style.root">
-	<div style="container-type: inline-size;">
-		<RouterView/>
+<div :class="$style.root">
+	<div :class="$style.contents">
+		<div class="_pageContainer" style="flex: 1; min-height: 0;">
+			<RouterView/>
+		</div>
+
+		<!--
+			デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
+			See https://github.com/misskey-dev/misskey/issues/10905
+		-->
+		<div v-if="showBottom" :class="$style.bottom">
+			<button v-tooltip="i18n.ts.goToMisskey" :class="['_button', '_shadow', $style.button]" @click="goToMisskey"><i class="ti ti-home"></i></button>
+		</div>
 	</div>
 
 	<XCommon/>
 </div>
-
-<!--
-	デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
-	See https://github.com/misskey-dev/misskey/issues/10905
--->
-<div v-if="showBottom" :class="$style.bottom">
-	<button v-tooltip="i18n.ts.goToMisskey" :class="['_button', '_shadow', $style.button]" @click="goToMisskey"><i class="ti ti-home"></i></button>
-</div>
 </template>
 
 <script lang="ts" setup>
@@ -54,19 +56,16 @@ provideReactiveMetadata(pageMetadata);
 function goToMisskey() {
 	window.location.href = '/';
 }
-
-document.documentElement.style.overflowY = 'scroll';
 </script>
 
 <style lang="scss" module>
 .root {
-	min-height: 100dvh;
-	box-sizing: border-box;
 }
 
-.rootWithBottom {
-	min-height: calc(100dvh - (60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px)));
-	box-sizing: border-box;
+.contents {
+	display: flex;
+	flex-direction: column;
+	height: 100dvh;
 }
 
 .bottom {
@@ -76,7 +75,6 @@ document.documentElement.style.overflowY = 'scroll';
 }
 
 .button {
-	position: fixed !important;
 	padding: 0;
 	aspect-ratio: 1;
 	width: 100%;