Better error handling for item page preview HTTP error

If something goes wrong, like the site goes down or has an intermittent
error, try a full pageload. That way, we're both retrying, and in a way
that gives the user more control and visibility into what's going on,
and what they can potentially do about it. (e.g. if there's a useful
error message, they will see it!)

app/assets/javascripts/items/show.js

@@ -4,9 +4,11 @@ document.addEventListener("change", (e) => {
 
     try {
         const mainPickerForm = document.querySelector(
-            "#item-preview species-color-picker form");
+            "#item-preview species-color-picker form",
-        const mainSpeciesField =
+        );
-            mainPickerForm.querySelector("[name='preview[species_id]']");
+        const mainSpeciesField = mainPickerForm.querySelector(
+            "[name='preview[species_id]']",
+        );
         mainSpeciesField.value = e.target.value;
         mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
     } catch (error) {
@@ -14,6 +16,14 @@ 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;
 

app/assets/stylesheets/items/_show.sass

@@ -207,15 +207,16 @@ body.items-show
   species-face-picker
     display: block
     position: relative
-    max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
+    top: -10px
-    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
@@ -271,7 +272,8 @@ body.items-show
     noscript
       position: absolute
       inset: 0
-      background: rgba(white, .75)
+      padding: 1em
+      background: rgba(white, .8)
       z-index: 1
       cursor: auto
 
@@ -366,8 +368,8 @@ body.items-show
 
       species-face-picker
         grid-area: faces
-        max-height: 350px
+        species-face-picker-options
-        margin: -10px
+          max-height: 340px
 
       .item-preview-meta-info
         grid-area: meta