From abcc7b18709129838997f098099c90a3b2694c25 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 30 May 2023 13:05:20 +0530
Subject: [PATCH] style: make text smaller and reduced some spacings for
 webform for mobile view

---
 frappe/public/scss/website/web_form.scss | 42 ++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index f1889a7b8e..d606b38719 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/frappe/public/scss/website/web_form.scss
@@ -28,6 +28,10 @@
 					margin-top: 0;
 					margin-bottom: 0;
 					padding-bottom: 2px;
+
+					@include media-breakpoint-down(sm) {
+						font-size: 1.25rem;
+					}
 				}
 
 				.web-form-header {
@@ -38,6 +42,10 @@
 					background-color: var(--fg-color);
 					padding: 2rem 2rem 0;
 
+					@include media-breakpoint-down(sm) {
+						padding: 1.5rem 1.5rem 0;
+					}
+
 					.breadcrumb-container {
 						padding: 0px;
 						margin: 0 0 2rem;
@@ -83,6 +91,10 @@
 
 							p {
 								color: var(--text-muted);
+
+								@include media-breakpoint-down(sm) {
+									font-size: var(--text-xs);
+								}
 							}
 						}
 					}
@@ -96,10 +108,18 @@
 					border-bottom-left-radius: var(--border-radius);
 					border-bottom-right-radius: var(--border-radius);
 
+					@include media-breakpoint-down(sm) {
+						padding: 1rem 1.5rem 1.5rem;
+					}
+
 					.web-form-wrapper {
 						.form-control {
 							color: var(--text-color);
 							background-color: var(--control-bg);
+
+							@include media-breakpoint-down(sm) {
+								font-size: var(--text-sm);
+							}
 						}
 
 						.form-section {
@@ -113,9 +133,19 @@
 						.form-column {
 							padding: 0 var(--padding-sm);
 
+							.form-group {
+								@include media-breakpoint-down(sm) {
+									margin-bottom: 0.5rem;
+								}
+							}
+
 							.frappe-control {
 								position: relative;
 
+								@include media-breakpoint-down(sm) {
+									font-size: var(--text-sm);
+								}
+
 								&[data-fieldtype="Rating"] {
 									.like-disabled-input {
 										background-color: unset;
@@ -194,6 +224,10 @@
 					.web-form-footer {
 						margin-top: 1rem;
 
+						@include media-breakpoint-down(sm) {
+							margin-top: 0.5rem;
+						}
+
 						.web-form-actions {
 							display: flex;
 							justify-content: space-between;
@@ -201,6 +235,10 @@
 
 							.btn {
 								font-size: var(--text-base);
+
+								@include media-breakpoint-down(sm) {
+									font-size: var(--text-sm);
+								}
 							}
 
 							.btn-link {
@@ -294,6 +332,10 @@
 									width: 100%;
 									justify-content: center;
 									margin-bottom: 1.5rem;
+
+									&:empty {
+										margin: 0;
+									}
 								}
 							}