From 4b5ce5283bc15b5228cf93a430945597d3aac02b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 30 Aug 2023 14:49:25 +0200
Subject: [PATCH] fix: position of background and content on y axis

---
 src/scene/export.ts          |  5 ++++-
 src/scene/fancyBackground.ts | 37 ++++++++++++++++--------------------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/scene/export.ts b/src/scene/export.ts
index ebd673798..f6706d0da 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -90,7 +90,7 @@ export const exportToCanvas = async (
   const onlyExportingSingleFrame = isOnlyExportingSingleFrame(elements);
 
   let scrollXAdjustment = 0;
-  const scrollYAdjustment = 0;
+  let scrollYAdjustment = 0;
 
   if (
     exportWithFancyBackground &&
@@ -114,6 +114,9 @@ export const exportToCanvas = async (
 
     scrollXAdjustment =
       (width - contentSize.width - (padding[1] + padding[3])) / 2;
+
+    scrollYAdjustment =
+      (height - contentSize.height - (padding[0] + padding[2])) / 2;
   }
 
   renderStaticScene({
diff --git a/src/scene/fancyBackground.ts b/src/scene/fancyBackground.ts
index 7bcdc5035..a5cc85e91 100644
--- a/src/scene/fancyBackground.ts
+++ b/src/scene/fancyBackground.ts
@@ -90,31 +90,26 @@ const getContentBackgound = (
   exportScale: number,
   includeLogo: boolean,
 ): { x: number; y: number; width: number; height: number } => {
-  const x =
-    (normalizedCanvasDimensions.width - contentSize.width * exportScale) / 2 -
-    FANCY_BG_PADDING * exportScale;
-
-  const y =
-    (normalizedCanvasDimensions.height -
-      (contentSize.height + DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) *
-        exportScale) /
-      2 -
-    FANCY_BG_PADDING * exportScale;
+  const totalPaddingAndRadius = DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS;
 
   const width =
-    (contentSize.width +
-      (DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
-    exportScale;
-
+    (Math.round(contentSize.width) + totalPaddingAndRadius * 2) * exportScale;
   const height =
-    (contentSize.height +
-      DEFAULT_EXPORT_PADDING +
-      FANCY_BG_BORDER_RADIUS -
-      (includeLogo ? FANCY_BG_LOGO_PADDING : 0) +
-      (DEFAULT_EXPORT_PADDING + FANCY_BG_BORDER_RADIUS) * 2) *
-    exportScale;
+    (Math.round(contentSize.height) + totalPaddingAndRadius * 2) * exportScale;
 
-  return { x, y, width, height };
+  const x = (normalizedCanvasDimensions.width - width) / 2;
+  let y = (normalizedCanvasDimensions.height - height) / 2;
+
+  if (includeLogo) {
+    y -= (FANCY_BG_LOGO_PADDING / 2) * exportScale;
+  }
+
+  return {
+    x,
+    y,
+    width,
+    height,
+  };
 };
 
 const addContentBackground = (