fix: made web form skeleton responsive

(cherry picked from commit eb7dccaae2)

frappe/public/scss/website/web_form.scss

@@ -117,11 +117,24 @@
 						.web-form-skeleton {
 							.box-group {
 								display: flex;
-								gap: 20px;
-								margin-bottom: 15px;
+								flex-wrap: wrap;
 
 								.box-container {
 									width: 100%;
+									padding: 0 var(--padding-sm);
+									margin-bottom: 15px;
+
+									&:first-child {
+										padding-left: 0;
+									}
+
+									&:last-child {
+										padding-right: 0;
+									}
+
+									@include media-breakpoint-down(xs) {
+										padding: 0;
+									}
 
 									.box {
 										background-color: var(--control-bg);

frappe/website/doctype/web_form/templates/web_form_skeleton.html

@@ -1,10 +1,10 @@
 <div class="web-form-skeleton">
 	<div class="box-group">
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
@@ -16,21 +16,21 @@
 		</div>
 	</div>
 	<div class="box-group">
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
 	</div>
 	<div class="box-group">
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>
-		<div class="box-container">
+		<div class="box-container col-sm-6">
 			<div class="box box-label"></div>
 			<div class="box box-area"></div>
 		</div>