Title display issue in mobile UI #3799 (#3850)

frappe/public/css/mobile.css

@@ -25,6 +25,9 @@ body {
   body[data-route^="Form"] .page-title h1 {
     margin-top: 12px;
   }
+  body[data-route^="Form"] .page-title h1.editable-title {
+    padding-right: 80px;
+  }
   body[data-route^="Form"] .page-title .indicator {
     display: inline-block;
     margin-top: 12px;
@@ -197,7 +200,7 @@ body {
   }
   body[data-route^="Form"] .page-title .title-text {
     font-size: 16px;
-    width: calc(100% - 30px);
+    width: calc(100% - 90px);
   }
   body[data-route^="Form"] .page-title .indicator {
     float: left;

frappe/public/css/page.css

@@ -44,7 +44,6 @@
   vertical-align: middle;
 }
 .page-title .title-image {
-  display: inline-block;
   width: 46px;
   height: 0;
   padding: 23px 0;
@@ -56,6 +55,7 @@
   text-align: center;
   line-height: 0;
   float: left;
+  margin-right: 10px;
 }
 .editable-title .title-text {
   cursor: pointer;

frappe/public/less/mobile.less

@@ -34,6 +34,9 @@ body {
 	body[data-route^="Form"] {
 		.page-title h1 {
 			margin-top: 12px;
+			&.editable-title {
+				padding-right: 80px;
+			}
 		}
 
 		.page-title .indicator {
@@ -230,7 +233,7 @@ body {
 		.page-title {
 			.title-text {
 				font-size: 16px;
-				width: calc(~"100% - 30px");
+				width: calc(~"100% - 90px");
 			}
 			.indicator {
 				float: left;

frappe/public/less/page.less

@@ -54,7 +54,6 @@
 	}
 
 	.title-image {
-		display: inline-block;
 		width: 46px;
 		height: 0;
 		padding: 23px 0;
@@ -66,6 +65,7 @@
 		text-align: center;
 		line-height: 0;
 		float: left;
+		margin-right: 10px;
 	}
 }