From 82c74b203039360c864470d770c92ad3d2765de2 Mon Sep 17 00:00:00 2001
From: edo999 <edo999@gmail.com>
Date: Sun, 26 May 2024 12:05:07 +0100
Subject: [PATCH] =?UTF-8?q?Set=20a=20better=20aspect=20ratio=20on=20screen?=
 =?UTF-8?q?s=20=F0=9F=96=A5=EF=B8=8F.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/ScreenCanvasContainer.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/containers/ScreenCanvasContainer.js b/src/containers/ScreenCanvasContainer.js
index b9fc97c..1e18819 100644
--- a/src/containers/ScreenCanvasContainer.js
+++ b/src/containers/ScreenCanvasContainer.js
@@ -16,6 +16,13 @@ const ScreenCanvasContainer = ({
   const canvasRef = useRef(null);
   const [isComputing, setIsComputing] = useState(true);
   const { width, height } = screen.header;
+  // Aspect ratio of 5:4 for all possible screen sizes.
+  const ratio =
+    width === 28
+      ? 'aspect-[4.375/2.133333333333333]'
+      : width === 60
+        ? 'aspect-[9.375/2.133333333333333]'
+        : 'aspect-[5/4]';
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -34,6 +41,7 @@ const ScreenCanvasContainer = ({
       width={width * 8}
       height={height * 8}
       className={clsx(
+        ratio,
         'w-full rounded',
         isComputing ? 'opacity-0' : 'opacity-100 transition-opacity',
       )}