From 3da8b3f21f448257cda82524ce50fe32e8001f24 Mon Sep 17 00:00:00 2001
From: Script Raccoon <scriptraccoon@gmail.com>
Date: Thu, 14 May 2026 08:05:46 +0200
Subject: [PATCH 1/2] allow popup to scroll

---
 src/components/Popup.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte
index 80bf6edd1..ac0eed3a6 100644
--- a/src/components/Popup.svelte
+++ b/src/components/Popup.svelte
@@ -103,6 +103,8 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 		bottom: 0;
 		left: 0;
 		right: 0;
+		max-height: 100vh;
+		overflow-y: scroll;
 		background-color: var(--bg-color);
 		border-top: 2px solid var(--secondary-outline-color);
 		color: var(--text-color);

From ef2f0db82a0b532d929181857a59373f3c9ecf1a Mon Sep 17 00:00:00 2001
From: Script Raccoon <scriptraccoon@gmail.com>
Date: Thu, 14 May 2026 08:13:38 +0200
Subject: [PATCH 2/2] reorder styles

---
 src/components/Popup.svelte | 51 ++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte
index ac0eed3a6..a117c6573 100644
--- a/src/components/Popup.svelte
+++ b/src/components/Popup.svelte
@@ -75,29 +75,7 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 </div>
 
 <style>
-	header {
-		margin-block: 0rem 1rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	h3 {
-		margin: 0;
-	}
-
-	.content {
-		max-width: 800px;
-		margin: 0 auto;
-
-		:global(a:has(.katex)) {
-			text-decoration: none;
-			border-bottom: 1px solid var(--outline-color);
-		}
-	}
-
 	.popup {
-		--speed: 120ms;
 		position: fixed;
 		z-index: 5;
 		bottom: 0;
@@ -117,8 +95,8 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 		pointer-events: none;
 
 		transition:
-			opacity var(--speed) linear,
-			transform var(--speed) ease-out;
+			opacity 120ms linear,
+			transform 120ms ease-out;
 	}
 
 	.popup.open {
@@ -127,7 +105,28 @@ an issue when clicking two reasons in a row. So it's a <div> then.
 		pointer-events: initial;
 	}
 
-	button {
-		padding: 0.2rem 1rem;
+	.content {
+		max-width: 800px;
+		margin: 0 auto;
+
+		:global(a:has(.katex)) {
+			text-decoration: none;
+			border-bottom: 1px solid var(--outline-color);
+		}
+	}
+
+	header {
+		margin-block: 0rem 1rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		h3 {
+			margin: 0;
+		}
+
+		button {
+			padding: 0.2rem 1rem;
+		}
 	}
 </style>