From c6a94aad8d31ec3530d62360d38f7bada4d6a597 Mon Sep 17 00:00:00 2001
From: Gregg Tavares <github@greggman.com>
Date: Wed, 22 Nov 2023 09:54:43 -0800
Subject: [PATCH] Make GUI appear on top of other elements

I was surprised to learn that this didn't default
to z-Index > 0. I think it works in most apps because
it's expected not to call the GUI constructor until after
your other elements have been created? (I didn't look
too deeply)

It's possible you might want to move elements, see
https://github.com/webgpu/webgpu-samples/pull/330
But in any case, it seemed like a good default.
---
 src/components/SampleLayout.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/SampleLayout.tsx b/src/components/SampleLayout.tsx
index f727ba63..f961ec90 100644
--- a/src/components/SampleLayout.tsx
+++ b/src/components/SampleLayout.tsx
@@ -90,7 +90,11 @@ const SampleLayout: React.FunctionComponent<
     if (props.gui && process.browser) {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const dat = require('dat.gui');
-      return new dat.GUI({ autoPlace: false });
+      const gui = new dat.GUI({ autoPlace: false });
+      // HACK: Make
+      gui.domElement.style.position = 'relative';
+      gui.domElement.style.zIndex = '1000';
+      return gui;
     }
     return undefined;
   }, []);