diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
index f7565ca59f..e7ad2b9a43 100644
--- a/packages/frontend/src/components/MkWindow.vue
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -23,7 +23,7 @@
-
diff --git a/packages/frontend/src/directives/container.ts b/packages/frontend/src/directives/container.ts
new file mode 100644
index 0000000000..a8a93eb9be
--- /dev/null
+++ b/packages/frontend/src/directives/container.ts
@@ -0,0 +1,21 @@
+import { Directive } from 'vue';
+
+const map = new WeakMap();
+
+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;
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
index a690fd6c42..854f0a544e 100644
--- a/packages/frontend/src/directives/index.ts
+++ b/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);
}
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
index 037d00d8ff..205434971d 100644
--- a/packages/frontend/src/pages/my-lists/list.vue
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -128,7 +128,7 @@ definePageMetadata(computed(() => list ? {