From 75c78eaa4769c354fe8848b5d4ef78ca1d28cde9 Mon Sep 17 00:00:00 2001
From: Prssanna Desai <prssud@gmail.com>
Date: Fri, 12 Jul 2019 14:08:26 +0530
Subject: [PATCH 1/3] fix: form workflow status visible in mobile view

---
 frappe/public/js/frappe/ui/page.js |  5 ++++-
 frappe/public/less/mobile.less     | 12 ++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index 63798f5413..aa617905f3 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -139,7 +139,10 @@ frappe.ui.Page = Class.extend({
 	},
 
 	set_indicator: function(label, color) {
-		this.clear_indicator().removeClass("hide").html(`<span class='hidden-xs hidden-sm'>${label}</span>`).addClass(color);
+		this.clear_indicator().removeClass("hide").html(`<span>${label}</span>`).addClass(color);
+		if(this.$title_area.find('.title-image').is(':visible')) {
+			$(this.indicator).css('left', '70px');
+		}
 	},
 
 	add_action_icon: function(icon, click) {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 439e084ef4..30f3d272e7 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -40,9 +40,9 @@ body {
 		}
 
 		.page-title .indicator {
-			position: absolute;
-    		left: 5px;
-			margin-top: 12px;
+			float: left;
+			margin-top: 10px;
+			margin-right: 5px;
 		}
 
 
@@ -228,9 +228,9 @@ body {
 				width: calc(~"100% - 90px");
 			}
 			.indicator {
-				float: left;
-				margin-top: 10px;
-				margin-right: 5px;
+				position: absolute;
+				top: 25px;
+				margin: 0;
 			}
 		}
 	}

From bf2be7d79c1c369e60020e178d9840e8b024cbd7 Mon Sep 17 00:00:00 2001
From: Prssanna Desai <prssud@gmail.com>
Date: Tue, 23 Jul 2019 11:59:29 +0530
Subject: [PATCH 2/3] fix: use html layout and remove title margin

---
 frappe/public/js/frappe/ui/page.html | 6 ++++--
 frappe/public/js/frappe/ui/page.js   | 3 ---
 frappe/public/less/mobile.less       | 5 -----
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html
index 0f259d37df..b79b445000 100644
--- a/frappe/public/js/frappe/ui/page.html
+++ b/frappe/public/js/frappe/ui/page.html
@@ -6,8 +6,10 @@
 				<h1 class="flex" style="margin: auto;">
 					<div class="title-image hide hidden-md hidden-lg">
 					</div>
-					<div class="ellipsis title-text"></div>
-					<span class="indicator whitespace-nowrap hide"></span>
+					<div class="flex fill-width">
+						<div class="ellipsis title-text"></div>
+						<span class="indicator whitespace-nowrap hide"></span>
+					</div>
 				</h1>
 			</div>
 			<div class="text-right col-md-5 col-sm-4 col-xs-6 page-actions">
diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index aa617905f3..0d3d025ddd 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -140,9 +140,6 @@ frappe.ui.Page = Class.extend({
 
 	set_indicator: function(label, color) {
 		this.clear_indicator().removeClass("hide").html(`<span>${label}</span>`).addClass(color);
-		if(this.$title_area.find('.title-image').is(':visible')) {
-			$(this.indicator).css('left', '70px');
-		}
 	},
 
 	add_action_icon: function(icon, click) {
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index 30f3d272e7..a4b18dc0bb 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -54,11 +54,6 @@ body {
 			right: 140px;
 			min-width: 200px;
 		}
-
-		.title-text {
-			margin-top: 10px;
-			//margin-left: 10px;
-		}
 	}
 
 	// navbar & breadcrumbs

From c84b1f87e941a24e42f97fb1eb0a2b00fb93927c Mon Sep 17 00:00:00 2001
From: Prssanna Desai <prssud@gmail.com>
Date: Wed, 7 Aug 2019 12:15:05 +0530
Subject: [PATCH 3/3] fix: remove absolute positioning and use flex-direction
 instead

---
 frappe/public/js/frappe/ui/page.html | 2 +-
 frappe/public/less/mobile.less       | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frappe/public/js/frappe/ui/page.html b/frappe/public/js/frappe/ui/page.html
index b79b445000..a19529b57c 100644
--- a/frappe/public/js/frappe/ui/page.html
+++ b/frappe/public/js/frappe/ui/page.html
@@ -6,7 +6,7 @@
 				<h1 class="flex" style="margin: auto;">
 					<div class="title-image hide hidden-md hidden-lg">
 					</div>
-					<div class="flex fill-width">
+					<div class="flex fill-width title-area">
 						<div class="ellipsis title-text"></div>
 						<span class="indicator whitespace-nowrap hide"></span>
 					</div>
diff --git a/frappe/public/less/mobile.less b/frappe/public/less/mobile.less
index a4b18dc0bb..6b587c5026 100644
--- a/frappe/public/less/mobile.less
+++ b/frappe/public/less/mobile.less
@@ -222,11 +222,14 @@ body {
 				font-size: 16px;
 				width: calc(~"100% - 90px");
 			}
+
 			.indicator {
-				position: absolute;
-				top: 25px;
 				margin: 0;
 			}
+
+			.title-area {
+				flex-direction: column;
+			}
 		}
 	}
 	.modal {