From 3bbf423093505299bf40e7acdd05ef35c3c66227 Mon Sep 17 00:00:00 2001
From: Cleo Menezes Jr <54215258+CleoMenezesJr@users.noreply.github.com>
Date: Thu, 24 Nov 2022 11:03:11 -0300
Subject: [PATCH 1/2] fix: Widget control on dashboard chart breaks on smaller
 screens

---
 frappe/public/scss/desk/desktop.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index c0fef60162..faf88c7524 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -237,12 +237,19 @@ body {
 		.widget-head {
 			padding: var(--padding-sm);
 			position: relative;
+			@media (max-width: 1300px) {
+				display: grid;
+			}
 		}
 
 		.widget-control {
-			position: absolute;
+			position: inherit;
 			right: var(--margin-sm);
 			top: var(--padding-sm);
+			@media (min-width: 1300px) {
+				top: auto;
+			}
+
 		}
 
 		.chart-loading-state {

From cc4e2868fce46af338da93ed0194ea43a4589c91 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <30859809+shariquerik@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:20:13 +0530
Subject: [PATCH 2/2] fix: keep actions on right

Make action button's font text smaller with lesser padding
---
 frappe/public/scss/desk/desktop.scss | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index faf88c7524..b39514b67b 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -94,7 +94,7 @@ body {
 		}
 
 		.grid-col-2 {
-			grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 			.full-width {
 				grid-column-start: 1;
 				grid-column-end: 2;
@@ -216,6 +216,9 @@ body {
 
 		.btn-xs {
 			box-shadow: none;
+			min-width: max-content;
+			font-size: 12px;
+			padding: 4px 6px;
 		}
 
 		.chart-actions {
@@ -236,20 +239,17 @@ body {
 
 		.widget-head {
 			padding: var(--padding-sm);
-			position: relative;
-			@media (max-width: 1300px) {
-				display: grid;
-			}
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			gap: 6px;
 		}
 
 		.widget-control {
-			position: inherit;
-			right: var(--margin-sm);
-			top: var(--padding-sm);
-			@media (min-width: 1300px) {
-				top: auto;
-			}
-
+			display: flex;
+			align-items: center;
+			flex: 1;
+			font-size: 10px;
 		}
 
 		.chart-loading-state {