From e8a4535030617836bad42a217c6461a806ea98d9 Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Thu, 10 Sep 2026 23:28:36 +0000
Subject: [PATCH] Wrap an article card overflowing topic row instead of
 widening it past the card

---
 e2e/USER_STORIES.md                      |  2 ++
 e2e/specs/articles-threads.spec.ts       | 17 ++++++++++++++++-
 src/app/components/ArticleActions.svelte |  2 +-
 src/app/components/ArticleItem.svelte    |  2 +-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/e2e/USER_STORIES.md b/e2e/USER_STORIES.md
index e8fe3c69..188ab922 100644
--- a/e2e/USER_STORIES.md
+++ b/e2e/USER_STORIES.md
@@ -635,6 +635,8 @@ Acceptance:
 - The Articles page lists each article with its author, published date, and a
   preview; clicking an author or a topic filters the list, and combining both
   narrows to articles matching both.
+- An article with more topics than fit on one line wraps them inside its card
+  rather than pushing its reactions and action menu off the edge.
 - Opening an article shows its title, cover image, summary, published date, and
   full content, with the title matching its list card.
 - Markdown in the body renders as real headings, bold text, and bullet lists,
diff --git a/e2e/specs/articles-threads.spec.ts b/e2e/specs/articles-threads.spec.ts
index 726a21dc..0beb2a5a 100644
--- a/e2e/specs/articles-threads.spec.ts
+++ b/e2e/specs/articles-threads.spec.ts
@@ -237,7 +237,14 @@ test("US-038 browse, filter, and read articles", async ({seed, as}) => {
           .setIdentifier("winter-reading")
           .setTitle("Winter Reading")
           .setSummary("Six books for the dark months.")
-          .setTopics(["books"])
+          .setTopics([
+            "books",
+            "keepnostrweird",
+            "longform",
+            "recommendations",
+            "wintering",
+            "shortdays",
+          ])
           .setPublishedAt(at(1, HOUR))
           .setContent("Start with the shortest one.")
           .renderTemplate(),
@@ -259,6 +266,14 @@ test("US-038 browse, filter, and read articles", async ({seed, as}) => {
   await expect(garden).toContainText("A short teaser about gardens.")
   await expect(garden).toContainText(await shortDate(page, at(4, HOUR)))
 
+  // A card with more topics than fit on one line wraps them, rather than widening its action row
+  // until the reactions and the action menu fall off the card's edge.
+  const winter = articleCards(page).filter({hasText: "Winter Reading"})
+  const winterBox = (await winter.boundingBox())!
+  const winterActions = (await winter.locator('[data-component="ArticleActions"]').boundingBox())!
+
+  expect(winterActions.x + winterActions.width).toBeLessThanOrEqual(winterBox.x + winterBox.width)
+
   const authors = page
     .locator("section")
     .filter({has: page.getByRole("heading", {name: "Authors"})})
diff --git a/src/app/components/ArticleActions.svelte b/src/app/components/ArticleActions.svelte
index 905b8805..8ce9ab89 100644
--- a/src/app/components/ArticleActions.svelte
+++ b/src/app/components/ArticleActions.svelte
@@ -59,7 +59,7 @@
     {/if}
   </div>
 {:else}
-  <div class="flex grow flex-wrap items-center justify-end gap-2">
+  <div data-component="ArticleActions" class="flex grow flex-wrap items-center justify-end gap-2">
     <div class="flex min-w-0 flex-wrap items-center gap-2">
       {#if h && showRoom}
         <Link href={makeSpacePath(url, h)} class="button button-neutral button-xs rounded-full">
diff --git a/src/app/components/ArticleItem.svelte b/src/app/components/ArticleItem.svelte
index 184c2e01..f13d7273 100644
--- a/src/app/components/ArticleItem.svelte
+++ b/src/app/components/ArticleItem.svelte
@@ -54,7 +54,7 @@
         Written by
         <ProfileLink pubkey={event.pubkey} {url} />
       </span>
-      <div class="pointer-events-auto shrink-0">
+      <div class="pointer-events-auto">
         <ArticleActions showRoom showActivity {url} {event} {context} />
       </div>
     </div>