From 96f6db41db2a34645a23c3aa4d02795d615ab24a Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sun, 8 Jun 2025 21:16:21 +0300
Subject: [PATCH] fix username overflows

---
 .../lib/components/self/CommentSection.svelte | 10 +--
 .../components/self/UserProfilePreview.svelte |  6 +-
 website/src/routes/+page.svelte               |  7 ++-
 .../src/routes/coin/[coinSymbol]/+page.svelte |  8 ++-
 website/src/routes/hopium/[id]/+page.svelte   | 62 ++++++++++---------
 5 files changed, 50 insertions(+), 43 deletions(-)

diff --git a/website/src/lib/components/self/CommentSection.svelte b/website/src/lib/components/self/CommentSection.svelte
index 02c426c..a2c89d1 100644
--- a/website/src/lib/components/self/CommentSection.svelte
+++ b/website/src/lib/components/self/CommentSection.svelte
@@ -228,10 +228,10 @@
 								<div class="flex items-center gap-2">
 									<HoverCard.Root>
 										<HoverCard.Trigger
-											class="cursor-pointer font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 truncate max-w-[120px] sm:max-w-none text-sm sm:text-base"
+											class="min-w-0 max-w-[120px] flex-shrink cursor-pointer text-sm font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 sm:max-w-[180px] sm:text-base"
 											onclick={() => goto(`/user/${comment.userUsername}`)}
 										>
-											{comment.userName}
+											<span class="block truncate">{comment.userName}</span>
 										</HoverCard.Trigger>
 										<HoverCard.Content class="w-80" side="top" sideOffset={3}>
 											<UserProfilePreview userId={comment.userId} />
@@ -239,13 +239,13 @@
 									</HoverCard.Root>
 									<button
 										onclick={() => goto(`/user/${comment.userUsername}`)}
-										class="cursor-pointer flex-shrink-0 max-w-[80px] sm:max-w-none"
+										class="max-w-[80px] flex-shrink-0 cursor-pointer sm:max-w-none"
 									>
-										<Badge variant="outline" class="text-xs w-full justify-start">
+										<Badge variant="outline" class="w-full justify-start text-xs">
 											<span class="truncate">@{comment.userUsername}</span>
 										</Badge>
 									</button>
-									<span class="text-muted-foreground whitespace-nowrap text-xs flex-shrink-0">
+									<span class="text-muted-foreground flex-shrink-0 whitespace-nowrap text-xs">
 										{formatTimeAgo(comment.createdAt)}
 									</span>
 								</div>
diff --git a/website/src/lib/components/self/UserProfilePreview.svelte b/website/src/lib/components/self/UserProfilePreview.svelte
index 097c69c..8fc1ff4 100644
--- a/website/src/lib/components/self/UserProfilePreview.svelte
+++ b/website/src/lib/components/self/UserProfilePreview.svelte
@@ -85,8 +85,10 @@
 				<Avatar.Fallback class="text-sm">{profile.name?.charAt(0) || '?'}</Avatar.Fallback>
 			</Avatar.Root>
 			<div class="min-w-0 flex-1 space-y-1">
-				<div class="flex items-center gap-2">
-					<h4 class="text-sm font-semibold">{profile.name}</h4>
+				<div class="flex min-w-0 items-center gap-2">
+					<h4 class="max-w-[150px] truncate text-sm font-semibold sm:max-w-[200px]">
+						{profile.name}
+					</h4>
 					<ProfileBadges user={profile} showId={true} size="sm" />
 				</div>
 				<p class="text-muted-foreground text-sm">@{profile.username}</p>
diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 4aff858..e51493d 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -74,7 +74,7 @@
 	];
 </script>
 
-<SEO 
+<SEO
 	title="Rugplay"
 	description="Experience realistic cryptocurrency trading simulation with AI-powered markets, rug pull mechanics, and virtual currencies. Learn crypto trading without financial risk in this educational trading game."
 	keywords="crypto simulation game, trading practice game, rug pull simulation, virtual cryptocurrency game"
@@ -84,7 +84,7 @@
 
 <div class="container mx-auto p-6">
 	<header class="mb-8">
-		<h1 class="mb-2 text-3xl font-bold">
+		<h1 class="mb-2 truncate text-3xl font-bold">
 			{$USER_DATA ? getTimeBasedGreeting($USER_DATA?.name) : 'Welcome to Rugplay!'}
 		</h1>
 		<p class="text-muted-foreground">
@@ -113,7 +113,8 @@
 				<p class="text-muted-foreground text-sm">Be the first to create a coin!</p>
 			</div>
 		</div>
-	{:else}		<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+	{:else}
+		<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
 			{#each coins.slice(0, 6) as coin (coin.symbol)}
 				<a href={`/coin/${coin.symbol}`} class="block">
 					<Card.Root class="hover:bg-card/50 h-full transition-all hover:shadow-md">
diff --git a/website/src/routes/coin/[coinSymbol]/+page.svelte b/website/src/routes/coin/[coinSymbol]/+page.svelte
index 1b5f0fd..260f617 100644
--- a/website/src/routes/coin/[coinSymbol]/+page.svelte
+++ b/website/src/routes/coin/[coinSymbol]/+page.svelte
@@ -449,14 +449,16 @@
 
 					<HoverCard.Root>
 						<HoverCard.Trigger
-							class="flex cursor-pointer items-center gap-1 rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8"
+							class="flex min-w-0 max-w-[200px] cursor-pointer items-center gap-1 rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 sm:max-w-[250px]"
 							onclick={() => goto(`/user/${coin.creatorUsername}`)}
 						>
-							<Avatar.Root class="h-4 w-4">
+							<Avatar.Root class="h-4 w-4 flex-shrink-0">
 								<Avatar.Image src={getPublicUrl(coin.creatorImage)} alt={coin.creatorName} />
 								<Avatar.Fallback>{coin.creatorName.charAt(0)}</Avatar.Fallback>
 							</Avatar.Root>
-							<span class="font-medium">{coin.creatorName} (@{coin.creatorUsername})</span>
+							<span class="block truncate font-medium"
+								>{coin.creatorName} (@{coin.creatorUsername})</span
+							>
 						</HoverCard.Trigger>
 						<HoverCard.Content class="w-80" side="bottom" sideOffset={3}>
 							<UserProfilePreview userId={coin.creatorId} />
diff --git a/website/src/routes/hopium/[id]/+page.svelte b/website/src/routes/hopium/[id]/+page.svelte
index 2258dd3..5d4fa17 100644
--- a/website/src/routes/hopium/[id]/+page.svelte
+++ b/website/src/routes/hopium/[id]/+page.svelte
@@ -226,7 +226,9 @@
 				<h1 class="text-2xl font-semibold">{question.question}</h1>
 				{#if question.status === 'ACTIVE'}
 					<p class="text-muted-foreground mt-1 text-sm">
-						{formatTimeUntil(question.resolutionDate).startsWith('Ended') ? 'Resolving' : `Ends in ${formatTimeUntil(question.resolutionDate)}`}
+						{formatTimeUntil(question.resolutionDate).startsWith('Ended')
+							? 'Resolving'
+							: `Ends in ${formatTimeUntil(question.resolutionDate)}`}
 					</p>
 				{/if}
 
@@ -249,7 +251,7 @@
 
 			<HoverCard.Root>
 				<HoverCard.Trigger
-					class="flex cursor-pointer items-center gap-1 rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8"
+					class="flex max-w-[180px] cursor-pointer items-center gap-1 rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 sm:max-w-[220px]"
 					onclick={() => goto(`/user/${question?.creator.username}`)}
 				>
 					<Avatar.Root class="h-4 w-4">
@@ -259,7 +261,7 @@
 						/>
 						<Avatar.Fallback>{question.creator.username.charAt(0)}</Avatar.Fallback>
 					</Avatar.Root>
-					<span class="font-medium">{question.creator.name} (@{question.creator.username})</span>
+					<span>{question.creator.name} (@{question.creator.username})</span>
 				</HoverCard.Trigger>
 				<HoverCard.Content class="w-80" side="bottom" sideOffset={3}>
 					<UserProfilePreview userId={question.creator.id} />
@@ -315,32 +317,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 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>
+								<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 w-full min-w-0 items-baseline gap-2">
+										<span class="truncate text-xl font-bold">YES</span>
+										<span class="truncate 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 w-full min-w-0 items-baseline gap-2">
+										<span class="truncate text-xl font-bold">NO</span>
+										<span class="truncate text-sm">{question.noPercentage.toFixed(1)}¢</span>
+									</div>
+								</Button>
 							</div>
 
 							<!-- Amount Input -->
@@ -356,7 +358,7 @@
 							</div>
 
 							<!-- Quick Amount Buttons -->
-							<div class="flex flex-wrapper gap-2">
+							<div class="flex-wrapper flex gap-2">
 								<Button
 									variant="outline"
 									class="flex-1 truncate"