feat(CodeSnippet): Truncate filename in middle

package.json

@@ -33,6 +33,7 @@
     "react-helmet": "^6.0.0",
     "react-live": "^2.2.2",
     "react-markdown": "^4.3.1",
+    "react-middle-ellipsis": "^1.1.0",
     "react-shadow": "^18.1.2"
   },
   "devDependencies": {

src/components/CodeSnippet.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
+import MiddleEllipsis from 'react-middle-ellipsis';
 import FeatherIcon from './FeatherIcon';
 import styles from './CodeSnippet.module.scss';
 import useClipboard from '../hooks/useClipboard';
@@ -39,9 +40,15 @@ const CodeSnippet = ({ children, copy, className, lineNumbers, fileName }) => {
           )}
         </Highlight>
       </div>
-      {(copy !== 'false' || !!fileName) && (
+      {(copy !== 'false' || fileName) && (
         <div className={styles.bottomBar}>
-          <div className={styles.fileName}>{fileName}</div>
+          <div className={styles.fileName}>
+            {fileName && (
+              <MiddleEllipsis>
+                <span title={fileName}>{fileName}</span>
+              </MiddleEllipsis>
+            )}
+          </div>
           {copy !== 'false' && (
             <button
               className={styles.copyButton}

src/components/CodeSnippet.module.scss

@@ -40,7 +40,6 @@
 .fileName {
   font-family: var(--code-font);
   font-size: 0.75rem;
-  text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding-right: 0.5rem;