From c336d7d7a7e60fd01a0466e4f5dd786b4e38095d Mon Sep 17 00:00:00 2001
From: Maya <jovannmc@femboyfurry.net>
Date: Fri, 25 Jul 2025 14:02:20 +0300
Subject: [PATCH] fix: visual fixes

---
 src/lib/css/app.scss                 |  3 +++
 src/lib/sections/about/Donate.svelte |  9 +++----
 src/routes/+page.svelte              | 36 +++++++++++++---------------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/css/app.scss b/src/lib/css/app.scss
index fd5caab..7cf11b9 100644
--- a/src/lib/css/app.scss
+++ b/src/lib/css/app.scss
@@ -318,14 +318,17 @@ body {
 
 .hoverable {
 	@apply hover:scale-105 duration-200;
+	will-change: transform;
 }
 
 .hoverable-md {
 	@apply hover:scale-110 duration-200;
+	will-change: transform;
 }
 
 .hoverable-lg {
 	@apply hover:scale-[1.15] duration-200;
+	will-change: transform;
 }
 
 .selected {
diff --git a/src/lib/sections/about/Donate.svelte b/src/lib/sections/about/Donate.svelte
index 080ca0f..0e63d0c 100644
--- a/src/lib/sections/about/Donate.svelte
+++ b/src/lib/sections/about/Donate.svelte
@@ -210,22 +210,23 @@
 				Monthly
 			</button>
 		</div>
-		<div class="flex gap-3 w-full">
-			{#each presetAmounts as preset}
+		<div class="grid grid-cols-4 gap-3 w-full">
+			{#each presetAmounts as preset, i}
 				<button
 					onclick={() => amountClick(preset)}
 					class={clsx(
-						"btn flex-1 p-4 rounded-lg flex items-center justify-center",
+						"btn p-4 rounded-lg flex items-center justify-center",
 						{
 							"!scale-100": !$effects,
 							"bg-accent-red text-black": amount === preset,
 						},
 					)}
+					style={i === 2 ? "grid-column: 3;" : ""}
 				>
 					${preset} USD
 				</button>
 			{/each}
-			<div class="flex-[2] flex items-center justify-center">
+			<div class="flex items-center justify-center">
 				<FancyInput
 					bind:value={customAmount}
 					placeholder="Custom"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cde26e4..4f5b691 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -115,28 +115,24 @@
 					</div>
 
 					<div class="file-category-card-content flex-grow gap-4">
-						<div class="flex flex-col gap-1">
-							{#if key === "Video"}
-								<p>
-									Video uploads to a server for processing by
-									default, learn how to set it up locally <a
-										target="_blank"
-										href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
-										>here</a
-									>.
-								</p>
-							{:else}
-								<p
-									class="flex tems-center justify-center gap-2"
-								>
-									<Check size="20" /> Local fully supported
-								</p>
-							{/if}
+						{#if key === "Video"}
 							<p>
-								<b>Status: </b>
-								{s.ready ? "ready" : "not ready"}
+								Video uploads to a server for processing by
+								default, learn how to set it up locally <a
+									target="_blank"
+									href="https://github.com/VERT-sh/VERT/wiki/How-to-convert-video-with-VERT"
+									>here</a
+								>.
 							</p>
-						</div>
+						{:else}
+							<p class="flex tems-center justify-center gap-2">
+								<Check size="20" /> Local fully supported
+							</p>
+						{/if}
+						<p>
+							<b>Status: </b>
+							{s.ready ? "ready" : "not ready"}
+						</p>
 						<div>
 							<span class="flex flex-wrap justify-center">
 								<b>Supported formats:&nbsp;</b>