fix(frontend): fix broken styles

Author: syuilo

packages/frontend-shared/js/const.ts

@@ -109,12 +109,6 @@ export const ROLE_POLICIES = [
 	'canImportUserLists',
 ] as const;
 
-// なんか動かない
-//export const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
-//export const CURRENT_STICKY_BOTTOM = Symbol('CURRENT_STICKY_BOTTOM');
-export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
-export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM';
-
 export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg';
 export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
 export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';

packages/frontend/src/components/global/MkStickyContainer.vue

@@ -23,22 +23,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue';
-import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js';
-import type { Ref } from 'vue';
+import { DI } from '@/di.js';
 
 const rootEl = useTemplateRef('rootEl');
 const headerEl = useTemplateRef('headerEl');
 const footerEl = useTemplateRef('footerEl');
 
 const headerHeight = ref<string | undefined>();
 const childStickyTop = ref(0);
-const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
-provide(CURRENT_STICKY_TOP, childStickyTop);
+const parentStickyTop = inject(DI.currentStickyTop, ref(0));
+provide(DI.currentStickyTop, childStickyTop);
 
 const footerHeight = ref<string | undefined>();
 const childStickyBottom = ref(0);
-const parentStickyBottom = inject<Ref<number>>(CURRENT_STICKY_BOTTOM, ref(0));
-provide(CURRENT_STICKY_BOTTOM, childStickyBottom);
+const parentStickyBottom = inject(DI.currentStickyBottom, ref(0));
+provide(DI.currentStickyBottom, childStickyBottom);
 
 const calc = () => {
 	// コンポーネントが表示されてないけどKeepAliveで残ってる場合などは null になる

packages/frontend/src/di.ts

@@ -12,4 +12,6 @@ export const DI = {
 	mock: Symbol() as InjectionKey<boolean>,
 	pageMetadata: Symbol() as InjectionKey<Ref<Record<string, any>>>,
 	viewId: Symbol() as InjectionKey<string>,
+	currentStickyTop: Symbol() as InjectionKey<Ref<number>>,
+	currentStickyBottom: Symbol() as InjectionKey<Ref<number>>,
 };

packages/frontend/src/style.scss

@@ -179,14 +179,14 @@ rt {
 
 ._pageScrollable {
 	height: 100%;
-	overflow: auto;
+	overflow: clip;
 	overflow-y: scroll;
 	overscroll-behavior: contain;
 }
 
 ._pageScrollableReversed {
 	height: 100%;
-	overflow: auto;
+	overflow: clip;
 	overflow-y: scroll;
 	overscroll-behavior: contain;
 	display: flex;

packages/frontend/src/ui/universal.vue

@@ -97,7 +97,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue';
 import { instanceName } from '@@/js/config.js';
-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';
@@ -200,16 +199,13 @@ const onContextmenu = (ev) => {
 };
 
 const navFooterHeight = ref(0);
-provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
 
 watch(navFooter, () => {
 	if (navFooter.value) {
 		navFooterHeight.value = navFooter.value.offsetHeight;
-		window.document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
 		window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
 	} else {
 		navFooterHeight.value = 0;
-		window.document.body.style.setProperty('--MI-stickyBottom', '0px');
 		window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
 	}
 }, {