Fix: correct vertical alignment issue in schema example (#1297)

* fix[docs/learn]: correct vertical alignment issue in schema example

* fix[docs/learn]: remove unused replace and restore font sizes post testing

* fix[json-editor]: add horizontal scroll to json-editor

Author: Karan-Palan

components/JsonEditor.tsx

@@ -333,6 +333,7 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
           </div>
         </div>
         <Editable
+          className='overflow-x-auto'
           data-test='json-editor'
           onCopy={(e) => {
             e.preventDefault();
@@ -377,7 +378,6 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
                     (jsonPathsWithJsonScope) => jsonPathsWithJsonScope.jsonPath,
                   )
                   .includes(leaf.syntaxPart?.parentJsonPath);
-                // console.log('jsonPathsWithJsonScope', jsonPathsWithJsonScope, leaf, leaf.syntaxPart?.parentJsonPath)
                 if (
                   isJsonScope &&
                   jsonSchemaReferences.objectProperty[leaf.text]
@@ -424,7 +424,7 @@ export default function JsonEditor({ initialCode }: { initialCode: string }) {
                   if (!link) return;
                   router.push(link);
                 }}
-                className={classnames('pb-2', textStyles)}
+                className={classnames('pb-2', textStyles, 'whitespace-pre')}
                 title={leaf.syntaxPart?.type}
                 {...attributes}
               >

components/StyledMarkdown.tsx

@@ -307,34 +307,25 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
               }
 
               return (
-                <div className='overflow-x-auto flex-basis-0 max-w-full min-w-0 shrink lg:max-w-[800px] xl:max-w-[900px]'>
-                  {/* definitely not the best way to prevent overflowing. found no better way that worked */}
+                <div className='overflow-x-auto rounded-lg bg-gray-800 text-white'>
                   <Highlight
                     language={language}
-                    wrapLines={true}
-                    wrapLongLines={true}
-                    customStyle={{
-                      borderRadius: 10,
-                      paddingTop: 15,
-                      paddingBottom: 10,
-                      paddingLeft: 10,
-                      marginBottom: 20,
-                      maxWidth: '100%',
-                    }}
-                    lineNumberStyle={{
-                      marginRight: 10,
-                    }}
                     style={atomOneDark}
                     showLineNumbers
-                    startingLineNumber={1}
-                    lineProps={() => {
-                      const isHighlighted = false;
-                      return {
-                        className: `${isHighlighted ? 'bg-code-editor-dark-highlight block ml-10 w-full' : ''} pr-8`,
-                      };
+                    lineNumberStyle={{
+                      color: '#64748B',
+                      fontSize: '16px',
+                      paddingRight: '10px',
+                    }}
+                    customStyle={{
+                      padding: '12px',
+                      fontFamily: 'monospace',
+                      fontSize: '16px',
                     }}
                     codeTagProps={{
-                      className: 'mr-8',
+                      style: {
+                        fontFamily: 'monospace',
+                      },
                     }}
                   >
                     {code}