MkStickyContainer化

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

@@ -18,10 +18,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef } from 'vue';
+import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef, toRefs } from 'vue';
 
 import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const.js';
 
+const props = withDefaults(defineProps<{
+	headerZIndex?: number;
+	footerZIndex?: number;
+}>(), {
+	headerZIndex: 1000,
+	footerZIndex: 1000,
+});
+
+// non-reactive
+const { headerZIndex, footerZIndex } = props;
+
 const rootEl = shallowRef<HTMLElement>();
 const headerEl = shallowRef<HTMLElement>();
 const footerEl = shallowRef<HTMLElement>();
@@ -79,14 +90,14 @@ onMounted(() => {
 	if (headerEl.value != null) {
 		headerEl.value.style.position = 'sticky';
 		headerEl.value.style.top = 'var(--stickyTop, 0)';
-		headerEl.value.style.zIndex = '1000';
+		headerEl.value.style.zIndex = `${headerZIndex}`;
 		observer.observe(headerEl.value);
 	}
 
 	if (footerEl.value != null) {
 		footerEl.value.style.position = 'sticky';
 		footerEl.value.style.bottom = 'var(--stickyBottom, 0)';
-		footerEl.value.style.zIndex = '1000';
+		footerEl.value.style.zIndex = `${footerZIndex}`;
 		observer.observe(footerEl.value);
 	}
 });

packages/frontend/src/pages/admin/custom-emojis-manager.local.list.vue

@@ -4,6 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
+<div v-if="gridItems.length === 0" style="text-align: center">
+	{{ i18n.ts._customEmojisManager._local._list.emojisNothing }}
+</div>
+
+<MkStickyContainer v-else>
+	<template #default>
 		<div class="_gaps">
 			<MkFolder>
 				<template #icon><i class="ti ti-search"></i></template>
@@ -126,17 +132,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<XRegisterLogsFolder :logs="requestLogs"/>
 
-	<div v-if="gridItems.length === 0" style="text-align: center">
-		{{ i18n.ts._customEmojisManager._local._list.emojisNothing }}
-	</div>
-	<template v-else>
 			<div :class="$style.gridArea">
 				<MkGrid :data="gridItems" :settings="setupGrid()" @event="onGridEvent"/>
 			</div>
 
 			<MkPagingButtons :current="currentPage" :max="allPages" :buttonCount="5" @pageChanged="onPageChanged"/>
 
-		<div class="_gaps">
 			<div :class="$style.buttons">
 				<MkButton danger style="margin-right: auto" @click="onDeleteButtonClicked">{{ i18n.ts.delete }}</MkButton>
 				<MkButton primary :disabled="updateButtonDisabled" @click="onUpdateButtonClicked">
@@ -148,7 +149,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</template>
-</div>
+</MkStickyContainer>
 </template>
 
 <script setup lang="ts">
@@ -680,11 +681,8 @@ onMounted(async () => {
 }
 
 .gridArea {
-	overflow-x: auto;
-	overflow-y: hidden;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	resize: vertical;
 }
 
 .buttons {
@@ -699,4 +697,5 @@ onMounted(async () => {
 	margin: 8px 0;
 	border-top: solid 0.5px var(--divider);
 }
+
 </style>

packages/frontend/src/pages/admin/custom-emojis-manager.local.register.vue

@@ -452,11 +452,8 @@ onMounted(async () => {
 }
 
 .gridArea {
-	overflow-x: auto;
-	overflow-y: hidden;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	resize: vertical;
 }
 
 .buttons {

packages/frontend/src/pages/admin/custom-emojis-manager.local.vue

@@ -32,6 +32,5 @@ const modeTab = ref<PageMode>('list');
 <style module lang="scss">
 .root {
 	padding: 16px;
-	overflow: scroll;
 }
 </style>

packages/frontend/src/pages/admin/custom-emojis-manager.remote.vue

@@ -344,11 +344,8 @@ onMounted(async () => {
 }
 
 .gridArea {
-	overflow-x: auto;
-	overflow-y: hidden;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	resize: vertical;
 }
 
 .pages {

packages/frontend/src/pages/admin/custom-emojis-manager2.vue

@@ -5,7 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div>
-	<MkStickyContainer>
+	<!-- コンテナが入れ子になるのでz-indexが被らないよう大きめの数値を設定する-->
+	<MkStickyContainer :headerZIndex="2000">
 		<template #header>
 			<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs"/>
 		</template>