From 0c8b9be47b6a145a0644a53fa4da412e870e0eba Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Tue, 10 Sep 2024 15:15:15 +0530
Subject: [PATCH] fix(style): print format

---
 .../print_format_builder.js                   |  6 +++---
 .../js/print_format_builder/PrintFormat.vue   |  1 -
 .../PrintFormatBuilder.vue                    |  9 +++++----
 .../PrintFormatControls.vue                   | 19 ++++++++++++-------
 frappe/public/scss/desk/print_preview.scss    |  5 ++---
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/frappe/printing/page/print_format_builder/print_format_builder.js b/frappe/printing/page/print_format_builder/print_format_builder.js
index 5b70f8e2ff..1cb90dbc3d 100644
--- a/frappe/printing/page/print_format_builder/print_format_builder.js
+++ b/frappe/printing/page/print_format_builder/print_format_builder.js
@@ -49,9 +49,9 @@ frappe.PrintFormatBuilder = class PrintFormatBuilder {
 		this.page.sidebar = $('<div class="print-format-builder-sidebar"></div>').appendTo(
 			this.page.sidebar
 		);
-		this.page.main = $(
-			'<div class="col-md-12 border print-format-builder-main frappe-card"></div>'
-		).appendTo(this.page.main);
+		this.page.main = $('<div class="col-md-12 print-format-builder-main"></div>').appendTo(
+			this.page.main
+		);
 
 		// future-bindings for buttons on sections / fields
 		// bind only once
diff --git a/frappe/public/js/print_format_builder/PrintFormat.vue b/frappe/public/js/print_format_builder/PrintFormat.vue
index a08286df80..2a35f5b4c4 100644
--- a/frappe/public/js/print_format_builder/PrintFormat.vue
+++ b/frappe/public/js/print_format_builder/PrintFormat.vue
@@ -127,6 +127,5 @@ watch(print_format, () => (store.dirty.value = true), { deep: true });
 	margin-left: auto;
 	background-color: white;
 	box-shadow: var(--shadow-lg);
-	border-radius: var(--border-radius);
 }
 </style>
diff --git a/frappe/public/js/print_format_builder/PrintFormatBuilder.vue b/frappe/public/js/print_format_builder/PrintFormatBuilder.vue
index d436b4f7cf..cae9fdf06d 100644
--- a/frappe/public/js/print_format_builder/PrintFormatBuilder.vue
+++ b/frappe/public/js/print_format_builder/PrintFormatBuilder.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="layout-main-section row" v-if="shouldRender">
-		<div class="col-3">
+	<div v-if="shouldRender" style="display: flex; width: 100%">
+		<div style="padding: var(--padding-md); padding-left: var(--padding-xl)">
 			<PrintFormatControls />
 		</div>
-		<div class="print-format-container col-9">
+		<div class="print-format-container">
 			<KeepAlive>
 				<component :is="Preview" v-if="show_preview" />
 				<component :is="PrintFormat" v-else />
@@ -59,7 +59,8 @@ defineExpose({ toggle_preview, $store });
 
 <style scoped>
 .print-format-container {
-	height: calc(100vh - 140px);
+	height: calc(100vh - 95px);
+	width: 100%;
 	overflow-y: auto;
 	padding-top: 0.5rem;
 	padding-bottom: 4rem;
diff --git a/frappe/public/js/print_format_builder/PrintFormatControls.vue b/frappe/public/js/print_format_builder/PrintFormatControls.vue
index 7ca69d997d..2772f2ead4 100644
--- a/frappe/public/js/print_format_builder/PrintFormatControls.vue
+++ b/frappe/public/js/print_format_builder/PrintFormatControls.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="layout-side-section">
+	<div style="width: 220px">
 		<div class="form-sidebar">
 			<div class="sidebar-menu">
-				<div class="sidebar-label">{{ __("Page Margins") }}</div>
+				<h5>{{ __("Page Margins") }}</h5>
 				<div class="margin-controls">
 					<div class="form-group" v-for="df in margins" :key="df.fieldname">
 						<div class="clearfix">
@@ -25,7 +25,7 @@
 				</div>
 			</div>
 			<div class="sidebar-menu">
-				<div class="sidebar-label">{{ __("Google Font") }}</div>
+				<div class="control-label">{{ __("Google Font") }}</div>
 				<div class="form-group">
 					<div class="control-input-wrapper">
 						<div class="control-input">
@@ -42,7 +42,7 @@
 				</div>
 			</div>
 			<div class="sidebar-menu">
-				<div class="sidebar-label">{{ __("Font Size") }}</div>
+				<div class="control-label">{{ __("Font Size") }}</div>
 				<div class="form-group">
 					<div class="control-input-wrapper">
 						<div class="control-input">
@@ -60,7 +60,7 @@
 				</div>
 			</div>
 			<div class="sidebar-menu">
-				<div class="sidebar-label">{{ __("Page Number") }}</div>
+				<div class="control-label">{{ __("Page Number") }}</div>
 				<div class="form-group">
 					<div class="control-input-wrapper">
 						<div class="control-input">
@@ -80,7 +80,7 @@
 				</div>
 			</div>
 			<div class="sidebar-menu">
-				<div class="sidebar-label">{{ __("Fields") }}</div>
+				<div class="control-label">{{ __("Fields") }}</div>
 				<input
 					class="mb-2 form-control form-control-sm"
 					type="text"
@@ -283,7 +283,8 @@ watch(print_format, () => (store.dirty.value = true), { deep: true });
 }
 
 .fields-container {
-	max-height: calc(100vh - 34rem);
+	margin-top: var(--margin-md);
+	max-height: calc(100vh - 31rem);
 	overflow-y: auto;
 }
 
@@ -304,6 +305,10 @@ watch(print_format, () => (store.dirty.value = true), { deep: true });
 	margin-top: 0.5rem;
 }
 
+.sidebar-menu {
+	margin-bottom: var(--margin-md);
+}
+
 .sidebar-menu:last-child {
 	margin-bottom: 0;
 }
diff --git a/frappe/public/scss/desk/print_preview.scss b/frappe/public/scss/desk/print_preview.scss
index 08072379b8..d048e453bf 100644
--- a/frappe/public/scss/desk/print_preview.scss
+++ b/frappe/public/scss/desk/print_preview.scss
@@ -7,7 +7,6 @@
 .print-preview-wrapper {
 	padding: 80px 0;
 	background-color: var(--gray-200);
-	border-radius: var(--border-radius);
 
 	@include media-breakpoint-down(md) {
 		padding: 0;
@@ -43,8 +42,8 @@
 }
 
 .layout-side-section.print-preview-sidebar {
-	padding-left: var(--padding-md);
-	padding-right: var(--padding-md);
+	padding: var(--padding-md);
+	border-left: 0px;
 
 	.checkbox label {
 		align-items: unset;