diff --git a/frappe/desk/page/messages/messages_row.html b/frappe/desk/page/messages/messages_row.html
index f4cb0f01c0..fae334fe65 100644
--- a/frappe/desk/page/messages/messages_row.html
+++ b/frappe/desk/page/messages/messages_row.html
@@ -1,36 +1,40 @@
 <div class="row message-row small">
-    <div class="col-sm-9">
-        <div class="media">
-        	{% if (data.is_public) { %}
-        		<span class="pull-left" title="{{ __("Public") }}"><i class="octicon octicon-rss text-muted" style="margin-top: 3px;"></i></span>
-        	{% } else { %}
-        		<span class="pull-left" style="width: 20px; height: 16px; display: inline-block;"></span>
-            {% } %}
+	<div class="col-sm-9">
+		<div class="media">
+			{% if (data.is_public) { %}
+			<span class="pull-left hidden-xs" title="{{ __("Public") }}">
+				<i class="octicon octicon-rss text-muted" style="margin-top: 3px;"></i></span>
+			{% } else { %}
+			<span class="pull-left hidden-xs"
+				style="width: 20px; height: 16px; display: inline-block;"></span>
+			{% } %}
 			<div class="pull-left hidden-xs">
 				{% if (data.communication_type==="Bot") { %}
 				<span class="octicon octicon-zap bot-icon"></span>
 				{% } else { %}
-	        	<span class="avatar avatar-small" title="{%= frappe.user.full_name(data.owner) %} ">
-	        		<img class="media-object {{ data.is_system_message ? "grayscale" : "" }}"
+				<span class="avatar avatar-small" title="{%= frappe.user.full_name(data.owner) %} ">
+					<img class="media-object {{ data.is_system_message ? "grayscale" : "" }}"
 								src="{%= frappe.user.image(data.owner) %}">
-	        	</span>
+				</span>
 				{% } %}
 			</div>
-            <div class="media-body {{ data.is_system_message ? "text-muted" : "" }} message-bubble {{ data.is_mine ? "my-message" : "" }}">
-                {%= data.content %}
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-3 text-right message-row-right">
-        <div class="text-muted">
-			<span class="hidden-sm hidden-md hidden-lg">{%= frappe.user.full_name(data.owner) %}, </span>
+			<div class="media-body {{ data.is_system_message ? "text-muted" : "" }} message-bubble {{ data.is_mine ? "my-message" : "" }}">
+				{%= data.content %}
+			</div>
+		</div>
+	</div>
+	<div class="col-sm-3 text-right message-row-right">
+		<div class="text-muted">
+			<span class="hidden-sm hidden-md hidden-lg">
+				{%= data.communication_type==="Bot" ? "Bot" : frappe.user.full_name(data.owner) %},
+			</span>
 			{%= comment_when(data.modified) %}
 		</div>
-        {% if (data.owner==user) { %}
-        <div>
-            <a class="delete text-extra-muted" data-name="{%= data.name %}"
-                onclick="frappe.desk.pages.messages.delete(this)">Delete</a>
-        </div>
-        {% } %}
-    </div>
+		{% if (data.owner==user) { %}
+		<div>
+			<a class="delete text-extra-muted" data-name="{%= data.name %}"
+				onclick="frappe.desk.pages.messages.delete(this)">Delete</a>
+		</div>
+		{% } %}
+	</div>
 </div>
diff --git a/frappe/public/css/page.css b/frappe/public/css/page.css
index 133e669727..079a4922ec 100644
--- a/frappe/public/css/page.css
+++ b/frappe/public/css/page.css
@@ -18,9 +18,11 @@
   max-width: 50%;
   vertical-align: middle;
 }
-.page-body {
-  overflow-x: hidden;
-  min-height: calc(60vh);
+@media (min-width: 767px) {
+  .page-body {
+    overflow-x: hidden;
+    min-height: calc(60vh);
+  }
 }
 .page-title h6 {
   margin-top: -8px;
diff --git a/frappe/public/less/page.less b/frappe/public/less/page.less
index 379e61056f..d7e24b57f1 100644
--- a/frappe/public/less/page.less
+++ b/frappe/public/less/page.less
@@ -24,9 +24,11 @@
 	vertical-align: middle;
 }
 
-.page-body {
-	overflow-x: hidden;
-	min-height: calc(100vh - 40px);
+@media(min-width: @screen-xs) {
+	.page-body {
+		overflow-x: hidden;
+		min-height: calc(100vh - 40px);
+	}
 }
 
 .page-title {