fix(html): more robust (ultimate) height limiter

1 files changed, 24 insertions, 21 deletions

diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts
index d1e506f6..a7e61c3b 100644
--- a/src/lib/Utility/html.ts
+++ b/src/lib/Utility/html.ts
@@ -3,30 +3,33 @@ import { get } from 'svelte/store';
 
 export const nbsp = (str: string) => str.replace(/ /g, ' ');
 
-export const limitListHeight = () => {
-	if (get(settings).displayLimitListHeight) {
-		let tallestList: HTMLElement | undefined;
-
-		document.querySelectorAll('.list').forEach((list) => {
-			const element = list as HTMLElement;
-
-			element.style.height = 'auto';
+export const createHeightObserver = () => {
+	const heightObserver = new ResizeObserver(() => {
+		if (get(settings).displayLimitListHeight) {
+			document.querySelectorAll('.list').forEach((list) => {
+				const element = list as HTMLElement;
 
-			if (element.offsetHeight > (tallestList ? tallestList.offsetHeight : 0))
-				tallestList = element;
-		});
+				element.style.height = 'auto';
 
-		if (tallestList)
-			tallestList.style.maxHeight = `calc(${window.innerHeight}px - ${
-				document.querySelector('#header')?.getBoundingClientRect().bottom || 0
-			}px - 4rem)`;
-	}
-};
+				const elementBound = element.getBoundingClientRect();
+				const height = window.innerHeight - elementBound.top - 2.5 * 16;
 
-export const createHeightObserver = () => {
-	const observer = new ResizeObserver(() => limitListHeight());
+				if (elementBound.height > height) element.style.height = `${height}px`;
+			});
+		}
+	});
+	const collapseObserver = new MutationObserver(() => {
+		document.querySelectorAll('.list').forEach((list) => {
+			const element = list as HTMLDetailsElement;
 
-	document.querySelectorAll('#list-container').forEach((element) => {
-		observer.observe(element);
+			if (element.tagName === 'DETAILS' && !element.open) element.style.height = 'auto';
+		});
 	});
+
+	document
+		.querySelectorAll('#list-container')
+		.forEach((element) => heightObserver.observe(element));
+	document
+		.querySelectorAll('.list')
+		.forEach((element) => collapseObserver.observe(element, { attributes: true }));
 };