From 915338caafa69280eaff70791abdc15f6d6404e2 Mon Sep 17 00:00:00 2001
From: MD1125 <166238654+MD1125@users.noreply.github.com>
Date: Sun, 1 Jun 2025 16:39:29 +0200
Subject: [PATCH] Hopium Status
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes how the Hopium status is shown when a Question has ended but isn't marked as Resolved yet.

## Note
Could it loop here:
```ts
if (resolution.confidence < 50) { ... }

(Just give me my earnings 😭 )
---
 website/src/routes/hopium/+page.svelte      |  2 +-
 website/src/routes/hopium/[id]/+page.svelte | 56 ++++++++++-----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/website/src/routes/hopium/+page.svelte b/website/src/routes/hopium/+page.svelte
index 38da00b..191b62e 100644
--- a/website/src/routes/hopium/+page.svelte
+++ b/website/src/routes/hopium/+page.svelte
@@ -274,7 +274,7 @@
 									<div class="flex items-center gap-1">
 										<Clock class="h-3 w-3" />
 										{#if question.status === 'ACTIVE'}
-											{formatTimeUntil(question.resolutionDate)} remaining
+											{formatTimeUntil(question.resolutionDate).startsWith('Ended') ? 'Resolving' : `${formatTimeUntil(question.resolutionDate)} remaining`}
 										{:else}
 											Resolved {formatDateWithYear(question.resolvedAt || '')}
 										{/if}
diff --git a/website/src/routes/hopium/[id]/+page.svelte b/website/src/routes/hopium/[id]/+page.svelte
index 57a5227..2f18e41 100644
--- a/website/src/routes/hopium/[id]/+page.svelte
+++ b/website/src/routes/hopium/[id]/+page.svelte
@@ -226,7 +226,7 @@
 				<h1 class="text-2xl font-semibold">{question.question}</h1>
 				{#if question.status === 'ACTIVE'}
 					<p class="text-muted-foreground mt-1 text-sm">
-						Ends in {formatTimeUntil(question.resolutionDate)}
+						{formatTimeUntil(question.resolutionDate).startsWith('Ended') ? 'Resolving' : `Ends in ${formatTimeUntil(question.resolutionDate)}`}
 					</p>
 				{/if}
 
@@ -315,32 +315,32 @@
 						<Card.Content class="space-y-6">
 							<!-- YES/NO Buttons -->
 							<div class="grid grid-cols-2 gap-4">
-								<Button
-									class={betSide
-										? 'bg-success/80 hover:bg-success/90 w-full'
-										: 'bg-muted hover:bg-muted/90 w-full'}
-									size="lg"
-									onclick={() => (betSide = true)}
-									disabled={question.aiResolution !== null}
-								>
-									<div class="flex items-baseline gap-2">
-										<span class="text-xl font-bold">YES</span>
-										<span class="text-sm">{question.yesPercentage.toFixed(1)}¢</span>
-									</div>
-								</Button>
-								<Button
-									class={!betSide
-										? 'bg-destructive hover:bg-destructive/90 w-full'
-										: 'bg-muted hover:bg-muted/90 w-full'}
-									size="lg"
-									onclick={() => (betSide = false)}
-									disabled={question.aiResolution !== null}
-								>
-									<div class="flex items-baseline gap-2">
-										<span class="text-xl font-bold">NO</span>
-										<span class="text-sm">{question.noPercentage.toFixed(1)}¢</span>
-									</div>
-								</Button>
+							<Button
+								class={betSide
+								? 'bg-success/80 hover:bg-success/90 w-full'
+								: 'bg-muted hover:bg-muted/90 w-full'}
+								size="lg"
+								onclick={() => (betSide = true)}
+								disabled={question.aiResolution !== null}
+							>
+								<div class="flex items-baseline gap-2 w-full min-w-0">
+								<span class="text-xl font-bold truncate">YES</span>
+								<span class="text-sm truncate">{question.yesPercentage.toFixed(1)}¢</span>
+								</div>
+							</Button>
+							<Button
+								class={!betSide
+								? 'bg-destructive hover:bg-destructive/90 w-full'
+								: 'bg-muted hover:bg-muted/90 w-full'}
+								size="lg"
+								onclick={() => (betSide = false)}
+								disabled={question.aiResolution !== null}
+							>
+								<div class="flex items-baseline gap-2 w-full min-w-0">
+								<span class="text-xl font-bold truncate">NO</span>
+								<span class="text-sm truncate">{question.noPercentage.toFixed(1)}¢</span>
+								</div>
+							</Button>
 							</div>
 
 							<!-- Amount Input -->
@@ -356,7 +356,7 @@
 							</div>
 
 							<!-- Quick Amount Buttons -->
-							<div class="flex gap-2">
+							<div class="flex flex-wrapper gap-2">
 								<Button
 									variant="outline"
 									class="flex-1"