app/assets/javascripts/items/show.js

@@ -4,11 +4,9 @@ document.addEventListener("change", (e) => {
 
     try {
         const mainPickerForm = document.querySelector(
-            "#item-preview species-color-picker form",
-        );
-        const mainSpeciesField = mainPickerForm.querySelector(
-            "[name='preview[species_id]']",
-        );
+            "#item-preview species-color-picker form");
+        const mainSpeciesField =
+            mainPickerForm.querySelector("[name='preview[species_id]']");
         mainSpeciesField.value = e.target.value;
         mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
     } catch (error) {
@@ -16,14 +14,6 @@ document.addEventListener("change", (e) => {
     }
 });
 
-// If the preview frame fails to load, try a full pageload.
-document.addEventListener("turbo:frame-missing", (e) => {
-    if (!e.target.matches("#item-preview")) return;
-
-    e.detail.visit(e.detail.response.url);
-    e.preventDefault();
-});
-
 class SpeciesColorPicker extends HTMLElement {
     #internals;
 
@@ -54,7 +44,7 @@ class SpeciesFacePicker extends HTMLElement {
 
     #handleClick(e) {
         if (e.target.matches("input[type=radio]")) {
-            this.dispatchEvent(new Event("change", { bubbles: true }));
+            this.dispatchEvent(new Event("change", {bubbles: true}));
         }
     }
 }

app/assets/stylesheets/items/_show.sass

@@ -207,16 +207,15 @@ body.items-show
   species-face-picker
     display: block
     position: relative
-    top: -10px
+    max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
+    padding: 10px // leave enough room for the zoomed-in selected face
+    margin-top: -10px
+    overflow: auto
 
     species-face-picker-options
       display: flex
       justify-content: center
       flex-wrap: wrap
-      isolation: isolate // avoid z-index conflicts between pets and noscript
-      overflow: auto
-      max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
-      padding: 10px // leave enough room for the zoomed-in selected face
 
     img
       width: 50px
@@ -272,8 +271,7 @@ body.items-show
     noscript
       position: absolute
       inset: 0
-      padding: 1em
-      background: rgba(white, .8)
+      background: rgba(white, .75)
       z-index: 1
       cursor: auto
 
@@ -368,8 +366,8 @@ body.items-show
 
       species-face-picker
         grid-area: faces
-        species-face-picker-options
-          max-height: 340px
+        max-height: 350px
+        margin: -10px
 
       .item-preview-meta-info
         grid-area: meta