app/assets/javascripts/items/show.js

@@ -81,35 +81,23 @@ class SpeciesFacePickerOptions extends HTMLElement {
 	}
 }
 
-// TODO: If it ever gets wide support, remove this in favor of the CSS rule
+class MeasuredContent extends HTMLElement {
-//       `interpolate-size: allow-keywords`, to animate directly from `auto`.
-//       https://drafts.csswg.org/css-values-5/#valdef-interpolate-size-allow-keywords
-class MeasuredContainer extends HTMLElement {
-	static observedAttributes = ["style"];
-
 	connectedCallback() {
 		setTimeout(() => this.#measure(), 0);
 	}
 
-	attributeChangedCallback() {
-		// When `--natural-width` gets morphed away by Turbo, measure it again!
-		if (this.style.getPropertyValue("--natural-width") === "") {
-			this.#measure();
-		}
-	}
-
 	#measure() {
-		// Find our `<measured-content>` child, and set our natural width as
+		// Find our `<measured-container>` parent, and set our natural width
-		// `var(--natural-width)` in the context of our CSS styles.
+		// as `var(--natural-width)` in the context of its CSS styles.
-		const content = this.querySelector("measured-content");
+		const container = this.closest("measured-container");
-		if (content == null) {
+		if (container == null) {
-			throw new Error(`<measured-container> must contain a <measured-content>`);
+			throw new Error(`<measured-content> must be in a <measured-container>`);
 		}
-		this.style.setProperty("--natural-width", content.offsetWidth + "px");
+		container.style.setProperty("--natural-width", this.offsetWidth + "px");
 	}
 }
 
 customElements.define("species-color-picker", SpeciesColorPicker);
 customElements.define("species-face-picker", SpeciesFacePicker);
 customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
-customElements.define("measured-container", MeasuredContainer);
+customElements.define("measured-content", MeasuredContent);

app/views/items/show.html.haml

@@ -70,10 +70,9 @@
               %li<
                 = zone.label
                 - if item_zone_partial_fit? appearances_in_zone, @all_appearances
-                  = " "
                   %span.zone-species-info{
                     title: item_zone_species_list(appearances_in_zone)
-                  }<
+                  }
                     (#{appearances_in_zone.size} species)
         - else
           %span.no-zones (None)