From 098940f7edb2379820a84b59dc30c33acabaa23d Mon Sep 17 00:00:00 2001
From: Job Talle <jobtalle@hotmail.com>
Date: Wed, 7 Jun 2023 13:49:59 +0200
Subject: [PATCH] Made elements responsive

---
 js/sdfMaker.js |  5 +++--
 style.css      | 21 ++++++++++++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/js/sdfMaker.js b/js/sdfMaker.js
index 29bcae3..909ca6e 100644
--- a/js/sdfMaker.js
+++ b/js/sdfMaker.js
@@ -157,9 +157,10 @@ export class SDFMaker {
             if (this.#outputImage) {
                 const wasVisible = this.#previewVisible;
                 const previewRect = previewCanvas.getBoundingClientRect();
+                const previewScale = SDFMaker.#SIZE / previewRect.width;
 
-                this.#previewX = event.clientX - previewRect.left;
-                this.#previewY = event.clientY - previewRect.top;
+                this.#previewX = (event.clientX - previewRect.left) * previewScale;
+                this.#previewY = (event.clientY - previewRect.top) * previewScale;
 
                 this.#previewVisible =
                     this.#previewX > -SDFMaker.#PREVIEW_RADIUS &&
diff --git a/style.css b/style.css
index b27e919..00b7dd8 100644
--- a/style.css
+++ b/style.css
@@ -4,6 +4,7 @@
     --link: #de5840;
     --background: #3d4549;
     --size: 500px;
+    --padding: 8px;
 }
 
 body {
@@ -12,6 +13,8 @@ body {
     color: var(--bright);
     display: flex;
     justify-content: center;
+    margin: 0;
+    overflow-x: hidden;
 }
 
 body a {
@@ -32,14 +35,10 @@ button {
     width: 100%;
 }
 
-.panel {
-    border: 1px solid var(--bright);
-    padding: 8px;
-}
-
 #wrapper {
     display: flex;
     flex-direction: column;
+    max-width: 100%;
 }
 
 #wrapper h1 {
@@ -57,22 +56,29 @@ button {
 #columns {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
 }
 
 .column > .panel {
-    margin: 4px;
+    border: 1px solid var(--bright);
+    padding: var(--padding);
+    margin: var(--padding);
+    max-width: calc(100vw - 4 * var(--padding));
 }
 
 #input {
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
+    flex-wrap: wrap;
     gap: 16px;
 }
 
 #input-left {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: var(--size);
+    max-width: calc(100% - 4 * var(--padding));
 }
 
 #input-right {
@@ -91,6 +97,7 @@ button {
     position: absolute;
     pointer-events: none;
     width: var(--size);
+    max-width: 100%;
 }
 
 #input-target {