chore: Some styling updates to the code snippet

newrelic · Jun 11, 2020 · 11acfca · 11acfca
1 parent 136389c
commit 11acfca
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
@@ -19,22 +19,22 @@ const copyCode = (code, setCopied) => {
 const CodeSnippet = ({ children, copy, className, lineNumbers }) => {
   const language = className.replace('language-', '');
   const [copied, setCopied] = useState(false);
-  const formattedCode = useFormattedCode(children);
+  const formattedCode = useFormattedCode(children ?? '');
 
   return (
     <div>
       <div className={styles.container}>
         <Highlight
           {...defaultProps}
           theme={github}
-          code={formattedCode}
+          code={formattedCode.trim()}
           language={language}
         >
           {({ style, tokens, getLineProps, getTokenProps }) => (
-            <pre style={{ ...style, padding: '20px' }}>
+            <pre className={styles.codeContainer} style={style}>
               {tokens.map((line, i) => (
                 <div key={i} {...getLineProps({ line, key: i })}>
-                  {lineNumbers !== 'false' && i < tokens.length - 1 && (
+                  {lineNumbers !== 'false' && (
                     <span className={styles.lineNumber}>{i + 1}</span>
                   )}
                   {line.map((token, key) => (

diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
@@ -1,23 +1,24 @@
 .container {
-  height: 170px;
   font-family: Menlo;
   line-height: 1rem;
   font-size: 0.75rem;
+  max-height: 26rem;
+  overflow: auto;
+}
 
-  pre {
-    box-sizing: border-box;
-    margin: 0;
-    height: 100%;
-    overflow-y: auto;
-    padding: 20px 20px 20px 10px;
-  }
+.codeContainer {
+  box-sizing: border-box;
+  margin: 0;
+  height: 100%;
+  overflow-y: auto;
+  padding: 1rem;
 }
 
 .lineNumber {
   display: inline-block;
-  width: 20px;
+  width: 1.25rem;
   text-align: right;
-  padding-right: 1em;
+  padding-right: 1rem;
   user-select: none;
   opacity: 0.5;
 }