fix(style): web form styles

frappe/public/js/frappe/web_form/web_form.js

@@ -140,6 +140,7 @@ export default class WebForm extends frappe.ui.FieldGroup {
 	set_form_description(intro) {
 		let intro_wrapper = document.getElementById('introduction');
 		intro_wrapper.innerHTML = intro;
+		intro_wrapper.classList.remove('hidden');
 	}
 
 	add_button(name, type, action, wrapper_class=".web-form-actions") {

frappe/public/scss/website/web_form.scss

@@ -13,15 +13,24 @@
 				margin-bottom: 0;
 			}
 
+			.web-form-head {
+				margin: 0 -1rem;
+				padding: 0 1rem 1rem 1rem;
+				margin-bottom: 1rem;
+				border-bottom: 1px solid var(--border-color);
+			}
+
 			#introduction {
-				border-top: 1px solid var(--border-color);
-				padding: 1rem;
-				margin: 1rem -1rem;
+				margin-bottom: 2rem;
 			}
 
 			#introduction p {
 				color: var(--text-muted);
 			}
+
+			.web-form-actions button {
+				margin-top: 0.1rem;
+			}
 		}
 
 		.frappe-card.list-card {

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

@@ -32,12 +32,12 @@ data-web-form="{{ name }}" data-web-form-doctype="{{ doc_type }}" data-login-req
 	<div class="list-view-footer text-right"></div>
 	{% else %}
 	<!-- web form -->
-	<div class="d-flex justify-content-between">
+	<div class="d-flex justify-content-between web-form-head">
 		<h3>{{ _(title) }}</h3>
-		<div class="web-form-actions pt-2"></div>
+		<div class="web-form-actions"></div>
 	</div>
 	<div role="form">
-		<div id="introduction" class="text-muted"></div>
+		<div id="introduction" class="text-muted hidden"></div>
 		<div class="web-form-wrapper" {{ container_attributes() }}></div>
 		<div class="web-form-footer text-right"></div>
 	</div>