🎨

packages/frontend/src/components/MkWindow.vue

@@ -23,7 +23,7 @@
 					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
-			<div :class="$style.content">
+			<div v-container :class="$style.content">
 				<slot></slot>
 			</div>
 		</div>

packages/frontend/src/directives/container.ts

@@ -0,0 +1,21 @@
+import { Directive } from 'vue';
+
+const map = new WeakMap<HTMLElement, ResizeObserver>();
+
+export default {
+	mounted(el: HTMLElement, binding, vn) {
+		const ro = new ResizeObserver((entries, observer) => {
+			el.style.setProperty('--containerHeight', el.offsetHeight + 'px');
+		});
+		ro.observe(el);
+		map.set(el, ro);
+	},
+
+	unmounted(el, binding, vn) {
+		const ro = map.get(el);
+		if (ro) {
+			ro.disconnect();
+			map.delete(el);
+		}
+	},
+} as Directive;

packages/frontend/src/directives/index.ts

@@ -11,6 +11,7 @@ import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
 import adaptiveBg from './adaptive-bg';
+import container from './container';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
@@ -25,4 +26,5 @@ export default function(app: App) {
 	app.directive('panel', panel);
 	app.directive('adaptive-border', adaptiveBorder);
 	app.directive('adaptive-bg', adaptiveBg);
+	app.directive('container', container);
 }

packages/frontend/src/pages/my-lists/list.vue

@@ -128,7 +128,7 @@ definePageMetadata(computed(() => list ? {
 
 <style lang="scss" module>
 .main {
-	min-height: calc(100vh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
+	min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
 }
 
 .userItem {

packages/frontend/src/ui/deck/column.vue

@@ -22,7 +22,7 @@
 		<span :class="$style.title"><slot name="header"></slot></span>
 		<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
 	</header>
-	<div v-show="active" ref="body" :class="$style.body">
+	<div v-show="active" ref="body" v-container :class="$style.body">
 		<slot></slot>
 	</div>
 </section>

packages/frontend/src/ui/universal.vue

@@ -2,7 +2,7 @@
 <div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
 	<XSidebar v-if="!isMobile" :class="$style.sidebar"/>
 
-	<MkStickyContainer :class="$style.contents">
+	<MkStickyContainer v-container :class="$style.contents">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
 		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
 			<div :class="$style.content" style="container-type: inline-size;">