diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index 39a4842f22..053c206572 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@@ -2,7 +2,7 @@
   import { themeStore } from "stores"
 </script>
 
-<div style={$themeStore.customThemeCss}>
+<div style={$themeStore.customThemeCss} id="theme-root">
   <slot />
 </div>
 
diff --git a/packages/client/src/components/app/forms/DateTimeField.svelte b/packages/client/src/components/app/forms/DateTimeField.svelte
index 9bbfabaee9..298fff5a1c 100644
--- a/packages/client/src/components/app/forms/DateTimeField.svelte
+++ b/packages/client/src/components/app/forms/DateTimeField.svelte
@@ -56,7 +56,7 @@
       disabled={fieldState.disabled}
       error={fieldState.error}
       id={fieldState.fieldId}
-      appendTo={document.getElementById("app-root")}
+      appendTo={document.getElementById("theme-root")}
       {enableTime}
       {placeholder}
     />