Add 32px margin-top above Giscus (#6426)

Author: hasparus

packages/web/docs/src/app/docs/[[...mdxPath]]/page.tsx

@@ -37,9 +37,8 @@ export default async function Page(props: NextPageProps<'...mdxPath'>) {
   const result = await importPage(params.mdxPath);
   const { default: MDXContent, toc, metadata } = result;
   return (
-    <Wrapper toc={toc} metadata={metadata}>
+    <Wrapper toc={toc} metadata={metadata} bottomContent={<ConfiguredGiscus />}>
       <MDXContent {...props} params={params} />
-      <ConfiguredGiscus />
     </Wrapper>
   );
 }

packages/web/docs/src/components/configured-giscus.tsx

@@ -3,18 +3,20 @@
 import { usePathname } from 'next/navigation';
 import { Giscus } from '@theguild/components';
 
-export function ConfiguredGiscus() {
+export function ConfiguredGiscus(props: React.HTMLAttributes<HTMLDivElement>) {
   const route = usePathname();
 
   return (
-    <Giscus
-      // ensure giscus is reloaded when client side route is changed
-      key={route}
-      repo="graphql-hive/platform"
-      repoId="R_kgDOHWr5kA"
-      category="Docs Discussions"
-      categoryId="DIC_kwDOHWr5kM4CSDSS"
-      mapping="pathname"
-    />
+    <div {...props}>
+      <Giscus
+        // ensure giscus is reloaded when client side route is changed
+        key={route}
+        repo="graphql-hive/platform"
+        repoId="R_kgDOHWr5kA"
+        category="Docs Discussions"
+        categoryId="DIC_kwDOHWr5kM4CSDSS"
+        mapping="pathname"
+      />
+    </div>
   );
 }