Trim popular tag pills to container width

tests/ui/video-list-view-popular-tags.test.mjs

@@ -59,6 +59,97 @@ test("VideoListView renders sorted popular tag pills", () => {
   );
 });
 
+test("VideoListView trims popular tags to available width", () => {
+  const { dom, document, listRoot, tagsRoot } = createViewDom();
+  const view = new VideoListView({ document });
+  view.mount(listRoot);
+  view.setPopularTagsContainer(tagsRoot);
+
+  const prototype = dom.window.HTMLElement.prototype;
+  const originalScrollWidth = Object.getOwnPropertyDescriptor(
+    prototype,
+    "scrollWidth",
+  );
+
+  Object.defineProperty(tagsRoot, "clientWidth", {
+    configurable: true,
+    value: 160,
+  });
+
+  Object.defineProperty(prototype, "scrollWidth", {
+    configurable: true,
+    get() {
+      if (this.classList && this.classList.contains("video-tag-strip")) {
+        return this.childElementCount * 80;
+      }
+
+      if (originalScrollWidth && typeof originalScrollWidth.get === "function") {
+        return originalScrollWidth.get.call(this);
+      }
+
+      return 0;
+    },
+  });
+
+  try {
+    const videos = [
+      {
+        id: "v1",
+        title: "First",
+        pubkey: "pub1",
+        created_at: 3,
+        nip71: { hashtags: ["Nostr", "Video"] },
+      },
+      {
+        id: "v2",
+        title: "Second",
+        pubkey: "pub2",
+        created_at: 2,
+        tags: [
+          ["t", "nostr"],
+          ["t", "Learning"],
+        ],
+      },
+      {
+        id: "v3",
+        title: "Third",
+        pubkey: "pub3",
+        created_at: 1,
+        nip71: { hashtags: ["video"] },
+      },
+    ];
+
+    view.render(videos);
+
+    let buttons = tagsRoot.querySelectorAll("button");
+    assert.equal(buttons.length, 2);
+    assert.deepEqual(
+      Array.from(buttons, (button) => button.dataset.tag),
+      ["Nostr", "Video"],
+    );
+
+    Object.defineProperty(tagsRoot, "clientWidth", {
+      configurable: true,
+      value: 400,
+    });
+
+    view.renderPopularTagStrip();
+
+    buttons = tagsRoot.querySelectorAll("button");
+    assert.equal(buttons.length, 3);
+    assert.deepEqual(
+      Array.from(buttons, (button) => button.dataset.tag),
+      ["Nostr", "Video", "Learning"],
+    );
+  } finally {
+    if (originalScrollWidth) {
+      Object.defineProperty(prototype, "scrollWidth", originalScrollWidth);
+    } else {
+      delete prototype.scrollWidth;
+    }
+  }
+});
+
 test("VideoListView applies tag preference variants to popular tags", () => {
   const { document, listRoot, tagsRoot } = createViewDom();
   const view = new VideoListView({ document });