From 2ea8f16e43768b31646cd0cb1bed647e15e3480f Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 5 Sep 2024 16:51:06 -0700
Subject: [PATCH] Style the face picker on item page nicely for desktop!

---
 app/assets/stylesheets/items/_show.sass | 33 +++++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 51a97ed3..3778b63b 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -46,7 +46,7 @@ body.items-show
     border: 1px solid $module-border-color
     border-radius: 1em
     overflow: hidden
-    margin: 0 auto .75em
+    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.
@@ -162,12 +162,11 @@ body.items-show
         color: $error-color
 
   species-face-picker
-    margin-top: 1em
-
     display: block
     position: relative
     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
@@ -242,8 +241,6 @@ body.items-show
       cursor: wait
 
   .item-zones-info
-    margin-top: .5em
-
     h3
       display: inline
       font: inherit
@@ -267,3 +264,29 @@ body.items-show
     .zone-species-info
       font-style: italic
       text-decoration: underline dotted
+
+  #item-preview
+    display: flex
+    flex-direction: column
+    gap: .75em
+
+    @media (min-width: 600px)
+      display: grid
+      grid-template-areas: "viewer faces" "picker zones"
+      gap: .5em
+
+      outfit-viewer
+        grid-area: viewer
+        width: 350px
+        height: 350px
+
+      .species-color-picker
+        grid-area: picker
+
+      species-face-picker
+        grid-area: faces
+        max-height: 350px
+        margin: -10px
+
+      .item-zones-info
+        grid-area: zones