Support for 4K screens (#1572)

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);
     }

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;

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 {

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);

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;

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);
   }