🎨

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