Fix code block line height in Safari

Safari renders a small space between inline-block elements, resulting in a variable height of lines which cause a scroll overflow depending on their width.

On iOS this results in the font size of each token being scaled up individually depending on the width of the token element. On desktop Safari the font size stays consistent and the text causes a line break.

Author: dcastil

packages/prism/src/index.js

@@ -24,12 +24,15 @@ export default ({ children, className: outerClassName, title, ...props }) => {
         <Styled.pre className={`${outerClassName} ${className}`} style={style}>
           {tokens.map((line, i) => (
             <div {...getLineProps({ line, key: i })}>
-              {line.map((token, key) => (
-                <span
-                  {...getTokenProps({ token, key })}
-                  sx={{ display: 'inline-block' }}
-                />
-              ))}
+              {line.map((token, key) => {
+                const tokenProps = getTokenProps({ token, key })
+
+                if (line.length === 1 && !tokenProps.children) {
+                  tokenProps.sx = { display: 'inline-block' }
+                }
+
+                return <span {...tokenProps} />
+              })}
             </div>
           ))}
         </Styled.pre>