From fc93239482357677e7c37e52d0e85eb61c2f6fab Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 5 Feb 2026 18:17:34 -0800
Subject: [PATCH] [WV2] Scroll selected alt style into view

---
 app/assets/javascripts/pose-picker.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/app/assets/javascripts/pose-picker.js b/app/assets/javascripts/pose-picker.js
index 2a90520b..131277a7 100644
--- a/app/assets/javascripts/pose-picker.js
+++ b/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);