From 6afcae9512b477ffd3299a8443f4371ed083cccc Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 10 Dec 2021 18:33:29 +0100
Subject: [PATCH] Support for 4K screens (#1572)

---
 src/components/common/UiLoader.scss        |  7 -------
 src/components/main/Main.scss              | 12 ------------
 src/components/middle/MiddleColumn.scss    | 10 ++++++++++
 src/components/middle/message/Message.scss |  8 ++++++++
 src/styles/_variables.scss                 |  4 ++++
 src/styles/index.scss                      |  2 --
 6 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/common/UiLoader.scss b/src/components/common/UiLoader.scss
index d34d07a40..fb3cfe758 100644
--- a/src/components/common/UiLoader.scss
+++ b/src/components/common/UiLoader.scss
@@ -11,7 +11,6 @@
     right: 0;
     margin: 0 auto;
     width: 100%;
-    max-width: 1920px;
     height: 100%;
     z-index: var(--z-ui-loader-mask);
     display: flex;
@@ -39,10 +38,6 @@
         max-width: 33vw;
       }
 
-      @media (min-width: 1920px) {
-        border-left: 1px solid var(--color-borders);
-      }
-
       @media (max-width: 1275px) {
         flex: 2;
       }
@@ -120,8 +115,6 @@
       z-index: 1;
       height: 100%;
       width: var(--right-column-width);
-      min-width: 15.5rem;
-      max-width: 26.5rem;
       border-left: 1px solid var(--color-borders);
       background: var(--color-background);
     }
diff --git a/src/components/main/Main.scss b/src/components/main/Main.scss
index e8c053f02..420a91d7b 100644
--- a/src/components/main/Main.scss
+++ b/src/components/main/Main.scss
@@ -42,10 +42,6 @@
     height: calc(var(--vh, 1vh) * 100);
   }
 
-  @media (min-width: 1920px) {
-    border-left: 1px solid var(--color-borders);
-  }
-
   @media (min-width: 926px) {
     max-width: 40vw;
   }
@@ -127,10 +123,6 @@
 }
 
 #RightColumn {
-  @media (min-width: 1920px) {
-    border-right: 1px solid var(--color-borders);
-  }
-
   @media (max-width: 600px) {
     height: calc(var(--vh, 1vh) * 100 + 1px);
   }
@@ -151,10 +143,6 @@
 #MiddleColumn {
   border-left: 1px solid var(--color-borders);
 
-  @media (min-width: 1920px) {
-    border-right: 1px solid var(--color-borders);
-  }
-
   @media (max-width: 925px) {
     max-width: none;
     position: fixed;
diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss
index 17eecd795..9d79afcb5 100644
--- a/src/components/middle/MiddleColumn.scss
+++ b/src/components/middle/MiddleColumn.scss
@@ -68,6 +68,16 @@
       transform: scale(0.67) !important;
     }
   }
+
+  body.animation-level-2 #Main.right-column-open &::after {
+    @media screen and (min-width: 1921px) {
+      transform: scale(0.8) !important;
+    }
+
+    @media screen and (min-width: 2600px) {
+      transform: scale(0.95) !important;
+    }
+  }
 }
 
 #MiddleColumn {
diff --git a/src/components/middle/message/Message.scss b/src/components/middle/message/Message.scss
index 96d5046bc..9b951cae5 100644
--- a/src/components/middle/message/Message.scss
+++ b/src/components/middle/message/Message.scss
@@ -19,6 +19,10 @@
   --deleting-translate-x: -50%;
   --select-message-scale: 0.9;
 
+  @media (min-width: 1921px) {
+    --max-width: calc(30vw - 1rem);
+  }
+
   &.is-swiped {
     transform: translateX(-2.5rem) !important;
   }
@@ -106,6 +110,10 @@
     --deleting-translate-x: 50%;
     --color-text-green: var(--color-accent-own);
 
+    @media (min-width: 1921px) {
+      --max-width: 30vw;
+    }
+
     body.is-ios &,
     body.is-macos & {
       --color-background-own: var(--color-background-own-apple);
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index a9955bb1a..72ecc8983 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -165,6 +165,10 @@ $color-user-8: #faa774;
     --right-column-width: 25vw;
   }
 
+  @media (min-width: 1921px) {
+    --messages-container-width: 50vw;
+  }
+
   @media (max-width: 600px) {
     --right-column-width: 100vw;
     --symbol-menu-width: 100vw;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 6f31cf742..3d3a5f8ae 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -55,8 +55,6 @@ body.cursor-ew-resize {
 
 #root {
   height: 100%;
-  max-width: 1920px;
-  margin: 0 auto;
   @media (max-width: 600px) {
     height: calc(var(--vh, 1vh) * 100);
   }