From 3f4e864a176e7d3adb669dac6e338b1d5ff2486e Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Sun, 8 Sep 2024 18:54:11 -0700
Subject: [PATCH] Tweak styles for item preview area sizes

I noticed the last row of the species faces required a scroll, I forget
when that happened! But I made some tweaks, most notably widened the
container from the normal 800px, so that on bigger screens everything
lays out and aligns nice, without requiring any scrolling of the face
container!
---
 app/assets/stylesheets/items/_show.sass | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 85bf8dc6..a479753a 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -3,6 +3,9 @@
 @import "../partials/item_header"
 
 body.items-show
+  #container
+    width: 900px // A bit more generous to the preview area!
+
   .item-header
     +item-header
 
@@ -207,7 +210,7 @@ body.items-show
   species-face-picker
     display: block
     position: relative
-    top: -10px
+    margin-top: -10px
 
     species-face-picker-options
       display: flex
@@ -219,8 +222,8 @@ body.items-show
       padding: 10px // leave enough room for the zoomed-in selected face
 
     img
-      width: 50px
-      height: 50px
+      width: 54px
+      height: 54px
       transition: all 0.2s
 
       // Calm down the default color, just a smidge! There's a lot of color
@@ -352,7 +355,7 @@ body.items-show
     flex-direction: column
     gap: .75em
 
-    @media (min-width: 600px)
+    @media (min-width: 700px)
       display: grid
       grid-template-areas: "viewer faces" "picker meta"
       gap: .5em
@@ -360,8 +363,8 @@ body.items-show
       .preview-area
         grid-area: viewer
         outfit-viewer
-          width: 350px
-          height: 350px
+          width: 380px
+          height: 380px
 
       species-color-picker
         grid-area: picker
@@ -369,7 +372,7 @@ body.items-show
       species-face-picker
         grid-area: faces
         species-face-picker-options
-          max-height: 340px
+          max-height: 370px
 
       .item-preview-meta-info
         grid-area: meta