Fix whitespace around "(X species)" in item page zone info

Ah whoops, I didn't notice that, when Turbo morphs the
`<measured-container>` into what the server HTML returns, it deletes
the `style` attribute we were using.

In this change, I refactor for `MeasuredContainer` to be the component
rather than `MeasuredContent`, so that it can also be responsible for
listening for changes to its own `style` prop, and remeasuring when
they happen.

We're also careful to avoid infinite loops, by only doing this when the
property is missing! (Otherwise, setting `--natural-width` triggers the
callback again, oops!)

app/assets/javascripts/items/show.js

@@ -81,23 +81,35 @@ class SpeciesFacePickerOptions extends HTMLElement {
 	}
 }
 
-class MeasuredContent extends HTMLElement {
+// TODO: If it ever gets wide support, remove this in favor of the CSS rule
+//       `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);
 	}
 
-	#measure() {
+	attributeChangedCallback() {
-		// Find our `<measured-container>` parent, and set our natural width
+		// When `--natural-width` gets morphed away by Turbo, measure it again!
-		// as `var(--natural-width)` in the context of its CSS styles.
+		if (this.style.getPropertyValue("--natural-width") === "") {
-		const container = this.closest("measured-container");
+			this.#measure();
-		if (container == null) {
-			throw new Error(`<measured-content> must be in a <measured-container>`);
 		}
-		container.style.setProperty("--natural-width", this.offsetWidth + "px");
+	}
+
+	#measure() {
+		// Find our `<measured-content>` child, and set our natural width as
+		// `var(--natural-width)` in the context of our CSS styles.
+		const content = this.querySelector("measured-content");
+		if (content == null) {
+			throw new Error(`<measured-container> must contain a <measured-content>`);
+		}
+		this.style.setProperty("--natural-width", content.offsetWidth + "px");
 	}
 }
 
 customElements.define("species-color-picker", SpeciesColorPicker);
 customElements.define("species-face-picker", SpeciesFacePicker);
 customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
-customElements.define("measured-content", MeasuredContent);
+customElements.define("measured-container", MeasuredContainer);

app/views/items/show.html.haml

@@ -70,9 +70,10 @@
               %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)