fix: align activity dates, labels, and titles in columns

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;
   }
 

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>

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/");