From 75b9995b30ed773a65e1d915a1ffe912c1eab1ca Mon Sep 17 00:00:00 2001
From: Rouven Spreckels <rs@qu1x.dev>
Date: Wed, 30 Aug 2023 17:37:41 +0200
Subject: [PATCH] Fix canvas parent, set minimum width.

---
 examples/constellation_clamp.html | 6 ++++--
 examples/egui.html                | 6 ++++--
 examples/exponential_map.html     | 6 ++++--
 examples/gliding_clamp.html       | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/examples/constellation_clamp.html b/examples/constellation_clamp.html
index 001f29148a..c322d75496 100644
--- a/examples/constellation_clamp.html
+++ b/examples/constellation_clamp.html
@@ -49,6 +49,7 @@
 			}
 			main {
 				flex: 1;
+				min-width: 1280px;
 			}
 			pre {
 				display: none;
@@ -99,9 +100,10 @@ <h1>bevy_trackball/examples/constellation_clamp.rs</h1>
 							e.preventDefault();
 							e.stopPropagation();
 						});
-						let pre = document.body.querySelector('pre');
-						pre.prepend(canvas);
+						let main = document.body.querySelector('main');
+						main.prepend(canvas);
 						canvas.style.display = 'block';
+						let pre = document.body.querySelector('pre');
 						pre.style.display = 'block';
 					}
 				});
diff --git a/examples/egui.html b/examples/egui.html
index 6a164360d8..1976667d2c 100644
--- a/examples/egui.html
+++ b/examples/egui.html
@@ -49,6 +49,7 @@
 			}
 			main {
 				flex: 1;
+				min-width: 1280px;
 			}
 			pre {
 				display: none;
@@ -99,9 +100,10 @@ <h1>bevy_trackball/examples/egui.rs</h1>
 							e.preventDefault();
 							e.stopPropagation();
 						});
-						let pre = document.body.querySelector('pre');
-						pre.prepend(canvas);
+						let main = document.body.querySelector('main');
+						main.prepend(canvas);
 						canvas.style.display = 'block';
+						let pre = document.body.querySelector('pre');
 						pre.style.display = 'block';
 					}
 				});
diff --git a/examples/exponential_map.html b/examples/exponential_map.html
index 4ec6f16f89..b172f08244 100644
--- a/examples/exponential_map.html
+++ b/examples/exponential_map.html
@@ -49,6 +49,7 @@
 			}
 			main {
 				flex: 1;
+				min-width: 1280px;
 			}
 			pre {
 				display: none;
@@ -99,9 +100,10 @@ <h1>bevy_trackball/examples/exponential_map.rs</h1>
 							e.preventDefault();
 							e.stopPropagation();
 						});
-						let pre = document.body.querySelector('pre');
-						pre.prepend(canvas);
+						let main = document.body.querySelector('main');
+						main.prepend(canvas);
 						canvas.style.display = 'block';
+						let pre = document.body.querySelector('pre');
 						pre.style.display = 'block';
 					}
 				});
diff --git a/examples/gliding_clamp.html b/examples/gliding_clamp.html
index 23160ca0d7..f7dd5bfbd1 100644
--- a/examples/gliding_clamp.html
+++ b/examples/gliding_clamp.html
@@ -49,6 +49,7 @@
 			}
 			main {
 				flex: 1;
+				min-width: 1280px;
 			}
 			pre {
 				display: none;
@@ -99,9 +100,10 @@ <h1>bevy_trackball/examples/gliding_clamp.rs</h1>
 							e.preventDefault();
 							e.stopPropagation();
 						});
-						let pre = document.body.querySelector('pre');
-						pre.prepend(canvas);
+						let main = document.body.querySelector('main');
+						main.prepend(canvas);
 						canvas.style.display = 'block';
+						let pre = document.body.querySelector('pre');
 						pre.style.display = 'block';
 					}
 				});