From 08c3f1484bc41ce10f7fad71297a2dbf90bafd04 Mon Sep 17 00:00:00 2001
From: Floydman <22880199+TheFloydman@users.noreply.github.com>
Date: Sat, 6 Jul 2024 09:29:11 -0700
Subject: [PATCH] Fixed canvas overflwong on smaller screens.

---
 rivenesenumber/index.htm | 2 +-
 rivenesenumber/style.css | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/rivenesenumber/index.htm b/rivenesenumber/index.htm
index 4ee8658..e51e8d1 100644
--- a/rivenesenumber/index.htm
+++ b/rivenesenumber/index.htm
@@ -18,7 +18,7 @@
         </div>
         <div id="play-area">
             <div id="divSvg">
-                <svg id="svgMain" width="512" height="512" viewbox="0 0 256 256"></svg>
+                <svg id="svgMain" viewbox="0 0 256 256"></svg>
             </div>
             <div id="interactArea">
                 <div id="inputs-container">
diff --git a/rivenesenumber/style.css b/rivenesenumber/style.css
index f785459..a609ca4 100644
--- a/rivenesenumber/style.css
+++ b/rivenesenumber/style.css
@@ -62,7 +62,8 @@ div.input-container {
 
 div#divSvg {
     margin: 16px auto 0 auto;
-    width: max-content;
+    width: 512px;
+    max-width: 100%;
 }
 
 div#interactArea {
@@ -93,6 +94,9 @@ svg#svgMain {
     border: 1px solid rgba(0, 0, 0, 0.75);
     border-radius: 12px;
     background-color: white;
+    max-width: 512px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
 }
 
 input#input-field,