Wrap an article card overflowing topic row instead of widening it past the card

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,

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"})})

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">

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>