From 4af66d62c5e9c25c95d3532ca2df56e2be387733 Mon Sep 17 00:00:00 2001
From: furedea <132188853+furedea@users.noreply.github.com>
Date: Mon, 19 Oct 2026 16:36:08 +0900
Subject: [PATCH] fix: align activity dates, labels, and titles in columns

Lay activities out on a shared grid so titles start at the same
position regardless of date or label length, with equal-width badges.

Closes #79

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/activities_section.astro |  3 +++
 src/components/activity_entry.astro     | 13 ++++++++-----
 tests/e2e/site.spec.ts                  | 21 +++++++++++++++++++++
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/activities_section.astro b/src/components/activities_section.astro
index 86b2ad9..ae0c42a 100644
--- a/src/components/activities_section.astro
+++ b/src/components/activities_section.astro
@@ -30,6 +30,9 @@ const activities = await getActivities();
 
 <style>
   .activity-list {
+    display: grid;
+    grid-template-columns: max-content max-content minmax(0, 1fr);
+    column-gap: 0.75rem;
     list-style: none;
   }
 
diff --git a/src/components/activity_entry.astro b/src/components/activity_entry.astro
index 510dbde..adf9c87 100644
--- a/src/components/activity_entry.astro
+++ b/src/components/activity_entry.astro
@@ -17,14 +17,16 @@ const title = pickLocale(item.title, lang);
 <li class="activity-entry">
   <time datetime={item.date}>{formatActivityPeriod(item)}</time>
   <span class={`badge badge-${item.type}`}>{t(`activity.type.${item.type}`)}</span>
-  <OptionalLink href={item.url}>{title}</OptionalLink>
+  <span class="activity-title"><OptionalLink href={item.url}>{title}</OptionalLink></span>
 </li>
 
 <style>
   .activity-entry {
-    display: flex;
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
     align-items: baseline;
-    gap: 0.75rem;
+    row-gap: 0.25rem;
     padding: 0.5rem 0;
   }
 
@@ -43,6 +45,7 @@ const title = pickLocale(item.title, lang);
     padding: 0.0625rem 0.375rem;
     border-radius: 0.1875rem;
     white-space: nowrap;
+    text-align: center;
     color: var(--color-bg);
     background: var(--color-text-secondary);
   }
@@ -68,8 +71,8 @@ const title = pickLocale(item.title, lang);
   }
 
   @media (width < 640px) {
-    .activity-entry {
-      flex-wrap: wrap;
+    .activity-title {
+      grid-column: 1 / -1;
     }
   }
 </style>
diff --git a/tests/e2e/site.spec.ts b/tests/e2e/site.spec.ts
index 57eba22..ffe73de 100644
--- a/tests/e2e/site.spec.ts
+++ b/tests/e2e/site.spec.ts
@@ -173,6 +173,27 @@ test("shows dated activities with their periods, labels, and links", async ({ pa
   );
 });
 
+test("aligns activity titles and badge widths across entries", async ({ page }) => {
+  for (const lang of ["ja", "en"] as const) {
+    await page.goto(`/${lang}/`);
+
+    const entries = page.locator('section[aria-labelledby="activities"] .activity-entry');
+    const titleLefts = await entries
+      .locator(".activity-title")
+      .evaluateAll((titles) =>
+        titles.map((title) => Math.round(title.getBoundingClientRect().left)),
+      );
+    const badgeWidths = await entries
+      .locator(".badge")
+      .evaluateAll((badges) =>
+        badges.map((badge) => Math.round(badge.getBoundingClientRect().width)),
+      );
+    expect(titleLefts.length).toBeGreaterThan(1);
+    expect(new Set(titleLefts).size).toBe(1);
+    expect(new Set(badgeWidths).size).toBe(1);
+  }
+});
+
 test("renders publication collection metadata", async ({ page }) => {
   await page.goto("/en/");