From 7ca1c68c528a4fd9d6d5e026db8255e040b9674c Mon Sep 17 00:00:00 2001
From: Anas Rashid <anasrasheed22@gmail.com>
Date: Fri, 9 Oct 2026 01:07:33 +0200
Subject: [PATCH] =?UTF-8?q?Poet=20cards:=20one=20size=20for=20all=20(210px?=
 =?UTF-8?q?,=20two=20per=20row=20on=20phones);=20long=20names=20end=20in?=
 =?UTF-8?q?=20=E2=80=A6=20with=20the=20full=20name=20on=20hover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/pages/index.astro | 6 +++---
 web/src/styles/global.css | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index eb275f91..39d45788 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -34,7 +34,7 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
       <h2>مقبول شعرا</h2>
       <div class="poets">
         {pinned.map((p) => (
-          <a class={card(p)} href={p.url}>{p.nickname}{yearLines(p).map((y) => <small>{y}</small>)}</a>
+          <a class={card(p)} href={p.url} title={p.nickname}><span class="name">{p.nickname}</span>{yearLines(p).map((y) => <small>{y}</small>)}</a>
         ))}
       </div>
     </section>
@@ -45,8 +45,8 @@ const card = (p: Poet) => `poet-card${marked.includes(p.id) ? ' mark-bm' : ''}`;
       <h2>{centuryName(century)}</h2>
       <div class="poets">
         {list.map((p) => (
-          <a class={card(p)} href={p.url}>
-            {p.nickname}
+          <a class={card(p)} href={p.url} title={p.nickname}>
+            <span class="name">{p.nickname}</span>
             {yearLines(p).map((y) => <small>{y}</small>)}
           </a>
         ))}
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index a1fa2c9a..8258a8f2 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -63,12 +63,15 @@ h1::after { content: ''; display: block; width: 140px; height: 2px; background:
 /* poet tiles (captions only, photos hidden for now) */
 .poets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
 .poet-card {
-  min-width: 120px; text-align: center; background: var(--paper); border: 1.5px solid var(--border);
+  /* one size for every card: long names end in … (full name on hover) */
+  width: 210px; max-width: calc(50% - 4px); min-height: 5.125rem; text-align: center;
+  display: flex; flex-direction: column; justify-content: center; background: var(--paper); border: 1.5px solid var(--border);
   border-radius: 999px; padding: 6px 36px 8px; color: var(--ink); transition: transform .25s; position: relative;
 }
 /* the bookmark sits in the top-left corner, inside the side padding (36px), so it never covers the name and a saved card keeps its size */
 .poet-card.mark-bm::after { position: absolute; top: 12px; left: 16px; margin: 0; }
 .poet-card:hover { transform: translateY(-3px); border-color: var(--brand); color: var(--ink); }
+.poet-card .name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .poet-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.5; white-space: nowrap; }
 .hero { text-align: center; }
 .hero p { margin: 0; }