From 9defa75ae5f547493ac2ab2898aea84d32ea6de4 Mon Sep 17 00:00:00 2001
From: PalmDevs <git@palmdevs.me>
Date: Fri, 7 Jun 2024 00:10:18 +0700
Subject: [PATCH] feat(routes/patches): allow scrolling to footer without
 scrolling through patch cards

---
 src/routes/patches/+page.svelte       | 37 +++++++++++++++++----------
 src/routes/patches/PackageMenu.svelte | 20 ++++++++++-----
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index d5b59b4..573814a 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -134,20 +134,20 @@
 			title="Search for patches"
 			on:keyup={debounce(update)}
 		/>
+		<div class="filter-chips" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+			<FilterChip
+				selected={!!selectedPkg}
+				dropdown
+				on:click={() => (mobilePackages = !mobilePackages)}
+			>
+				{selectedPkg || 'Packages'}
+			</FilterChip>
+			<!-- <FilterChip check>Universal</FilterChip>
+			<FilterChip>Patch options</FilterChip> -->
+		</div>
 	</div>
 </div>
 <main>
-	<div class="filter-chips" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-		<FilterChip
-			selected={!!selectedPkg}
-			dropdown
-			on:click={() => (mobilePackages = !mobilePackages)}
-		>
-			{selectedPkg || 'Packages'}
-		</FilterChip>
-		<!-- <FilterChip check>Universal</FilterChip>
-		<FilterChip>Patch options</FilterChip> -->
-	</div>
 
 	<Query {query} let:data>
 		<div class="mobile-packages-Dialogue">
@@ -204,6 +204,8 @@
 		width: min(90%, 80rem);
 		margin-inline: auto;
 		gap: 1.5rem;
+		height: 100vh;
+		height: 100dvh;
 	}
 
 	.search {
@@ -218,7 +220,7 @@
 	}
 
 	.patches-container {
-		overflow: hidden;
+		overflow: auto;
 		border-radius: 20px;
 		margin-top: 1.5rem;
 		display: flex;
@@ -227,7 +229,7 @@
 		width: 100%;
 		position: sticky;
 		z-index: 1;
-		min-height: calc(100vh - 6rem);
+		height: calc(100vh - 12rem);
 		margin-bottom: 3rem;
 	}
 
@@ -254,6 +256,15 @@
 			gap: 0;
 		}
 
+		.patches-container {
+			height: calc(100vh - 14rem);
+		}
+
+		.mobile-packages-Dialogue {
+			/* CSS black magic made this have a weird gap, so this fixes it */
+			position: absolute;
+		}
+
 		aside {
 			display: none;
 		}
diff --git a/src/routes/patches/PackageMenu.svelte b/src/routes/patches/PackageMenu.svelte
index ccc7b5d..29df0fa 100644
--- a/src/routes/patches/PackageMenu.svelte
+++ b/src/routes/patches/PackageMenu.svelte
@@ -1,6 +1,8 @@
 <div class="menu">
-	<h6>Packages</h6>
-	<hr />
+	<div class="header">
+		<h6>Packages</h6>
+		<hr />
+	</div>
 	<div class="slot">
 		<slot />
 	</div>
@@ -8,14 +10,11 @@
 
 <style>
 	.menu {
-		height: calc(100vh - 60px);
+		height: calc(100vh - 10.5rem);
 		width: 100%;
-		padding: 0px 30px 30px 10px;
+		padding: 0px 30px 0px 10px;
 		display: flex;
 		flex-direction: column;
-		position: sticky;
-		top: 60px;
-		padding-top: calc(6rem - 60px);
 		overflow-y: scroll;
 	}
 
@@ -26,6 +25,13 @@
 		background-color: var(--accent-color);
 	}
 
+	.header {
+		padding-top: calc(6rem - 64px);
+		position: sticky;
+		top: 0;
+		background-color: var(--bg-color);
+	}
+
 	.slot {
 		margin-top: 0.75rem;
 		display: flex;