From 6388d929d6742f14981df2f2bc4a6b16517d5987 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Fri, 8 Dec 2023 20:45:54 +0000
Subject: [PATCH] UX: Ensure wizard previews display at correct width (#24801)

---
 app/assets/stylesheets/wizard.scss | 40 +++++++++++-------------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index cef587cb3be..bddf0757ac5 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -93,11 +93,8 @@ body.wizard {
     }
 
     &.styling {
-      max-width: 85%;
-
-      @include breakpoint("mobile-extra-large") {
-        max-width: 100%;
-      }
+      max-width: 100%;
+      width: auto;
     }
   }
 
@@ -161,16 +158,9 @@ body.wizard {
     display: block;
   }
 
-  &__field.component-styling-preview {
-    display: inline;
-    @media only screen and (max-device-width: 568px) {
-      display: none;
-    }
-  }
-
   &__field.text-governing-law,
   &__field.text-city-for-disputes {
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       display: none;
     }
   }
@@ -184,7 +174,7 @@ body.wizard {
     box-sizing: border-box;
     margin-right: 1em;
 
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 925px) {
       width: 80%;
       margin-left: auto;
       margin-right: auto;
@@ -193,11 +183,11 @@ body.wizard {
     + .wizard-container__fields {
       padding: 1em;
       background: var(--primary-very-low);
-      width: calc(100% - 170px);
+      width: auto;
       border-radius: 0.5em;
       margin-top: -1em;
 
-      @media only screen and (max-device-width: 568px) {
+      @media only screen and (max-width: 925px) {
         display: none;
       }
     }
@@ -229,7 +219,7 @@ body.wizard {
   .previews {
     position: relative;
     height: 320px;
-    width: 100%;
+    width: 628px;
     overflow: hidden;
     background: var(--secondary);
     border-radius: 10px;
@@ -285,7 +275,7 @@ body.wizard {
 
   &__step-form {
     flex: 1 0 50%;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       width: 100%;
     }
   }
@@ -318,7 +308,7 @@ body.wizard {
   &__step-text {
     display: inline;
     margin-right: 0.25em;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       display: none;
     }
   }
@@ -522,7 +512,7 @@ body.wizard {
       margin: 0;
     }
 
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       font-size: var(--font-0);
     }
   }
@@ -531,7 +521,7 @@ body.wizard {
     color: var(--primary-high);
     font-size: var(--font-up-1);
     margin: 0.25em 0 0.5em 3.5em;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       margin-left: 2em;
     }
   }
@@ -579,7 +569,7 @@ body.wizard {
     position: relative;
     vertical-align: middle;
     transition: background 0.25s;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       height: 20px;
       width: 35px;
     }
@@ -596,7 +586,7 @@ body.wizard {
     color: var(--secondary);
     top: 4px;
     left: 9px;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       top: 3px;
       left: 5px;
       font-size: var(--font-down-3);
@@ -611,7 +601,7 @@ body.wizard {
     top: 4px;
     left: 4px;
     transition: left 0.25s;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       height: 12px;
       width: 12px;
     }
@@ -627,7 +617,7 @@ body.wizard {
   }
   &__checkbox:checked + .wizard-container__checkbox-slider:before {
     left: 26px;
-    @media only screen and (max-device-width: 568px) {
+    @media only screen and (max-width: 568px) {
       left: 20px;
     }
   }