improve server card ui
Hee Sung Son committed
Nov 20, 2025 at 10:33 UTC
dd784d28b57c6290a895864ac5c637699b591dd1
2 files changed
+9
-7
cmd/relay-server/frontend/src/App.tsx
+1
-1
@@ -141,7 +141,7 @@ function App() {
141
sortBy={sortBy}
142
onSortByChange={handleSortByChange}
143
/>
144
- <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 p-4 sm:p-6 mt-4">
144
+ <div className="grid grid-cols-1 min-[500px]:grid-cols-2 md:grid-cols-3 gap-6 p-4 min-[500px]:p-6 mt-4">
145
{paginatedServers.length > 0 ? (
146
paginatedServers.map((server) => (
147
<ServerCard
cmd/relay-server/frontend/src/components/ServerCard.tsx
+8
-6
@@ -29,11 +29,11 @@ export function ServerCard({
29
type="button"
30
onClick={goServer}
31
bg-card-dark
32
- className="bg-center bg-no-repeat bg-cover rounded-xl shadow-sm hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
32
+ className="h-[174.5px] bg-center bg-no-repeat bg-cover rounded-xl shadow-sm hover:shadow-lg hover:scale-105 transition-all duration-300 cursor-pointer"
33
style={{ backgroundImage: `url(${thumbnail || defaultThumbnail})` }}
34
>
35
<div className="h-full w-full bg-black/70 rounded-xl z-1 flex flex-col gap-4 p-4 items-start text-start">
36
- <div className="flex flex-1 flex-col justify-between gap-4">
36
+ <div className="w-full flex flex-1 flex-col justify-between gap-4">
37
<div className="flex flex-col gap-2">
38
<div className="flex items-center gap-2">
39
<div
@@ -49,9 +49,11 @@ export function ServerCard({
49
{online ? "Online" : "Offline"}
50
</p>
51
</div>
52
- <p className="text-white text-lg font-bold leading-tight">{name}</p>
52
+ <p className="text-white text-lg font-bold leading-tight truncate max-w-full">
53
+ {name}
54
+ </p>
55
{description && (
54
- <p className="text-text-muted text-sm font-normal leading-normal line-clamp-2">
56
+ <p className="text-text-muted text-sm font-normal leading-normal truncate max-w-full">
57
{description}
58
</p>
59
)}
@@ -60,7 +62,7 @@ export function ServerCard({
62
{tags.map((tag, index) => (
63
<span
64
key={index}
63
- className="px-2 py-1 bg-border-dark text-primary text-xs font-medium rounded"
65
+ className="px-2 py-1 bg-border-dark text-primary text-xs font-medium rounded truncate max-w-[120px]"
66
>
67
{tag}
68
</span>
@@ -68,7 +70,7 @@ export function ServerCard({
70
</div>
71
)}
72
{owner && (
71
- <p className="text-text-muted text-xs font-normal leading-normal">
73
+ <p className="text-text-muted text-xs font-normal leading-normal truncate max-w-full">
74
by {owner}
75
</p>
76
)}