diff options
| author | Yuval Adam <_@yuv.al> | 2025-06-15 14:17:57 +0200 |
|---|---|---|
| committer | Yuval Adam <_@yuv.al> | 2025-06-15 14:17:57 +0200 |
| commit | c529297129e7f532c6d428ce6428cb5f34b2ca6d (patch) | |
| tree | 5e929e678e9bc830ce051f8bce2ee3ad4aa8852b | |
| parent | c0a4ca3dfa8bae5af7015628c6944c4ac93e1548 (diff) | |
Fix horizontal scroll on small screens and remove counts
| -rw-r--r-- | src/components/NameLink.astro | 2 | ||||
| -rw-r--r-- | src/pages/index.astro | 10 |
2 files changed, 3 insertions, 9 deletions
diff --git a/src/components/NameLink.astro b/src/components/NameLink.astro index 8ceb7e1..35f2916 100644 --- a/src/components/NameLink.astro +++ b/src/components/NameLink.astro @@ -22,7 +22,7 @@ const sizeClasses = { }; --- -<span class={sizeClasses[size]}> +<span class={`${sizeClasses[size]} break-words`}> {nameParts.map((part, index) => ( <> {index > 0 && " "} diff --git a/src/pages/index.astro b/src/pages/index.astro index 0a29f75..afc872e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -103,9 +103,6 @@ const url = "https://namehack.club"; > <span class="text-2xl">💎</span> <span>Members</span> - <span class="text-lg text-gray-500 font-light" - >({members.length})</span - > </h2> <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" @@ -131,16 +128,13 @@ const url = "https://namehack.club"; > <span class="text-2xl">⭐</span> <span>Candidates</span> - <span class="text-lg text-gray-500 font-light" - >({candidates.length})</span - > </h2> <ul - class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2" + class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-2" > { candidates.map((name) => ( - <li class="p-1 rounded hover:bg-gray-50 transition-colors duration-200 text-center text-xs"> + <li class="p-1 rounded hover:bg-gray-50 transition-colors duration-200 text-center text-xs overflow-hidden"> <NameLink name={name} size="small" /> </li> )) |