feat: site-wide limit height

1 files changed, 21 insertions, 13 deletions

diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts
index 46c7101e..3be8e1f5 100644
--- a/src/lib/Utility/html.ts
+++ b/src/lib/Utility/html.ts
@@ -5,20 +5,28 @@ 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 listContainerBottom =
-				document.querySelector('#list-container')?.getBoundingClientRect().bottom || 0;
-			const headerBottom =
-				(document.querySelector('#header')?.getBoundingClientRect().bottom || 0) * 1.5;
-			const offset = 1.25 + 0.275;
-			const offsetInPixels =
-				offset * parseFloat(getComputedStyle(document.documentElement).fontSize);
-
-			(
-				list as HTMLElement
-			).style.maxHeight = `calc(100vh - ${listContainerBottom}px + ${headerBottom}px - ${
-				offsetInPixels * 2
-			}px)`;
+			const element = list as HTMLElement;
+
+			element.style.height = 'auto';
+
+			if (element.offsetHeight > (tallestList ? tallestList.offsetHeight : 0))
+				tallestList = element;
 		});
+
+		if (tallestList)
+			tallestList.style.maxHeight = `calc(${window.innerHeight}px - ${
+				document.querySelector('#header')?.getBoundingClientRect().bottom || 0
+			}px - 2rem)`;
 	}
 };
+
+export const createHeightObserver = () => {
+	const observer = new ResizeObserver(() => limitListHeight());
+
+	document.querySelectorAll('#list-container').forEach((element) => {
+		observer.observe(element);
+	});
+};