diff --git a/src/client/pages/messaging/index.vue b/src/client/pages/messaging/index.vue
index 7ee782c4a9..f8e3e0db67 100644
--- a/src/client/pages/messaging/index.vue
+++ b/src/client/pages/messaging/index.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging">
+<div class="mk-messaging" v-size="[{ max: 400 }]">
 	<portal to="icon"><fa :icon="faComments"/></portal>
 	<portal to="title">{{ $t('messaging') }}</portal>
 
@@ -168,18 +168,14 @@ export default Vue.extend({
 .mk-messaging {
 
 	> .start {
-		margin: 0 auto 16px auto;
+		margin: 0 auto var(--margin) auto;
 	}
 
 	> .history {
 		> .message {
 			display: block;
 			text-decoration: none;
-			margin-bottom: 16px;
-
-			@media (max-width: 500px) {
-				margin-bottom: 8px;
-			}
+			margin-bottom: var(--margin);
 
 			* {
 				pointer-events: none;
@@ -284,7 +280,7 @@ export default Vue.extend({
 		}
 	}
 
-	@media (max-width: 400px) {
+	&.max-width_400px {
 		> .history {
 			> .message {
 				&:not([data-is-me]):not([data-is-read]) {