From 2aed7b21dbdd7e4e9628af60c0029bb729192374 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Mon, 9 Sep 2024 16:19:20 -0700
Subject: [PATCH] Add noscript hover behavior for the Customize More button on
 item page

---
 app/assets/stylesheets/items/_show.sass | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index 8c06325d..bfddd09b 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -71,8 +71,13 @@ body.items-show
           padding-right: .5em
 
       &:hover, &:focus
+        // Expand the label to its natural width. If the JS ran to tell us
+        // what it is in px, we can use that for a smooth transition. If not,
+        // okay, we just pop out to `auto`, which CSS can't make smooth.
         .customize-more-label
-          width: var(--natural-width)
+          width: auto
+          &[style*="--natural-width"]
+            width: var(--natural-width)
 
   outfit-viewer
     display: block