From 7e4b38c8418f8f001cdbe7f2c0f0b3bbf450b3c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Mon, 19 Jun 2023 09:34:28 +0200
Subject: [PATCH] Fix #12716 does not update the `config` generation section
 (#12718)

This is a really odd bug, where Firefox doesn't re-render the `code` element, even though `children` changed.

Two things fixed that:
- remove the `language-ini` `className`
- replace the `code` block with a `div`

Both are not ideal. Therefor this solution adds an inner `div` that now has the classes while still maintaining the semantic `code` element.

I couldn't find any explanation for why this is happening and why it only happens in Firefox. I assume it is a bug caused by one of our many dependencies (or their interplay)

To make matters worse: This bug *doesn't* occure when running the site in dev mode. You have to build and serve the site to recreate it.
---
 website/src/components/quickstart.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/website/src/components/quickstart.js b/website/src/components/quickstart.js
index 160e5a778..2b5bfb5ba 100644
--- a/website/src/components/quickstart.js
+++ b/website/src/components/quickstart.js
@@ -215,15 +215,17 @@ const Quickstart = ({
                     }
                 )}
                 <pre className={classes['code']}>
-                    <code
-                        className={classNames(classes['results'], {
-                            [classes['small']]: !!small,
-                            [`language-${codeLang}`]: !!codeLang,
-                        })}
-                        data-quickstart-results=""
-                        ref={contentRef}
-                    >
-                        {Children.toArray(children).flat().filter(isRelevant)}
+                    <code>
+                        <div
+                            className={classNames(classes['results'], {
+                                [classes['small']]: !!small,
+                                [`language-${codeLang}`]: !!codeLang,
+                            })}
+                            data-quickstart-results=""
+                            ref={contentRef}
+                        >
+                            {Children.toArray(children).flat().filter(isRelevant)}
+                        </div>
                     </code>
 
                     <menu className={classes['menu']}>