diff --git a/css/tailwind.source.css b/css/tailwind.source.css index ef7af0aa..1f77eb25 100644 --- a/css/tailwind.source.css +++ b/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; diff --git a/js/ui/components/hashtagStripHelper.js b/js/ui/components/hashtagStripHelper.js index 8b0953e2..f011caed 100644 --- a/js/ui/components/hashtagStripHelper.js +++ b/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; diff --git a/js/ui/components/tagPillList.js b/js/ui/components/tagPillList.js index dc194561..ea89704e 100644 --- a/js/ui/components/tagPillList.js +++ b/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({ diff --git a/js/ui/views/VideoListView.js b/js/ui/views/VideoListView.js index faa8fc77..e25d329d 100644 --- a/js/ui/views/VideoListView.js +++ b/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) =>