From 69af3e883bc33eadf4055e100cb8e82c97f3ddd5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 2 Jan 2023 12:03:50 +0530
Subject: [PATCH] fix: added description for section

---
 frappe/public/js/form_builder/components/FormBuilder.vue | 4 ++++
 frappe/public/js/form_builder/components/Section.vue     | 7 +++++++
 2 files changed, 11 insertions(+)

diff --git a/frappe/public/js/form_builder/components/FormBuilder.vue b/frappe/public/js/form_builder/components/FormBuilder.vue
index d1bebb2210..a81632c8c1 100644
--- a/frappe/public/js/form_builder/components/FormBuilder.vue
+++ b/frappe/public/js/form_builder/components/FormBuilder.vue
@@ -210,6 +210,10 @@ onMounted(() => {
 				}
 			}
 
+			.section-description {
+				padding-left: 15px;
+			}
+
 			.section-columns {
 				margin-top: 8px;
 
diff --git a/frappe/public/js/form_builder/components/Section.vue b/frappe/public/js/form_builder/components/Section.vue
index cbf848c10a..2cb24a8d4c 100644
--- a/frappe/public/js/form_builder/components/Section.vue
+++ b/frappe/public/js/form_builder/components/Section.vue
@@ -128,6 +128,7 @@ function move_sections_to_tab() {
 					</button>
 				</div>
 			</div>
+			<div v-if="section.df.description" class="section-description">{{ section.df.description }}</div>
 			<div class="section-columns" :class="{ hidden: section.df.collapsible && collapsed }">
 				<draggable
 					class="section-columns-container"
@@ -228,6 +229,12 @@ function move_sections_to_tab() {
 			}
 		}
 
+		.section-description {
+			margin-bottom: 10px;
+			font-size: var(--text-xs);
+			color: var(--text-muted);
+		}
+
 		.section-columns-container {
 			display: flex;
 			min-height: 2rem;