[WV2] Scroll selected alt style into view

app/assets/javascripts/pose-picker.js

@@ -8,6 +8,7 @@
  */
 class PosePickerPopover extends HTMLElement {
 	#internals;
+	#styleListObserver;
 
 	constructor() {
 		super();
@@ -18,6 +19,26 @@ class PosePickerPopover extends HTMLElement {
 		// Listen for changes to auto-submit the form, then tell CSS about it!
 		this.addEventListener("change", this.#handleChange);
 		this.#internals.states.add("auto-loading");
+
+		// When the style picker list becomes visible (e.g. tab switch or
+		// popover open), scroll the selected style into view.
+		const styleList = this.querySelector(".style-picker-list");
+		if (styleList) {
+			this.#styleListObserver = new IntersectionObserver(([entry]) => {
+				if (entry.isIntersecting) {
+					const checked = styleList.querySelector("input:checked");
+					checked
+						?.closest("label")
+						?.scrollIntoView({ block: "nearest" });
+				}
+			});
+			this.#styleListObserver.observe(styleList);
+		}
+	}
+
+
+	disconnectedCallback() {
+		this.#styleListObserver?.disconnect();
 	}
 
 	#handleChange(e) {
@@ -26,6 +47,7 @@ class PosePickerPopover extends HTMLElement {
 			e.target.closest("form").requestSubmit();
 		}
 	}
+
 }
 
 customElements.define("pose-picker-popover", PosePickerPopover);