✌️

src/web/app/common/views/components/messaging-room.vue

@@ -116,7 +116,9 @@ export default Vue.extend({
 
 			if (isBottom) {
 				// Scroll to bottom
+				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%

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>

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%

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>

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>