From 65cef81086dbdcc22c6e1784f9aac35d41876b1c Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Sat, 9 Apr 2022 02:07:24 +0300
Subject: [PATCH] Fix repeating pattern by y

---
 src/components/chat/patternRenderer.ts | 10 +++++++---
 src/scss/partials/_chat.scss           |  7 +++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/chat/patternRenderer.ts b/src/components/chat/patternRenderer.ts
index bbb444d6..71a40b12 100644
--- a/src/components/chat/patternRenderer.ts
+++ b/src/components/chat/patternRenderer.ts
@@ -6,6 +6,7 @@
 
 import { indexOfAndSplice } from "../../helpers/array";
 import { renderImageFromUrlPromise } from "../../helpers/dom/renderImageFromUrl";
+import mediaSizes, { ScreenSize } from "../../helpers/mediaSizes";
 import { deepEqual } from "../../helpers/object";
 
 type ChatBackgroundPatternRendererInitOptions = {
@@ -144,7 +145,9 @@ export default class ChatBackgroundPatternRenderer {
     }
 
     for(let x = 0; x < canvas.width; x += imageWidth) {
-      context.drawImage(img, x, 0);
+      for(let y = 0; y < canvas.height; y += imageHeight) {
+        context.drawImage(img, x, y, imageWidth, imageHeight);
+      }
     }
     // context.fillStyle = this.pattern;
     // context.fillRect(0, 0, canvas.width, canvas.height);
@@ -152,8 +155,9 @@ export default class ChatBackgroundPatternRenderer {
   }
 
   public setCanvasDimensions(canvas: HTMLCanvasElement) {
-    canvas.width = this.options.width * window.devicePixelRatio;
-    canvas.height = this.options.height * window.devicePixelRatio * 1.5;
+    const devicePixelRatio = Math.min(2, window.devicePixelRatio);
+    canvas.width = this.options.width * devicePixelRatio;
+    canvas.height = this.options.height * devicePixelRatio * (mediaSizes.activeScreen === ScreenSize.large ? 1.5 : 1);
   }
 
   public createCanvas() {
diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss
index 45cd408e..98885672 100644
--- a/src/scss/partials/_chat.scss
+++ b/src/scss/partials/_chat.scss
@@ -686,8 +686,11 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
         align-items: center;
         justify-content: center;
         // mix-blend-mode: overlay;
-        height: 150%;
-        top: -25%;
+
+        @include respond-to(medium-screens) {
+          height: 150%;
+          top: -25%;
+        }
       }
 
 			@include animation-level(2) {