Add a modifier class to fluid publish fields that prevents the fields from being fluid on smaller screens to help legibility

Author: jaygeorge

resources/css/components/publish.css

@@ -51,7 +51,7 @@ Here flexbox is much better suited to create a layout that grows to fill space.
     }
 
     @variant lg {
-    /* Here we have to cut short the proper width very slightly to account for the gap value. Because we're using flex-grow it should be pretty unnoticeable */
+        /* Here we have to cut short the proper width very slightly to account for the gap value. Because we're using flex-grow it should be pretty unnoticeable */
         .field-w-25  { flex-basis: 24.5%; }
         .field-w-33  { flex-basis: 32.5%; }
         .field-w-50  { flex-basis: 49.4%; }
@@ -61,6 +61,15 @@ Here flexbox is much better suited to create a layout that grows to fill space.
     }
 }
 
+.publish-fields-fluid--xl-only {
+    /* A modifier that prevents the fields from being fluid on smaller screens to help legibility, for example on the Blueprints builder */
+    @media (width < 1400px) {
+        [class*="field-w-"] {
+            flex-basis: 100%;
+        }
+    }
+}
+
 
 /* GROUP PUBLISH COMPONENT / FIELD
 =================================================== */