From 61881ce2f2c7d2f0da9df970eef18d85e57e0032 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Tue, 2 Jan 2024 03:25:12 -0800
Subject: fix(html): better limit list height

---
 src/lib/Utility/html.ts           | 22 ++++++++++++++++++++++
 src/routes/+page.svelte           | 11 ++++-------
 src/routes/completed/+page.svelte |  9 ++-------
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/lib/Utility/html.ts b/src/lib/Utility/html.ts
index 6d2136aa..01041b0e 100644
--- a/src/lib/Utility/html.ts
+++ b/src/lib/Utility/html.ts
@@ -1 +1,23 @@
+import settings from '$stores/settings';
+import { get } from 'svelte/store';
+
 export const nbsp = (str: string) => str.replace(/ /g, '&nbsp;');
+
+export const limitListHeight = () => {
+	if (get(settings).displayLimitListHeight) {
+		document.querySelectorAll('.list').forEach((list) => {
+			const listContainerBottom =
+				document.querySelector('#list-container')?.getBoundingClientRect().bottom || 0;
+			const headerBottom = document.querySelector('#header')?.getBoundingClientRect().bottom || 0;
+			const offset = 1.25;
+			const offsetInPixels =
+				offset * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+			(
+				list as HTMLElement
+			).style.maxHeight = `calc(100vh - ${listContainerBottom}px + ${headerBottom}px - ${
+				offsetInPixels * 2
+			}px)`;
+		});
+	}
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2809a649..13af2e3b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,19 +9,14 @@
 	import ListTitle from '$lib/List/ListTitle.svelte';
 	import HeadTitle from '$lib/HeadTitle.svelte';
 	import LastActivity from '$lib/LastActivity.svelte';
+	import { limitListHeight } from '$lib/Utility/html.js';
 
 	export let data;
 
 	let currentUserIdentity = { name: '', id: -1 };
 
 	onMount(async () => {
-		if ($settings.displayLimitListHeight) {
-			document.querySelectorAll('.list').forEach((list) => {
-				(list as HTMLElement).style.maxHeight = `calc(100vh - ${
-					document.querySelector('#list-container')?.getBoundingClientRect().bottom
-				}px + 1.1rem)`;
-			});
-		}
+		limitListHeight();
 
 		if (data.user !== undefined) {
 			if ($userIdentity === '') {
@@ -111,5 +106,7 @@
 	.list {
 		overflow-y: auto;
 		break-inside: avoid-column;
+		/* max-height: 80vh; */
+		overflow-y: auto;
 	}
 </style>
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 0ef8f10d..3e324b6d 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -8,19 +8,14 @@
 	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
 	import HeadTitle from '$lib/HeadTitle.svelte';
 	import LastActivity from '$lib/LastActivity.svelte';
+	import { limitListHeight } from '$lib/Utility/html.js';
 
 	export let data;
 
 	let currentUserIdentity = { name: '', id: -1 };
 
 	onMount(async () => {
-		if ($settings.displayLimitListHeight) {
-			document.querySelectorAll('.list').forEach((list) => {
-				(list as HTMLElement).style.maxHeight = `calc(100vh - ${
-					document.querySelector('#list-container')?.getBoundingClientRect().bottom
-				}px + 1.1rem)`;
-			});
-		}
+		limitListHeight();
 
 		if (data.user !== undefined) {
 			if ($userIdentity === '') {
-- 
cgit v1.2.3