From f50a49128cd506528235ddee2c2455f380759458 Mon Sep 17 00:00:00 2001
From: dulldesk <54601393+dulldesk@users.noreply.github.com>
Date: Wed, 10 Nov 2021 22:55:56 -0500
Subject: [PATCH] Resize p5js canvas to content width

---
 layouts/shortcodes/p5js.html | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/layouts/shortcodes/p5js.html b/layouts/shortcodes/p5js.html
index f175d15a..055372a7 100644
--- a/layouts/shortcodes/p5js.html
+++ b/layouts/shortcodes/p5js.html
@@ -9,7 +9,6 @@
 	<div class="p5js-canvas" id="p5js-{{$id}}-canvas"></div>
 	<script style="display: none;">
 	function sketch{{$id|safeJS}}(p) {
-		console.log('running sketch {{$id}}');
 		with (p) {
 			eval({{.Inner}});
 			{{$ids := slice "setup" "draw" "preload" "mousePressed" "mouseReleased" "mouseClicked" "mouseMoved" "mouseDragged" "mouseOver" "mouseOut" "keyPressed" "keyTyped" "keyReleased"}}
@@ -22,3 +21,15 @@
 	new p5(sketch{{$id|safeJS}}, 'p5js-{{$id}}-canvas');
 	</script>
 </div>
+
+<style>
+/* resize width */
+#p5js-{{$id}} canvas {
+  width: 100% !important;
+  height: auto !important;
+  min-width: 500px;
+}
+#body {
+  overflow-x: auto;
+}
+</style>