From 8ac920ad40894005029348d2ce6d94550e2469ad Mon Sep 17 00:00:00 2001
From: Austin Pinkerton <apinkert@redhat.com>
Date: Wed, 1 Nov 2023 11:56:38 -0400
Subject: [PATCH] update quickstarts docs with common issues

---
 .../docs/pages/quickstarts/common-issues.mdx  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 packages/docs/pages/quickstarts/common-issues.mdx

diff --git a/packages/docs/pages/quickstarts/common-issues.mdx b/packages/docs/pages/quickstarts/common-issues.mdx
new file mode 100644
index 000000000..f6e8fef29
--- /dev/null
+++ b/packages/docs/pages/quickstarts/common-issues.mdx
@@ -0,0 +1,28 @@
+# Common issues with quickstarts
+
+## Fixing modals that overlay quickstarts
+
+By default, modals will be appended to the root which interferes (z-axis shenanigans) with the quickstarts drawer rendering them useless. To get around this, we'll use the `appendTo` prop for our modals by appending it to `pf-c-page.chr-c-page` instead of the root.
+
+For example,
+```jsx
+const appendTo = React.useMemo(() => document.querySelector('.pf-c-page.chr-c-page'), []);
+
+return (
+  <Modal isOpen modalVariant={ModalVariant.large} hasNoBodyWrapper appendTo={appendTo} showClose={false}></Modal>
+);
+```
+
+If you have, say, a `<Wizard />` that's being returned, you can simply wrap it with the `appendTo` modal,
+
+```jsx
+const appendTo = React.useMemo(() => document.querySelector('.pf-c-page.chr-c-page'), []);
+
+return (
+  <Modal isOpen modalVariant={ModalVariant.large} hasNoBodyWrapper appendTo={appendTo} showClose={false}>
+    <Wizard />
+  </Modal>
+);
+```
+
+Use [this PR](https://github.com/RedHatInsights/sources-ui/pull/1076/files) as reference for appending the model to the correct element.