feat: site-wide limit height

1 files changed, 77 insertions, 69 deletions

diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte
index 2b3f6284..26ac8de0 100644
--- a/src/routes/updates/+page.svelte
+++ b/src/routes/updates/+page.svelte
@@ -3,6 +3,7 @@
 
 	import { browser } from '$app/environment';
 	import HeadTitle from '$lib/HeadTitle.svelte';
+	import { createHeightObserver } from '$lib/Utility/html';
 	import { onMount } from 'svelte';
 
 	let feed: { items: { title: string; link: string; content: string }[] } | null | undefined =
@@ -20,6 +21,8 @@
 	let directLink = browser ? new URLSearchParams(window.location.search).has('d') : false;
 
 	onMount(async () => {
+		createHeightObserver();
+
 		startTime = performance.now();
 		novelFeed = await (await fetch('/api/updates/all-novels')).json();
 		novelEndTime = performance.now() - startTime;
@@ -51,81 +54,86 @@
 <HeadTitle route="Updates" path="/updates" />
 
 <div id="list-container">
-	<div>
-		<details open>
-			<summary>
-				Manga
-				<small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
-			</summary>
-
-			<ul>
-				{#if feed === null}
-					<li>Failed to load feed</li>
-				{:else if feed !== undefined}
-					{#each feed.items as item}
-						<li>
-							{#if directLink}
-								<i>{reformatChapter(item.title)}</i>
-
-								{@html item.content}
-							{:else}
-								<a
-									href={`https://anilist.co/search/manga?search=${clipTitle(
-										reformatChapter(item.title)
-									)}&sort=SEARCH_MATCH`}
-								>
-									<i>{@html clipTitle(reformatChapter(item.title))}</i>
-								</a>
-								{@html chapterTitle(reformatChapter(item.title))}
-							{/if}
-						</li>
-					{/each}
-				{:else}
-					<li>Loading feed ... 50%</li>
-				{/if}
-			</ul>
-		</details>
-	</div>
-
-	<div>
-		<details open>
-			<summary>
-				Novels
-				<small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
-			</summary>
-
-			<ul>
-				{#if novelFeed === null}
-					<li>Failed to load feed</li>
-				{:else if novelFeed !== undefined}
-					{#each novelFeed.data.items as item}
-						<li>
-							{#if directLink}
-								<a href={item.srcurl}>
-									<i>{@html item.series.name}</i>
-									{@html item.postfix || `Ch. ${item.chapter}`}
-								</a>
-							{:else}
-								<a
-									href={`https://anilist.co/search/manga?search=${item.series.name}&sort=SEARCH_MATCH`}
-								>
-									<i>{@html item.series.name}</i>
-								</a>
+	<details open class="list">
+		<summary>
+			Manga
+			<small style="opacity: 50%">{mangaEndTime ? mangaEndTime / 1000 : '...'}s</small>
+		</summary>
+
+		<ul>
+			{#if feed === null}
+				<li>Failed to load feed</li>
+			{:else if feed !== undefined}
+				{#each feed.items as item}
+					<li>
+						{#if directLink}
+							<i>{reformatChapter(item.title)}</i>
+
+							{@html item.content}
+						{:else}
+							<a
+								href={`https://anilist.co/search/manga?search=${clipTitle(
+									reformatChapter(item.title)
+								)}&sort=SEARCH_MATCH`}
+							>
+								<i>{@html clipTitle(reformatChapter(item.title))}</i>
+							</a>
+							{@html chapterTitle(reformatChapter(item.title))}
+						{/if}
+					</li>
+				{/each}
+			{:else}
+				<li>Loading feed ... 50%</li>
+			{/if}
+		</ul>
+	</details>
+
+	<details open class="list">
+		<summary>
+			Novels
+			<small style="opacity: 50%">{novelEndTime ? novelEndTime / 1000 : '...'}s</small>
+		</summary>
+
+		<ul>
+			{#if novelFeed === null}
+				<li>Failed to load feed</li>
+			{:else if novelFeed !== undefined}
+				{#each novelFeed.data.items as item}
+					<li>
+						{#if directLink}
+							<a href={item.srcurl}>
+								<i>{@html item.series.name}</i>
 								{@html item.postfix || `Ch. ${item.chapter}`}
-							{/if}
-						</li>
-					{/each}
-				{:else}
-					<li>Loading feed ... 50%</li>
-				{/if}
-			</ul>
-		</details>
-	</div>
+							</a>
+						{:else}
+							<a
+								href={`https://anilist.co/search/manga?search=${item.series.name}&sort=SEARCH_MATCH`}
+							>
+								<i>{@html item.series.name}</i>
+							</a>
+							{@html item.postfix || `Ch. ${item.chapter}`}
+						{/if}
+					</li>
+				{/each}
+			{:else}
+				<li>Loading feed ... 50%</li>
+			{/if}
+		</ul>
+	</details>
 </div>
 
 <style>
 	#list-container {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+		align-items: start;
+		gap: 1em;
+		flex-wrap: wrap;
+	}
+
+	.list {
+		overflow-y: auto;
+		min-width: 300px;
+		flex: 1 1 300px;
 	}
 </style>