Use CSS for margin

Author: fflaten

src/components/Giscus.js renamed to src/components/Giscus/Giscus.js

@@ -5,6 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Giscus from "@giscus/react";
 import React from 'react';
+import styles from './styles.module.css';
 
 /**
  * Adds a meta-tag to ensure new dicussion always add the canonical link in the initial post.
@@ -30,21 +31,23 @@ export function GiscusComponent() {
   const { colorMode } = useColorMode();
 
   return (
-    <Giscus
-      repo="fflaten/docs"
-      repoId="MDEwOlJlcG9zaXRvcnkzMDY2ODYxNTc"
-      category="Comments"
-      categoryId="DIC_kwDOEkeozc4CWO6M"
-      mapping="pathname"
-      strict="1"
-      reactionsEnabled="1"
-      emitMetadata="0"
-      inputPosition="top"
-      theme={colorMode}
-      lang="en"
-      loading="lazy"
-      crossorigin="anonymous"
-      async
-    />
+    <section className={styles.commentsSection}>
+      <Giscus
+        repo="fflaten/docs"
+        repoId="MDEwOlJlcG9zaXRvcnkzMDY2ODYxNTc"
+        category="Comments"
+        categoryId="DIC_kwDOEkeozc4CWO6M"
+        mapping="pathname"
+        strict="1"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme={colorMode}
+        lang="en"
+        loading="lazy"
+        crossorigin="anonymous"
+        async
+      />
+    </section>
   );
 }

src/components/Giscus/styles.module.css

@@ -0,0 +1,3 @@
+.commentsSection {
+  margin-top: 2rem;
+}

src/theme/DocItem/Layout/index.js

@@ -20,7 +20,7 @@ import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Unlisted from '@theme/Unlisted';
 import styles from './styles.module.css';
 /* Customization start */
-import { GiscusHead, GiscusComponent } from '../../../components/Giscus';
+import { GiscusHead, GiscusComponent } from '../../../components/Giscus/Giscus';
 /* Customization end */
 
 /**
@@ -63,7 +63,6 @@ export default function DocItemLayout({ children }) {
           <DocItemPaginator />
         </div>
         {/* Customization start */}
-        <br />
         <GiscusHead />
         <GiscusComponent />
         {/* Customization end */}