From 3a18820d057f65d5ba37fd0830bea923bc953d0d Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Fri, 6 Sep 2024 16:24:58 -0700
Subject: [PATCH] Oops, fix layout for error when item preview fails to load

Oh right, I need the error indicator to be part of a container that
also contains the outfit viewer, to appear below it!

I was motivated because I realized I forgot the Customize More button
so now I'm building it lol
---
 app/assets/stylesheets/items/_show.sass | 11 +++++++----
 app/views/items/show.html.haml          |  7 ++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 92cc9de7..a2ab33fe 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -38,6 +38,9 @@ body.items-show
     height: 16px
     width: 16px
 
+  .preview-area
+    margin: 0 auto
+
   outfit-viewer
     display: block
     position: relative
@@ -46,7 +49,6 @@ body.items-show
     border: 1px solid $module-border-color
     border-radius: 1em
     overflow: hidden
-    margin: 0 auto
 
     // There's no useful text in here, but double-clicking the play/pause
     // button can cause a weird selection state. Disable text selection.
@@ -336,10 +338,11 @@ body.items-show
       grid-template-areas: "viewer faces" "picker meta"
       gap: .5em
 
-      outfit-viewer
+      .preview-area
         grid-area: viewer
-        width: 350px
-        height: 350px
+        outfit-viewer
+          width: 350px
+          height: 350px
 
       species-color-picker
         grid-area: picker
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index 05d0029a..86937525 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -15,9 +15,10 @@
     sorry!
 
 = turbo_frame_tag "item-preview" do
-  = render partial: "outfit_viewer", locals: {outfit: @preview_outfit}
-  .error-indicator
-    💥 We couldn't load all of this outfit. Try again?
+  .preview-area
+    = render partial: "outfit_viewer", locals: {outfit: @preview_outfit}
+    .error-indicator
+      💥 We couldn't load all of this outfit. Try again?
 
   %species-color-picker
     = form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|