fix(theme-classic): code block line number display with line wrapping (#7910)

* fix: line numbers display issue of code block

* test: add dogfooding test page

* chore: lint

* test: move to code-block-tests

packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/styles.module.css

@@ -35,6 +35,7 @@ the background in custom CSS file due bug https://github.com/facebook/docusaurus
   left: 0;
   padding: 0 var(--ifm-pre-padding);
   background: var(--ifm-pre-background);
+  overflow-wrap: normal;
 }
 
 .codeLineNumber::before {

website/_dogfooding/_pages tests/code-block-tests.mdx

@@ -249,3 +249,21 @@ echo "short_initially_hidden_string"
 </Tabs>
 
 [// spell-checker:enable]: #
+
+```jsx showLineNumbers
+import React from 'react';
+import Layout from '@theme/Layout';
+
+export default function MyReactPage() {
+  return (
+    <Layout>
+      <h1>My React page</h1>
+      <p>
+        This is a React page. Let's make this sentence bit long. Some more words
+        to make sure... Some more words to make sure... Some more words to make
+        sure...
+      </p>
+    </Layout>
+  );
+}
+```