Add scrollable tag strip option

css/tailwind.source.css

@@ -2419,6 +2419,12 @@
     overflow: hidden;
   }
 
+  .video-tag-strip--scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
   .video-tag-pill {
     @apply inline-flex items-center gap-2 rounded-full border border-status-neutral-border bg-status-neutral-surface px-3 py-1 text-2xs font-medium text-status-neutral-on;
     @apply relative justify-center whitespace-nowrap transition;

js/ui/components/hashtagStripHelper.js

@@ -12,12 +12,14 @@ export class HashtagStripHelper {
     window: win = null,
     logger,
     context = "",
+    scrollable = false,
   } = {}) {
     this.document = doc || (typeof document !== "undefined" ? document : null);
     this.window = win || this.document?.defaultView ||
       (typeof window !== "undefined" ? window : null);
     this.logger = logger || userLogger;
     this.context = typeof context === "string" ? context : "";
+    this.scrollable = scrollable === true;
 
     this.container = null;
     this._tagStrip = null;
@@ -191,11 +193,14 @@ export class HashtagStripHelper {
         onTagActivate: (tag, detail = {}) =>
           this._handleTagActivate(tag, detail),
         getTagState: (tag) => this._resolveTagState(tag),
+        scrollable: this.scrollable,
       });
 
       root.appendChild(strip);
       this._tagStrip = strip;
-      trimTagPillStripToFit({ strip, container: root });
+      if (!this.scrollable) {
+        trimTagPillStripToFit({ strip, container: root });
+      }
       root.hidden = strip.childElementCount === 0;
     } finally {
       this._isApplyingTrim = false;

js/ui/components/tagPillList.js

@@ -213,12 +213,16 @@ export function renderTagPillStrip({
   tags = [],
   onTagActivate,
   getTagState,
+  scrollable = false,
 } = {}) {
   const resolvedDocument = resolveDocument(doc);
   assertDocument(resolvedDocument);
 
   const root = resolvedDocument.createElement("div");
   root.classList.add("video-tag-strip");
+  if (scrollable) {
+    root.classList.add("video-tag-strip--scroll");
+  }
 
   const buttons = tags.map((tag) =>
     createTagButton({

js/ui/views/VideoListView.js

@@ -180,6 +180,7 @@ export class VideoListView {
       document: this.document,
       window: this.window,
       logger: userLogger,
+      scrollable: true,
     });
     this.popularTagHelper.setContext("popular-tags");
     this.popularTagHelper.setActivateHandler((detail) =>