yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix username overflows

Browse source
This commit is contained in:
Face 2025-06-08 21:16:21 +03:00
parent e590a0ded2
commit 96f6db41db
5 changed files with 50 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

10
website/src/lib/components/self/CommentSection.svelte
View file

@ -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>

6
website/src/lib/components/self/UserProfilePreview.svelte
View file

@ -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>

5
website/src/routes/+page.svelte
View file

@ -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">

8
website/src/routes/coin/[coinSymbol]/+page.svelte
View file

@ -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} />

62
website/src/routes/hopium/[id]/+page.svelte
View file

@ -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"