From 4ce6f17086a140607bcb976f1605b70d54e271ff Mon Sep 17 00:00:00 2001
From: Tomas Slusny <slusnucky@gmail.com>
Date: Thu, 31 Oct 2024 21:45:57 +0100
Subject: [PATCH] Use margin: 0 auto for centering canvas in default emscripten
 shells

- Instead of using width: 100% for shell.html simply center the canvas.
  With width: 100% it breaks input when the window do not fits on screen
  and on some browsers on first load the canvas do not resizes properly
  (tested on qutebrowser)
- Center canvas on minshell with margin auto instead of leaving it in top
  left always. I think this is better minimal default and it only repositions
  the canvas when it fits inside of window, so when it doesnt the original
  behaviour is preserved

Signed-off-by: Tomas Slusny <slusnucky@gmail.com>
---
 src/minshell.html | 13 +++++++++----
 src/shell.html    |  3 ++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/minshell.html b/src/minshell.html
index 4068ca36..749de6ab 100644
--- a/src/minshell.html
+++ b/src/minshell.html
@@ -34,12 +34,17 @@
     <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
 
     <style>
-        body { 
-          margin: 0px; 
-          overflow: hidden; 
+        body {
+          margin: 0px;
+          overflow: hidden;
           background-color: black;
         }
-        canvas.emscripten { border: 0px none; background-color: black;}
+        canvas.emscripten {
+          border: 0px none;
+          background-color: black;
+          display: block;
+          margin: 0 auto;
+        }
     </style>
     <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
     <script type='text/javascript'>
diff --git a/src/shell.html b/src/shell.html
index 51e675f4..616b5d1d 100644
--- a/src/shell.html
+++ b/src/shell.html
@@ -79,7 +79,8 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
       canvas.emscripten {
         border: 0px none;
         background: black;
-        width: 100%;
+        display: block;
+        margin: 0 auto;
       }
 
       .spinner {