Add small container detection on desktop

[MAILPOET-2609]

assets/css/src/components/_public.scss

@@ -66,6 +66,23 @@ $form-columns-padding-vertical: 20px;
 $form-columns-padding-horizontal: 20px;
 $form-break-small-width: 500px;
 
+@mixin maxWidthColumns() {
+  flex-wrap: wrap;
+
+  .mailpoet_form_column:last-child .mailpoet_paragraph:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin maxWidthColumn() {
+  // This must be important since the Column assigns its own width as an inline style.
+  flex-basis: 100% !important;
+
+  &:not(:first-child) {
+    margin-left: 0;
+  }
+}
+
 .mailpoet_form_columns {
   display: flex;
   flex-wrap: nowrap;
@@ -84,11 +101,11 @@ $form-break-small-width: 500px;
   }
 
   @media (max-width: #{ ($form-break-small-width - 1) }) {
-    flex-wrap: wrap;
+    @include maxWidthColumns;
-
-    .mailpoet_form_column:last-child .mailpoet_paragraph:last-child {
-      margin-bottom: 0;
   }
+
+  .mailpoet_form_tight_container & {
+    @include maxWidthColumns;
   }
 }
 
@@ -118,17 +135,16 @@ $form-break-small-width: 500px;
   }
 
   @media (min-width: $form-break-small-width) {
-    .mailpoet_paragraph:last-child {
+    .mailpoet_form_form:not(.mailpoet_form_tight_container) & .mailpoet_paragraph:last-child {
       margin-bottom: 0;
     }
   }
 
   @media (max-width: #{ ($form-break-small-width - 1) }) {
-    // This must be important since the Column assigns its own width as an inline style.
+    @include maxWidthColumn;
-    flex-basis: 100% !important;
-
-    &:not(:first-child) {
-      margin-left: 0;
   }
+
+  .mailpoet_form_tight_container & {
+    @include maxWidthColumn;
   }
 }

assets/js/src/public.js

@@ -41,7 +41,10 @@ jQuery(function ($) { // eslint-disable-line func-names
     // setup form validation
     $('form.mailpoet_form').each(function () { // eslint-disable-line func-names
       var form = $(this);
-
+      // Detect form is placed in tight container
+      if (form.width() < 500) {
+        form.addClass('mailpoet_form_tight_container');
+      }
       form.parsley().on('form:validated', function () { // eslint-disable-line func-names
         // clear messages
         form.find('.mailpoet_message > p').hide();

views/form/front_end_form.html

@@ -13,7 +13,7 @@
       target="_self"
       method="post"
       action="<%= admin_url('admin-post.php?action=mailpoet_subscription_form') | raw %>"
-      class="mailpoet_form mailpoet_form_<%= form_type %>"
+      class="mailpoet_form mailpoet_form_form mailpoet_form_<%= form_type %>"
       novalidate
       style="<%= form_element_styles %>"/* paragraphs (label + input)
     >