From 6c3961b07831411e26fb7f3ebeeda03ac5dc1e2b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 23 Feb 2018 04:01:22 +0900
Subject: [PATCH] :v:

---
 .../app/common/views/components/messaging-room.vue  | 13 +++++++++++--
 src/web/app/desktop/views/pages/messaging-room.vue  |  4 ++++
 src/web/app/mobile/style.styl                       |  8 ++++++++
 src/web/app/mobile/views/components/ui.vue          |  7 +++++++
 src/web/app/mobile/views/pages/messaging-room.vue   |  2 +-
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/web/app/common/views/components/messaging-room.vue b/src/web/app/common/views/components/messaging-room.vue
index cfb1e23ac..7af6b3fae 100644
--- a/src/web/app/common/views/components/messaging-room.vue
+++ b/src/web/app/common/views/components/messaging-room.vue
@@ -116,7 +116,9 @@ export default Vue.extend({
 
 			if (isBottom) {
 				// Scroll to bottom
-				this.scrollToBottom();
+				this.$nextTick(() => {
+					this.scrollToBottom();
+				});
 			} else if (message.user_id != (this as any).os.i.id) {
 				// Notify
 				this.notify('%i18n:common.tags.mk-messaging-room.new-message%');
@@ -132,7 +134,7 @@ export default Vue.extend({
 			});
 		},
 		isBottom() {
-			const asobi = 32;
+			const asobi = 64;
 			const current = this.isNaked
 				? window.scrollY + window.innerHeight
 				: this.$el.scrollTop + this.$el.offsetHeight;
@@ -179,9 +181,16 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-messaging-room
+	display flex
+	flex 1
+	flex-direction column
+	height 100%
+
 	> .stream
+		width 100%
 		max-width 600px
 		margin 0 auto
+		flex 1
 
 		> .init
 			width 100%
diff --git a/src/web/app/desktop/views/pages/messaging-room.vue b/src/web/app/desktop/views/pages/messaging-room.vue
index d71a93b24..99279dc07 100644
--- a/src/web/app/desktop/views/pages/messaging-room.vue
+++ b/src/web/app/desktop/views/pages/messaging-room.vue
@@ -46,6 +46,10 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-messaging-room-page
+	display flex
+	flex 1
+	flex-direction column
+	min-height 100%
 	background #fff
 
 </style>
diff --git a/src/web/app/mobile/style.styl b/src/web/app/mobile/style.styl
index 63e4f2349..81912a248 100644
--- a/src/web/app/mobile/style.styl
+++ b/src/web/app/mobile/style.styl
@@ -5,3 +5,11 @@
 	top auto
 	bottom 15px
 	left 15px
+
+html
+	height 100%
+
+body
+	display flex
+	flex-direction column
+	min-height 100%
diff --git a/src/web/app/mobile/views/components/ui.vue b/src/web/app/mobile/views/components/ui.vue
index 54b8a2d0d..fbe80e8c2 100644
--- a/src/web/app/mobile/views/components/ui.vue
+++ b/src/web/app/mobile/views/components/ui.vue
@@ -63,5 +63,12 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-ui
+	display flex
+	flex 1
 	padding-top 48px
+
+	> .content
+		display flex
+		flex 1
+		flex-direction column
 </style>
diff --git a/src/web/app/mobile/views/pages/messaging-room.vue b/src/web/app/mobile/views/pages/messaging-room.vue
index a653145c1..eb5439915 100644
--- a/src/web/app/mobile/views/pages/messaging-room.vue
+++ b/src/web/app/mobile/views/pages/messaging-room.vue
@@ -4,7 +4,7 @@
 		<template v-if="user">%fa:R comments%{{ user.name }}</template>
 		<template v-else><mk-ellipsis/></template>
 	</span>
-	<mk-messaging-room v-if="!fetching" :user="user" is-naked/>
+	<mk-messaging-room v-if="!fetching" :user="user" :is-naked="true"/>
 </mk-ui>
 </template>