Introduce mobile view for summary step

app/views/split_checkout/_summary.html.haml

@@ -69,7 +69,7 @@
     = render 'spree/orders/summary', order: @order, display_footer: false
 
 
-.summary-right
+.summary-right{ "data-controller": "sticky", "data-sticky-target": "container" }
   .summary-right-line.total
     .summary-right-line-label= t :order_total_price
     .summary-right-line-value#order_total= @order.display_total.to_html

app/webpacker/css/darkswarm/split-checkout.scss

@@ -437,3 +437,58 @@
       }
     }  
 }
+
+// Handle the mobile view for the summary step
+@media screen and (max-width: 800px) {
+  .checkout-summary form {
+    display: block;
+  }
+
+  .checkout-summary form .summary-right {
+    width: calc(100% + 30px);
+    margin-left: -15px;
+    background-color: white;
+    border-right: none;
+    border-top: 1px solid #DDD;
+    
+    padding-top: 20px;
+
+    &.sticked {
+      box-shadow: 0 -4px 10px #DDD;
+    }
+
+    .summary-right-line.total {
+      margin-bottom: 10px;
+    }
+
+    .checkout-submit {
+      margin-top: 10px;
+
+      .checkout-input {
+        margin-bottom: 10px;
+      }
+
+      .button {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .checkout-summary form .summary-main {
+    width: 100%;
+    border-right: none;
+  }
+
+  .checkout-summary .checkout-substep .two-columns {
+    // only one column actually
+    grid-template-columns: 1fr;
+
+    > :nth-child(2) {
+      margin-top: 20px;
+    }
+  }
+
+  .checkout-summary .summary-subtitle {
+    margin-bottom: 10px;
+  }
+}