From d7b7aa5b984dc237e050f76cbcd2be3e993adf67 Mon Sep 17 00:00:00 2001 From: KoloMl Date: Thu, 12 Mar 2026 01:22:03 +0400 Subject: [PATCH] Compensating for possible layout shift after toggling tags from preset --- src/content/components/philomena/TagsForm.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/content/components/philomena/TagsForm.ts b/src/content/components/philomena/TagsForm.ts index 63e5ac8..9e72eaa 100644 --- a/src/content/components/philomena/TagsForm.ts +++ b/src/content/components/philomena/TagsForm.ts @@ -187,9 +187,23 @@ export class TagsForm extends BaseComponent { ); } + const offsetBeforeSubmission = this.#presetsList.container.offsetTop; + this.#applyTagChangesWithFancyTagEditor( tagChangeList.join(',') ); + + const offsetDifference = this.#presetsList.container.offsetTop - offsetBeforeSubmission; + + // Compensating for the layout shift: when user clicks on a tag (or on "add/remove all tags"), tag editor might + // overflow the current line and wrap tags around to the next line, causing presets section to shift. We need to + // avoid that for better UX. + if (offsetDifference !== 0) { + window.scrollTo({ + top: window.scrollY + offsetDifference, + behavior: 'instant', + }); + } } #applyTagChangesWithFancyTagEditor(tagsListWithChanges: string): void {