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>
This commit is contained in:
Tomas Slusny 2024-10-31 21:45:57 +01:00
parent b8c0842b2e
commit 4ce6f17086
2 changed files with 11 additions and 5 deletions

View File

@ -39,7 +39,12 @@
overflow: hidden; overflow: hidden;
background-color: black; 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> </style>
<script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script> <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
<script type='text/javascript'> <script type='text/javascript'>

View File

@ -79,7 +79,8 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
canvas.emscripten { canvas.emscripten {
border: 0px none; border: 0px none;
background: black; background: black;
width: 100%; display: block;
margin: 0 auto;
} }
.spinner { .spinner {