From eb10f02e5f531300b4113b2111cf91a646193f9b Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 5 Jul 2022 11:22:48 +0200
Subject: [PATCH] Fixed local dev env crashing

---
 apps/comments-ui/public/main.css |  8 ++++++++
 apps/comments-ui/src/index.js    | 16 +++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/comments-ui/public/main.css b/apps/comments-ui/public/main.css
index dd3dd27c6a..32b27f4607 100644
--- a/apps/comments-ui/public/main.css
+++ b/apps/comments-ui/public/main.css
@@ -589,6 +589,14 @@ video {
   padding: 0.8rem;
 }
 
+.p-\[calc\(21px\+10\%\)\] {
+  padding: calc(21px + 10%);
+}
+
+.p-4 {
+  padding: 1.6rem;
+}
+
 .text-xl {
   font-size: 2rem;
 }
diff --git a/apps/comments-ui/src/index.js b/apps/comments-ui/src/index.js
index 44c8e42bf0..bb43242983 100644
--- a/apps/comments-ui/src/index.js
+++ b/apps/comments-ui/src/index.js
@@ -7,14 +7,20 @@ const ROOT_DIV_ID = 'ghost-comments-root';
 function addRootDiv() {
     const scriptTag = document.querySelector('script[data-ghost-comments]');
 
-    // We need to inject the comment box at the same place as the script tag
-    if (scriptTag) {
+    if (process.env.NODE_ENV === 'development') {
         const elem = document.createElement('div');
         elem.id = ROOT_DIV_ID;
-        scriptTag.parentElement.insertBefore(elem, scriptTag);
+        document.body.appendChild(elem);
     } else {
-        // eslint-disable-next-line no-console
-        console.warn('Comment box location was not found: could not load comments box.');
+        // We need to inject the comment box at the same place as the script tag
+        if (scriptTag) {
+            const elem = document.createElement('div');
+            elem.id = ROOT_DIV_ID;
+            scriptTag.parentElement.insertBefore(elem, scriptTag);
+        } else {
+            // eslint-disable-next-line no-console
+            console.warn('Comment box location was not found: could not load comments box.');
+        }
     }
 }