Fixes for reactivity in Safari

src/client/site/craft_page/step/step.scss

@@ -28,19 +28,10 @@
     .main_content {
         display: flex;
 
-        @include screen-size(mobile) {
-            flex-direction: column-reverse;
-            align-items: stretch;
-        }
-
         .view__inventory {
             flex: 50%;
             margin-left: $size-margin-large;
 
-            @include screen-size(mobile) {
-                margin: $size-margin-large $size-margin-large 0 $size-margin-large;
-            }
-
             .buttons {
                 display: none;
             }
@@ -55,9 +46,6 @@
         margin-top: $size-margin-large;
 
         opacity: 0;
-        @include screen-size(mobile) {
-            opacity: 1.0;
-        }
 
         display: flex;
 
@@ -67,12 +55,6 @@
             &:not(:first-child) {
                 margin-left: $size-margin-medium;
             }
-
-            @include screen-size(mobile) {
-                .full {
-                    display: none;
-                }
-            }
         }
 
         a {
@@ -94,4 +76,31 @@
             text-decoration: line-through;
         }
     }
-}
+}
+
+@include screen-size(mobile) {
+    .view__step {
+        .main_content {
+            flex-direction: column-reverse;
+
+            .view__inventory {
+                flex: 0 0 auto;
+                margin: $size-margin-large $size-margin-large 0 $size-margin-large;
+            }
+
+            .view__recipe {
+                flex: 0 0 auto;
+            }
+        }
+
+        .buttons {
+            opacity: 1.0;
+
+            .button {
+                .full {
+                    display: none;
+                }
+            }
+        }
+    }
+}