From 80fb334d3d942542857047fa4b82c6441000f403 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 2 Feb 2022 22:48:26 +0100
Subject: [PATCH] Message: Reduce margins between messages on mobile (#1683)

---
 src/components/middle/MessageList.scss              | 5 +++++
 src/components/middle/message/Message.scss          | 6 ++++++
 src/components/middle/message/_message-content.scss | 5 ++++-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss
index ffaa2c74c..8d4e6d732 100644
--- a/src/components/middle/MessageList.scss
+++ b/src/components/middle/MessageList.scss
@@ -238,6 +238,11 @@
     opacity: 1;
     transition: opacity .3s ease;
 
+    @media (max-width: 600px) {
+      margin-top: .5rem;
+      margin-bottom: .75rem;
+    }
+
     body:not(.is-scrolling-messages) &.stuck {
       opacity: 0;
 
diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss
index d20d0b1a9..768dccc41 100644
--- a/src/components/middle/message/Message.scss
+++ b/src/components/middle/message/Message.scss
@@ -24,6 +24,9 @@
   @media (min-width: 1921px) {
     --max-width: calc(30vw - 1rem);
   }
+  @media (max-width: 600px) {
+    margin-bottom: .3125rem;
+  }
 
   &.is-swiped {
     transform: translateX(-2.5rem) !important;
@@ -93,6 +96,9 @@
 
   &.last-in-group {
     margin-bottom: 0.625rem;
+    @media (max-width: 600px) {
+      margin-bottom: .4375rem;
+    }
   }
 
   &.last-in-list {
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index ea75f73ab..d4b061128 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -482,7 +482,7 @@
   &.is-reply .media-inner,
   &.force-sender-name .Album,
   &.is-reply .Album,
-  .message-title ~ .media-inner {
+  .message-title ~ .media-inner:not(.RoundVideo) {
     margin-top: 0.375rem;
     margin-bottom: -0.375rem;
 
@@ -688,6 +688,9 @@
     font-size: 4rem;
     margin-top: .5rem;
     min-width: 10rem;
+    @media (max-width: 600px) {
+      margin-top: .375rem;
+    }
 
     &.has-comments {
       margin-top: 1.25rem;