Fixes for reactivity in Safari

src/client/site/common/recipe/recipe.scss

@@ -9,12 +9,17 @@
     display: flex;
 
     .input {
-        flex: 1 1 50%;
+        flex: 0 0 auto;
 
         align-items    : center;
         display        : flex;
         flex-direction : column;
 
+        .view__crafting_grid {
+            flex: 1 1 auto;
+            width: 100%;
+        }
+
         .tool {
             margin-top : $size-margin-small;
 
@@ -24,7 +29,7 @@
     }
 
     .output {
-        flex: 1 1 50%;
+        flex: 1 1 100%;
         margin-left: $size-margin-medium;
 
         display         : flex;
@@ -42,4 +47,4 @@
             margin-top  : $size-margin-medium;
         }
     }
-}
+}

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;
+                }
+            }
+        }
+    }
+}

src/client/site/footer/footer.scss

@@ -64,3 +64,13 @@
         height: $size-minecraft-block;
     }
 }
+
+@include screen-size(mobile) {
+    .view__footer {
+        > .content {
+            .left, .center, .right {
+                flex: 0 0 auto;
+            }
+        }
+    }
+}

src/client/site/header/header.scss

@@ -84,7 +84,8 @@
         padding-top       : 0;
 
         .button {
-            flex         : 1 1 calc(20% - 8px);
+            flex-grow    : 1;
+            flex-shrink  : 1;
             min-width    : 3 * $size-minecraft-block;
             max-width    : 5 * $size-minecraft-block;
             margin-top   : $size-margin-medium;